Send form data to Javascript on submit

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:

  function submitForm(event) {
    event.preventDefault()
    alert(event.target.elements.searchTerm.value)
  }

<form onsubmit="submitForm(event)">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

Even shorter,

function submitForm(that) {
  alert(that.searchTerm.value)
}

<form onsubmit="submitForm(this)">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

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

<form onsubmit="alert(searchTerm)">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

Because the handler itself has an implicit with(this) (details).

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)
});

<form id="myForm">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

Finally, to transform multiple inputs into a key-value object, you can use Object.fromEntries: (2)

function submitForm(event) {
  event.preventDefault()
  const obj = Object.fromEntries(new FormData(event.target).entries())
  // Prints: { searchTerm: "...", myCheckbox: "on" }
  console.log(obj)
  return false;
}

<form onsubmit="submitForm(event)">
  <input name="searchTerm"/>
  <input type="checkbox" name="myCheckbox"/>
  <button>Submit</button>
</form>

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

function checkForm(){
  console.log(document.getElementById('searchTerm').value);
  return false;
}

<form onsubmit='return checkForm();'>
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

Submit form:

JS:

var searchForm= document.getElementById('searchForm');
var submitButton = document.getElementById('submitButton');

searchForm.onsubmit= function () {
  console.log(searchTerm.value);
};

HTML:

<form id="searchForm">
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

On click for button:

JS:

var searchTerm = document.getElementById('searchTerm');
var submitButton = document.getElementById('submitButton');

submitButton.onclick = function () {
  console.log(searchTerm.value);
};

HTML:

<form>
  <input type="text" id="searchTerm" />
  <input type="button" value="Submit" id="submitButton" />
</form>

See demo Here

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

<form onsubmit="submitForm()">
  <input type="text" id="searchTerm"/>
  <input type="submit" value="Submit" id="submitButton" />
</form>

<script>
  function submitForm() {
    let input = document.querySelector('#searchTerm');
    console.log(input.value);
    return false;
  }
</script>

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 submit
    var val = document.getElementById("searchTerm").value;
    console.log(val);
  }  
}

<form id="form1">
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

jQuery version:

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

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

You tagged this with jQuery, so here's a jQuery answer. What you need to use is the .submit() event handler.

$("form").submit(function(e) {
    console.log("form data: %o", $(this).find("#searchTerm").val());
    e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <input type="text" id="searchTerm" />
    <input type="submit" value="Submit" id="submitButton" />
</form>

This code will attach a handler to the <form> onsubmit event:

So the main issue was I had included the <script> element, linking to my external JavaScript file, at the bottom of my <body> element; meaning that at the time of the form being created it didn't know what Javascript Function I was talking about.

Thanks to all of those that helped, and this was the solution....

HTML

<head>
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <!-- Custom JavaScript -->
  <script src="js/wiki.js"></script>
</head>
<body>
  <form id="theform" onsubmit="test(this.searchTerm.value)">
    <input type="text" id="searchTerm" />
    <input type="submit" value="Submit" id="submitButton" />
  </form>
</body>
</html>

JavaScript

$(document).ready(function() {

  test = function(value) {
      console.log(value);
    return false;
  };

});