Send Form Data To Javascript On Submit

Ok I feel like this should be really simple; so either I've completely missed the point of the questions on here and other websites I've read or it hasn't been asked in the same co

Solution 1:

It is not necessary to add yet another getElementById() inside the submit form handler function. I am confused as to why this approach is so common. What would you do if you needed to fetch multiple dozens / all values of the form? Write dozens of element selectors?

I think the following is much cleaner:

Inputs can include a name attribute which eases their access:

functionsubmitForm(event) {
    alert(event.target.elements.searchTerm.value)
    returnfalse;
  }

<formonsubmit="submitForm(event)"><inputname="searchTerm"/><button>Submit</button></form>

Even better,

functionsubmitForm(that) {
  alert(that.searchTerm.value)
  returnfalse;
}

<formonsubmit="submitForm(this)"><inputname="searchTerm"/><button>Submit</button></form>

In the handler itself, you can even access values directly:

<formonsubmit="alert(searchTerm); false"><inputname="searchTerm"/><button>Submit</button></form>

Even though I have no idea why the latest example works; Havent found any documentation regarding this yet; I opened a question here.

If you register the event handler via JS, the this (in non-lambda functions) already points to the form element, so you can also do

document.querySelector('#myForm').addEventListener('submit', function() {
  event.preventDefault()
  alert(this.elements.searchTerm.value)
});

<formid="myForm"><inputname="searchTerm"/><button>Submit</button></form>

If you want to get a key/value mapping (plain) object out of an HTML form, see this answer.

Solution 2:

Something like this?

document.getElementById('theform').onsubmit = function() { 
    console.log(document.getElementById('searchTerm').value);
    returnfalse;
};

JSFiddle here: https://jsfiddle.net/km7rt62v/

It's important to return false; to prevent default behaviour at the end of your submit handler, as otherwise the form will post and reload the page.

As others have demonstrated, it is also possible to use the onsubmit html attribute of the form element, it's a personal preference, but I prefer a cleaner separation between JS and HTML.

Edit: Since I got accepted answer and the question is tagged with jQuery, here's the jQuery equivalent:

$('#theform').submit(function() { 
    console.log($('#searchTerm').val());
    returnfalse;
});

Solution 3:

This is a pure simple JavaScript. You could use jQuery as well.

functioncheckForm(){
  console.log(document.getElementById('searchTerm').value);
  returnfalse;
}

<formonsubmit='return checkForm();'><inputtype="text"id="searchTerm" /><inputtype="submit"value="Submit"id="submitButton" /></form>

Solution 4:

there is an attribute you can use called onsubmit when you include an input with the type of submit in your form. Here is some documentation http://www.w3schools.com/tags/ev_onsubmit.asp.

The code would look something like this

<formonsubmit="submitForm()"><inputtype="text"id="searchTerm"/><inputtype="submit"value="Submit"id="submitButton" /></form><script>functionsubmitForm() {
    let input = document.querySelector('#searchTerm');
    console.log(input.value);
    returnfalse;
  }
</script>

Solution 5:

To have such a function in an external file, your best bet is to wire the submit event in an onload event:

window.onload=function() {
  document.getElementById("form1").onsubmit=function(e) {
    e=e?e:event;
    e.preventDefault(); // cancel the submitvar val = document.getElementById("searchTerm").value;
    console.log(val);
  }  
}

<formid="form1"><inputtype="text"id="searchTerm" /><inputtype="submit"value="Submit"id="submitButton" /></form>

jQuery version:

$(function() {
  $("#form1").on("submit",function(e) {
    e.preventDefault(); // cancel the submitvar val = $("#searchTerm").val();
    console.log(val);
  }); 
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><formid="form1"><inputtype="text"id="searchTerm" /><inputtype="submit"value="Submit"id="submitButton" /></form>