Switching my form submit to ajax-can I just change onsubmit action?

Question

I see lots of jquery tutorials from building the submit form from scratch, and that is cool, but I'm wondering if I can convert my existing form.

I'm using a typical form, and already have an email and blank values checking in place. Right now, on submitting the form, the user is taken to the confirmation php page withing form-submit.php.

I'd like to change that to just giving a user a line on the current page "Your form has been submitted"

Here is my form:

<form name="theForm" action="/contact-form2.php" method="post" onsubmit="return formCheck(this);" >
<table class="formTable" cellpadding="3" cellspacing="0">
  <tbody><tr>
    <td align="left"><b>Name:</b></td>
    <td><input name="name" id="name" size="25" value="" type="text" /></td>
   </tr>
  <tr>
    <td align="left"><b>Email:</b></td>
    <td><input name="email" id="email" size="25"  type="text" /></td>
  </tr>
  <tr>
    <td align="left"><b>Confirm Email:</b></td>
    <td><input name="email_confirm" id="email_confirm" size="25"  type="text" /></td>
  </tr>
  <tr>
    <td align="left"><b>Subject:</b></td>
    <td><input name="Subject" id="subject" size="35" value="" type="text" /></td>
  </tr>
  <tr>
    <td align="left" valign="top"><b>Message:</b></td>
    <td><textarea name="Message" id="message" cols="30" rows="6"></textarea></td>
  </tr>
  <tr align="left"><td>&nbsp;</td><td><input type="submit" value="Submit" onclick=" return checkEmail();" />&nbsp;<input type="reset" value="Reset" /></td></tr>
</tbody>
</table>
</form>

So is it possible to just change the on submit or onclick to be able to both submit the form through the external php file, and stay on the same page?

Answer 1

Yes, you can change the onclick form action to a javascript:myajaxsubmit() function.

Answer 2

You can convert the existing form, but it is not as simple as just changing the onSubmit or onClick events.

When you use jQuery or another Ajax library to do a callback you are loading new content into the existing page. To do that you need a labeled block, usually a div, to contain any data to change. You also need to write the wrapping code for the callback to send it and to update the page's HTML.

The quick and dirty version on your form would be to wrap the table in a div tag and the Ajax call return new HTML for that div. Your new target for onsubmit would be the wrapping code for the callback I described above.

You still need to do all the work to use jQuery and point it to the right places. As I use prototype.js I can't really detail the jQuery process, but all the tutorials you are reading can.

Answer 3

Yes it is. I would suggest introducing some Javascript (the following example uses jQuery):

<script type="text/javascript">
// when the DOM is ready
$(document).ready(function() {
    // bind some code to the form's onsubmit handler
    $('form[name=theForm]').submit(function() {
        if(formCheck(this)) {
            // $.post makes a POST XHR request, the first parameter takes the form's
            // specified action
            $.post($("form[name=theForm]").attr('action'), function(resp) {
                if(resp == '1') {
                    alert('Your form has been submitted');
                } else {
                    alert('There was a problem submitting your form');
                }
            });
        }
        return false;
    });
});
</script>

The return false at the end of the above submit handler prevents the browser from loading up the form's action (following the url) in the traditional way. Furthermore, if Javascript is not present, the form will submit the old school way, so essentially you have added a layer of usability above your standard form implementation which degrades gracefully.

I would like to point out that it is always a good idea to provide the user with realistic feedback. That is to say, the ajax posting of the form can capture some indication of this from the server, in the above example I have assumed that a '1' means that the record was successfully saved, and a '0' means it was not saved (the query failed, etc.). The message displayed to the user depends on this outcome.