How to replace information in a form using jQuery on submit

Question

Here is my form,

<div id="myForm">
    <form method="post" id="contact-form" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
        <div class="row uniform">
          <div class="6u 12u$(medium)">
              <input type="text" name="fullname" id="fullname" value="" placeholder="Enter your full name" required />
          </div>
          <div class="6u 12u$(medium)">
              <input type="email" name="email" id="email" value="" placeholder="enter your email address" required />
          </div>
          <div class="6u 12u$(medium)">
              <textarea name="comment" id="comment" value="" placeholder="Enter your message" ></textarea>
          </div>
          <div class="6u 12u$">
              <ul class="actions">
                  <li><input type="submit" value="Submit" class="special" /></li>
              </ul>
          </div>
         </div>
   </form>
</div>

I want to replace form with, thank you for submitting on selecting the submit button, at the moment It just refreshes the page and does not replace the form, I don't want it to refresh the page I want it to just submit and fade in a message saying thank you for submitting your details.

here is my jquery

 <script>
    $("#contact-form").submit(function(){
    $("#myForm").html("thank you for submitting your details.");
    });
    </script>

Please can you help?

`$("#contact-form").submit(function(event){ event.preventDefault(); //Your code` — Alex, Dec 24 '15 at 14:27

score 1 · Answer 1 · answered Dec 24 '15 at 14:45

We have to create a ajax call in order to submit without refreshing the page:

 $("#contact-form").submit(function(e) {
   e.preventDefault();
   $.post($(this).attr('action'), $(this).serialize());
   $("#myForm").html("thank you for submitting your details.");
 });

https://jsfiddle.net/u2gyocj7/1/

Take a look in the network tab to display the POST data

score 0 · Answer 2 · edited May 23 '17 at 12:30

In that case you will want to look at using ajax form. If you submit as it is then it will post back and refresh the page. Ajax will post the data without changing anything on the page.

http://api.jquery.com/jquery.post/

jQuery AJAX submit form

Then, once the data has been sent you can manipulate the DOM as you wish. This will also allow you to show different messages based on whether the data was saved correctly or not, if done correctly.

How to replace information in a form using jQuery on submit

2 Answers2