Send Form Value in Database Through Jquery in PHP

Send Value in database through Jquery in PHP

In this tutorial you will see how we can send the form value in php through Jquery. Its an easy task and dont take your much time. You will need three things for this 1. HTML 2 PHP 3 Jquery.

First create the html file

<html>
  <head>
    <title>Jquery Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Include the Jquery Script File.

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

Add Script for checking the null and send the data to databaseTest.php to access the database and save the data to database

<script>
    $(document).ready(function(){

    $(".button").click(function(){
    var age=$('#maxAge').val();
    var wpm=$("#maxWpm").val();
    if((age=="")||(wpm==""))
        {
            $('.error').fadeIn(1000).show();

        }
        else
            {
                $('.error').fadeOut(1000).hide();

//serialize() is use for getting the data from html page and sending it to databaseTest.php

                $.post("databaseTest.php", $("#testform").serialize(),
                    function(html){
                    $("#infoDiv").html(html);

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

   <style type="text/css" >
       div{
           display: none;
}
   </style>
  </head>
  <body>

<form action="" method="post" id="testform">

          <table>
              <tr>
                  <td><span>Maximum Age:</span></td><td><input type="text" id="maxAge" name="maxAge" ></td><td><div for="age" id="age_error"><p>Enter Age</p></div></td>
              </tr>
              <tr>
                  <td><span>Maximum WPM:</span></td><td><input type="text" id="maxWpm" name="maxWpm"></td><td><div for="wpm" id="wpm_error"><p>Enter Wpm<p></div></td>
              </tr>
          </table>

          <br>
          <br>
          Gender : <select id="sex" name="sex">
              <option id="m" name="m">Male</option>
              <option id="f" name="f">Female</option>
          </select>
          <input type="button" id="register" value="Add Request">
      </form>
      <div id="infoDiv">Enter Values</div>

      <?PHP
        include 'showTable.php';
      ?>
  </body>
</html>

Here is the databaseTest.php File in this we have our database code and echo the success and failure

<?php
$Age=$_POST['maxAge'];
$WPM=$_POST['maxWpm'];
$SEX=$_POST['sex'];

$con=mysqli_connect("localhost","root","","ajaxtest")
        or die ("Error in Database Connection");
$Query="insert into info (ageinfo,wpminfo,gender) values ('$Age','$WPM','$SEX')";

$myquery=mysqli_query($con,$Query)
        or die ("Error in Query");
if($myquery)
{
    echo "<img src='blue.jpg' width=200px height=200px>";
}
 else {
    echo "Problem with Form";
}
mysqli_close($con);
?>

Good Luck …. Happy coding

Send Value in database through Jquery in PHP

Leave a Reply Cancel reply