Contact form logic / reset form without page laod

JavaScript
1

I have a simple website contact form. The form validates, clears the input fields, returns a success message and reloads the page. Is there a different way to reset the form without a page reload?

2

That all depends on any scripting that you currently have in place, and on certain aspects about the form itself.

Please provide details on those and we can help you further with the best techniques that work with what you currently have.

3

The form resides in static html page with the following dependancies:
jquery.validate.js
jquery.placeholder.js
jquery.form.js
process.php

The form uses a short script to handle the form processing, success message, form field reset and window reload. I find the window reload distracting and would like to find an alternative method to fully enable the form after a message has been sent.

 <script>
  $(function(){
    $('#contact').validate({
    
    submitHandler: function(form) {
          $(form).ajaxSubmit({
            url: 'php/process.php',
            
            success: function() {
              $('#success').append("<p class='replay'>Message sent! Thank you.</p>")
              
              $('.envelope').find('form')[0].reset(); 
              
              setTimeout(function() {
              
               $('#success').fadeOut();
              
               window.location.reload();
              
              }, 2000 );

            }

          });
        }
    });         
  });
</script>
4

Remove the reload) line.

Then instead of using reset(), set the inputs to their default values

5

I removed the reload line from the script. Not sure if I set the input fields to their default value correctly.
The form returns a success message and clears the fields after a manual page reload. It does not return a success message if the form is used a second time without reloading the page.

6

What needs to happen for the form to reset completely after submitting each message?

7

Hard to say with out seeing the form. Can you post the code for it?

8

html form

      <div id="scroll-form" class="contact-form">

        <div class="envelope-frame hideform">

          <div class="envelope"> 

            <form id="contact" method="post" action="" >
              <div class="formhead">
                <h2>Questions or Comments?</h2>
                <p>Get in touch.</p>                      
              </div><!-- /.formhead -->
              <label>Name</label>
              <input id="name" type="text" name="name" placeholder="Your Name (Required)" title="Name required" class="required">                
              <label>Email</label>
              <input id="email" type="text" name="email" placeholder="Your Email (Required)" title="Email required" class="required">    <label>Website</label>
              <input id="site" type="text" name="url" placeholder="http:// (Optional)">   
              <label>Message</label>
              <textarea id="region" name="message" placeholder="Your Message (Required)" title="Message required" class="required"></textarea>
              <button type="submit" name="submit" class="button" value="Send">Send</button>
            </form>

          </div> <!-- #/envelope -->
          
        </div><!-- /.envelope-frame -->
            
      </div><!-- /#scroll-form -->

      <div id="success"class="replay"></div><!-- /.replay -->

helper script

9

Ah, the form is sending to itself. That’s a page reload.

I think if you add an event.preventDefault() it should be OK.

10

Not sure how to implement the event.preventDefault() method. Where in the helper script should this method go?

11

The start of the submit handler is normally the best place for it to go.

12

I find this a bit confusing. The form works well the first time. That is, it delivers the message, outputs a success message, clears the input fields and fades out the success message. If I try to use the form a second time, I don’t get the same form behavior. For instance, the success message fails to display. To get the from to work fully again I have to refresh the page. Not sure what is missing to refresh the form completely with out page refresh.

How does the event.preventDefult() enable the form to be used one more time after the initial message submission? What instruction should follow after the event.preventDefault() method ?

13

preventDefault is basically saying “don’t do what would normally happen if there was no JavaScript”

In other words, test your form with JavaScript disabled.

Still works fine? Great!

Then add the JavaSscript to make it better for those with JavaScript enabled (hopefully most)

So … Does the form behave as expected without JavaScript?

14

I turned off javascript in the browser’s developer tools and added the event.prevent.Default() method after the submit handler. The form works fine the first time. It does not return a success message the second time.

15

That would be because you’ve turned off JavaScript, which ensures that none of your JavaScript will run.

16

I enabled javascript. The event.preventDefault() does not enable the form completely for use a second time.

Here is a list of steps the form must complete each time a message is sent. This sequence of steps executes the first time. The second time, step 5 fails. If I refresh the page then the form is able to complete the sequence of steps.
I am still unclear what I need to do to enable the form completely so that it can be used more than one time without a page refresh.

1- Get user input
2- Validate user input
3- Submit user input
4- Clear input fields
5- Output success message
6- Fadeout success message
7- Reset form

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.