How submit form without page reloading?


Hello Friends!

Hope you all are doing well and enjoy my blog.

If we want to submit a form without page load then we used ajax for do that. i am here telling you a way for submit a form using ajax.

Just copy and paste the “Ajax Code” between the head tag

AJAX CODE

<script type="text/javascript"> 

    jQuery(document).submit(function(e){ 
    var form = jQuery(e.target); 
    if(form.is("#ff")){ // check if this is the form that you want (delete this check to apply this to all forms) 
        e.preventDefault(); 
        jQuery.ajax({ 
            type: "POST", 
            url: form.attr("action"),  
            data: form.serialize(), // serializes the form's elements. 
            success: function(data) { 
                alert("Mail Sent!");
                console.log(data); //Reset all the fields
            } 
        }); 
    } 
}); 
</script>

Just copy and paste the “HTML Code” between the body tag

HTML CODE

 <form action="mail.php" method="post"  id="ff">
        <input name="name" id="name" type="text" value="Your Name*"  onfocus="if(this.value == 'Your Name*') {this.value = '';}" onblur="if (this.value == '') {this.value='Your Name*'}"/>
        <input name="email" id="email" type="text" value="Your Email Address*"  onfocus="if(this.value == 'Your Email Address*') {this.value = '';}" onblur="if (this.value == '') {this.value='Your Email Address*'}"/>
        <input name="message" id="message" type="text" value="Your Kids (age, grade, class-subject)"  onfocus="if(this.value == 'Your Kids (age, grade, class-subject)') {this.value = '';}" onblur="if (this.value == '') {this.value='Your Kids (age, grade, class-subject)'}"/>
        <div>
          <input name="" type="submit" value="Send Us Your Information" />
        </div>
      </form>

Enjoy Code!

If anyone want to a full zip file then please drop a mail on my email raghunath.0087@gmail.com

Download Zip File

 

Advertisements

Sr. Software Engineer

Tagged with: , , ,
Posted in JQuery, PHP
One comment on “How submit form without page reloading?
  1. nice, informative and educational post and the most interesting and informative post i’ve ever seen, so the post bookmarked my browser for future

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: