How can I set a JavaScript variable from a form without a user clicking submit?

I have a form with several different text inputs. The value of each corresponds to a unique JavaScript variable. The variable is then written out on the page.

Is there a way to update the variable automatically so the user doesn't have to hit submit and reload the page each time? I have heard AJAX could be a potential answer to this, but I am unfamiliar with it. If that route is best, a开发者_Go百科re there certain scripts that would be recommended?

You might want to look into jQuery as a good first start into javscript in the browser. For instance, you could write:

<form id="form-id">
    <input id="first" type="text" />
    <input id="second" type="text" />
    <input id="third" type="text" />
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var first, second, third;
$(function(){
    $("#form-id").submit(function(){
        first = $("#first").value();
        second = $("#second").value();
        third = $("#third").value();
        return false; //Prevent the form from submitting.
    });
});
</script>

http://jquery.com/