I have an HTML form with inputs that will only do client-side processing in JavaScript and jQuery, but won't actually submit anything to the server. What is the proper way of laying out out such a form in HTML and writing JavaScript that will process a form when the form's inputs change (both on an explicit submit event (i.e. clicking 'Submit' or Enter), or on an implicit change event (un-focusing from an input, or even on every keystroke/click of an input's text))?

I have an HTML form with inputs that will only do client-side processing in JavaScript and jQuery, but won't actually submit anything to the server. What is the proper way of laying out out such a form in HTML and writing JavaScript that will process a form when the form's inputs change (both on an explicit submit event (i.e. clicking 'Submit' or Enter), or on an implicit change event (un-focusing from an input, or even on every keystroke/click of an input's text))?

• javascript
• jquery
• html
• forms
• form-submit

4 Answers 4

Firstly prevent the default form action by returning false in the onsubmit or by using event.preventDefault() in the event handler.

Inline:

<form id="myform" onsubmit="return false" action="pleaseturnonjavascript.html">

better:

window.onload=function() {
  document.getElementById("myform").onsubmit=function() {
    // do something with the form field
    return false; // old way
  }
}

using preventDefault:

window.onload=function() {
  document.getElementById("myform").onsubmit=function(e) {
    e.preventDefault(); // first statement
    // do something with the form field
  }
}

or jQuery:

$(function() {
  $("#myform").on("submit",function(e) {
    e.preventDefault(); // first statement
    // do something with the form field
  });
});

then decide if you want to use onkeyup (I use that in number fields) or onblur (used when the complete value is important)

This can be done using plain old JavaScript or jQuery, but we need more information to help you further

I prefer using the form tag and pass the form object instead of just have input fields that have to be accessed per field instead of using the form elements array - I feel unhappy not wrapping inputs in a form tag. It might not even validate and the added benefit is that enter will trigger the submit event without other measures.

If you really never submit the form to somewhere, you can avoiding use a form tag at all. And just use input boxes and buttons. Then if the user clicks the button, either your click handler runs, or nothing happens at all.

As for catching the explicit events, button click, unfocus (blur) I would suggest jQuery as it makes it really easy to attach handlers to those events in a cross-browser way.

• http://api.jquery.com/click/
• http://api.jquery.com/blur/
• http://api.jquery.com/keyup/

You don't need a form tag. You can use the attach functions to each element, like so:

 $("#input-element-id").change(function(){
  //your code here
  });

or you can wrap a containing DIV (or other element) around them all, and do this:

$("#containing-div-id").change(function() {
//your code here
});

just go through some examples on w3school site http://www.w3schools.com/js/js_examples.asp

you can get an idea on how to write onclick ,onmouseover events