Submit form values to a script without loading a new page

Question

Hey all,

I have an issue regarding sending form values to a script. I have a form set up, and upon the user pressing a button I want the values in the form to display on another part of the page. I can easily do this with php or another web scripting language, but all I know is how to do this by sending it to the script in a form of

http://www.example.com/myScript.pbp?value1=VALUE

is there a way to do this without loading a new page? Like just show a loading overlay on the page until the script completes and displays the value on the page?

I'm guessing this would be accomplished using Javascript or Ajax or something like that.

If anyone could help me out, or even just say where I should start to look, I'd really appreciate it!

Answer 1

Indeed. Just attach an onsubmit event listener to your form that always returns false to prevent actual sending of your form via the usual GET or POST request.

In your event listener you can send the form values using XMLHttpRequest and let the callback function update the relevant part(s) of your page.

But remember to always create a fallback option (with the usual GET or POST request of the form) to handle your form in case JavaScript is not available (e.g., turned off, blocked, etc.).

Answer 2

If you just want the values in the form to display on the page again without any interaction with the server then something like jQuery would be the best approach.

Jquery has a nice form plugin that you can do the following:

var form_values = $('#form_name').formHash();

the form_values will then be a hashed array of your form values in the system i.e.

<form id="test">
  <input id="test1" name="test1" type="text" value="Test Text"/>
</form>

So form_values['test1'] would hold the value Test Text in it

Once you have the values you could then use some other jquery functions to display them on the page i.e.

<div id="displayDiv"></div>

then your javascript could be

for (key in form_values) {
  $('div#displayDiv').append('<div>Key: ' + key + ' Value: ' + form_values[key] + '</div>');
}

This would put your values in the display div

Answer 3

Yes AJAX would be exactly how you would do it. Have a look at the tutorial over at Tizag: http://www.tizag.com/ajaxTutorial/index.php

That will get you started in no time at all.

Answer 4

Here is a simple javascript ajax object. You can use without loading any library.