Monday 21 May 2012

• Home
• Answers
• About
• Contact

From w3schools.in

Submit Form without Refreshing Page with Jquery

This post helps you to submit your form without refreshing page. In this tutorial I will show you how simple it is to do using jQuery form plugin just five lines of JavaScript code, no need to post data string values via ajax. Explained collaboration with validate plugin for implementing form field validations.

JavaScript Code

$("#contact_form").ajaxForm()- contact_form is the ID name of the FORM tag. While submitting FORM ajaxForm() method posting data to submit.php without refreshing page. Result will show in #msg

<script type="text/javascript"
src="http://ajax.googleapis.com/

 
ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript"
src="jquery.form.js"></script>

<script type="text/javascript">

  $('document').ready(function()

  {

  $('#contact_form).ajaxForm( {

  target: '#msg, 

  success: function() { 

  $('#form_box).slideUp('fast'); 

  } 

  }); 

  });

</script>

 

Contact.html

Simple HTML code. FORM contains three input fields name, email and message.

<div id="msg"></div>
<div
id="form_box">
  <form name="contact_form"
id="contact_form" action="submit.php"
method="post">
    <ul
id="ngothastyle3">
      <li>
       
<label>Name</label>
        <input type="text"
name="name" class="" maxlength="40" />

     </li>
      <li>
       
<label>Email</label>
        <input type="text"
name="email" class="" maxlength="100"
/>
      </li>
      <li>
       
<label>Message</label>
        <textarea
name="message" rows="5" cols="45"
class=""></textarea>
      </li>
     
<li>
        <label>&nbsp;</label>
       
<input type="submit" value="Submit">
     
</li>
    </ul>
  </form>
</div>

Contacts

Table contains name, email, message and created data etc.

CREATE TABLE `contact` (
  `id` int(11)
AUTO_INCREMENT PRIMARY KEY,
  `name` varchar(255) UNIQUE KEY,
 
`email` varchar(100),
  `message` text UNIQUE KEY,
  `created_date`
int(11),
  )

 

submit.php

Contails simple PHP code. Inserting values into contacts table.

<?php
include("db.php");
if($_SERVER["REQUEST_METHOD"]
==
"POST")
{
$name=mysql_real_escape_string($_POST['name']);
$email=mysql_real_escape_string($_POST['email']);
$message=mysql_real_escape_string($_POST['message']);
if(strlen($name)>0
&& strlen($email)>0 &&
strlen($message)>0)
{
$time=time();
mysql_query("INSERT
INTO contact (name,email,message,created_date)
VALUES('$name','$email','$message','$time')");
echo "Thanks
for your inquiry. Your message was received.<br>
We will get back
to your shortly.";
}
}
?>

 

Validate Plugin

Here the collaboration of jQuery validate and form plug-in.

<script type="text/javascript"
src="js/jquery.js"></script>
<script type="text/javascript"
src="js/jquery.validate.js"></script>
<script
type="text/javascript"
src="js/jquery.form.js"></script>

<script type="text/javascript">

$('document').ready(function(){

$('#contact_form').validate({

  rules:{

  "name":{

  required:true,

  maxlength:35

  },
 "email":{

  required:true,

  email:true,

  maxlength:85

  },
 "message":{

  required:true

  }},
 messages:{

  "name":{

  required:"Please enter name"

  },
 "email":{

  required:"Please enter email",

  email:"Please enter a valid email address"

  },
 "message":{

  required:"Please enter message"

  }},
 submitHandler: function(form){

  $(form).ajaxSubmit({

  target: '#msg', 

  success: function() { 

  $('#form_box').slideUp('fast'); 

  } 

  }); 

  

  }

  

  })

  

  });

</script>

db.php

PHP database configuration file

<?php
$con = mysql_connect("localhost",
"root","") or die("Problem in MySQL
connection.");
mysql_select_db("database_name",$con) or
die("Problem in Database connection.");
?>

 

» Useful functions to tighten the security in PHP
» CodeIgniter A recommendation for PHP Programmer
» PHP Framworks Why when and which
» Solving Floating point number precision lost problem in PHP
» Handling array of HTML Form Elements in JavaScript and PHP
» How to filter user submitted data easily in PHP
» Prevent form post request from another domain in PHP
» Flaw in and or logical operator php
» Default arguments functions php
» Submit Form without Refreshing Page with Jquery
» MySQL Performance Tips
» Free ajax chat applications in PHP
» Return More Than One Value From a Function in PHP
» PHP Optimization Tips
» PHP Error Handling
» Useful PHP Classes and Libraries
» Useful Tools For PHP Developers
» PHP Frameworks
» Web based HTML Editors
» 301 redirect in PHP and .htaccess
» Hiding PHP file extension
» Rredirect Browser HTTPS SSL PHP
» Tighten php security functions
» PHP Framworks