[Solved] I can’t get form submit to work in html / JavaScript

Question

You can use the javascript methods onchange or onkeydown to trigger input from the input field, you don’t need to submit a form. But in case you needed just that I added the example. I used jQuery instead of plain javascript to write the functions because now they practically become one-line functions.

onchange will wait for the user to press enter or for the input element to loose focus to call the function.

onkeydown will call the function on every key press.

e.preventDefault() cancels the default action of the element, which in this case is a submit action, and lets us make the decision through code whether to submit or not.

Below are some javascript/jQuery test functions and a sample HTML file so you can test out what works best for you.

EDIT: I added some examples on how to store the current value of an input field into a variable

// get the Value of input element directly into a variable
var myVariable = $('#theInput_1').val();

// myVariable will return empty string since the input element is empty
console.log('This is the starting value of the 1st input element: ' + myVariable);


// Function for onkeydown test
function testKeyDown()
{
  // stored in a variable which is not available outside the function
  var myVariable = $('#theInput_1').val();
  $('#paraOne').text(myVariable);
  
  // test output - $('#theInput_1').val() will return empty
console.log('This is the changed value of the 1st input element: ' + myVariable);
}

// Function for onchange test
function testOnChange()
{
  $('#paraTwo').text($('#theInput_2').val());
}

// Function for submit test
$( "#submit" ).on( "click", function(e)
{
  e.preventDefault(); // Prevents default action of submit
  $('#paraThree').text($('#theInput_3').val());
});

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

<p id="paraOne">This text will be replaced on success.</p>
<input type="text" id="theInput_1" onkeydown="testKeyDown();" size="50" value="" placeholder="onkeydown test" />

<p id="paraTwo">This text will be replaced on success.</p>
<input type="text" id="theInput_2" onchange="testOnChange();" size="50" value="" placeholder="onchange test" />

<p id="paraThree">This text will be replaced on success.</p>
<form>
<input type="text" id="theInput_3" size="50" value="" placeholder="form submit test" />
<input type="submit" id="submit" value="Submit me" />
</form>

</body>
</html>

Accepted Answer