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

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.