0

I have a form on my site that I would like users to be able to submit without the page reloading. I found this answer which solved that part of it for me, but now I am trying to figure out how I would add success/error messaging to the form upon submit.

Here is my form code:

<iframe name="submit" style="display:none;"></iframe>
<form method="post" action="submit.php" target="submit">
    <input type="text" name="firstname" placeholder="First name" />
    <input type="text" name="lastname" placeholder="Last name" />
    <input type="text" name="email" placeholder="Email address" />
    <input type="submit" name="submit" value="" />  
</form>

How can I determine whether the form was submitted successfully or not and display a success or error message based on the result? Also open to other suggestions for submitting the form without the page reloading.

Community
  • 1
  • 1
user13286
  • 3,027
  • 9
  • 45
  • 100
  • Is there any reason you cannot just use xhr? – PeeHaa Jul 11 '16 at 17:18
  • I think using jQuery/AJAX would be the best option here. – Indrasis Datta Jul 11 '16 at 17:19
  • 1
    Like the others have said, use ajax to submit forms in the background. If using jquery, it is pretty simple. Without jquery, it can be done but is a little more manual. It would also solve your problem and be done the "correct" way. If you really want to do it the "year 2003" way and use an iframe, there is an onload event for the iframe that you can attach to and have a callback called when a new page is loaded in the iframe. That should be able to get whatever content was returned. You can also echo a script in the iframe that should be able to call window.parent to get the parent page. – Jonathan Kuhn Jul 11 '16 at 17:28

1 Answers1

1

To clarify what other commenters are already saying or have said:

The source-code in your original post consists only of a vanilla "form submit," which will be dutifully carried out by the browser just as things were done when HTTP was first invented:   "the data will be submitted to the host, and whatever the host returns will be displayed as the 'next page.'" In this scenario, the role of the web-browser is totally passive.

Very commonly today, a technique called "AJAX" is used: instead of just "submitting the form" when a button is clicked, the submit-button causes a JavaScript subroutine to be run, and it (using an "Asynchronous HTTP Request" = "XHR") both submits the data to the host and intercepts the host's response. The role of (the JavaScript now being executed by) the web-browser is now active.

The host, in turn, now ordinarily does not return "displayable HTTP text." Knowing that it's being talked-to by another computer program, it instead sends that program something that can be very-easily consumed. The host typically sends "a data structure," which is ordinarily formatted in a format called "JSON."

... and, today, there are legions of great JavaScript libraries that can "make this a piece o' cake." (JQuery is only the most-popular one.)

Therefore, "surf over to some of these web sites, and take a look at their examples." (They not only supply the working demonstrations, for your amusement and amazement, but they show you on-the-spot exactly how it's done.)

Mike Robinson
  • 8,490
  • 5
  • 28
  • 41