0

So, I have a contact form on one page (let's call it send_now.php or example.com/send)

Once the form is filled out and submitted, then an email is sent to a certain user while the page is directed to example.com/it_is_sent page which contains a sent confirmation based on confirmation.php.

I would like to know how to change it so that everything is done on example.com/send/ page without refreshing or redirecting the user to the next page.

Here is what I mean.

So, in /send/ page, an user fills out the form and click send. Then without redirect the user to /confirmation/ page, the confirmation is shown on /send/ page without redirecting the user, so everything happens within the same page.

Is there a way to do that? what is the general concept of doing things like that? or, can the form be submitted within the same page without refreshing the page?

Thanks!

Emily Turcato
  • 581
  • 1
  • 6
  • 17
  • Research submitting forms via AJAX. This is simple and done all the time, but it's best to learn from a source that will teach you from the basics! – Jeff Aug 22 '15 at 07:02
  • 1
    Oh i see, that is what is called. Perfect =) That will be a good starting point. Thanks! – Emily Turcato Aug 22 '15 at 07:02

1 Answers1

1

Take a quick search around the net for "jquery ajax form submit". The term I think you're looking for is Ajax. It is what allows you to have JavaScript send off data to a PHP script without refreshing the page.

You build your form like normal, and attach a jQuery click event to the form or submit button. The jQuery/Ajax function takes the data from the form and sends it over GET or POST to your PHP form.

Whatever your PHP script outputs is received by your jQuery/Ajax function. I like to use json_encode on a PHP Array for the PHP script output. In JavaScript I can then easily work with the results as an array of values.

Depending on what's in the Array or output depends on how your JavaScript should react. Output could be as simple as a 0 or 1, true or false, or a json Array or values like I usually do. I'll usually include at least error=true/false.

You could have the PHP script output be displayed in a Div once the Ajax success function fires.

You could also use jQuery load() to load another page into a Div upon success. The possibilities are endless when you combine it all.

You can easily find code samples for this all over StackOverflow and tutorials on the rest of the Internet. You're looking for "jQuery Ajax Form Submit to PHP", maybe even with MySQL?

This technique makes buttons that make instant changes possible. Once you're done with this project, look into websockets if you really want to see how instant the web can be.

Mike J
  • 416
  • 4
  • 6