How to insert in Mysql with Jquery Ajax with validation?

By November 2, 2011 Jquery
Using of this tutorials you can easily Insert data in database and validate your form using jquery.

Create ajax.php file

<?php

    mysql_connect(“localhost”, “root”, “”)or die(“cannot connect”);
    mysql_select_db(“prodchecklist”)or die(“cannot select DB”);   
// CLIENT INFORMATION 
    $fname        = htmlspecialchars(trim($_POST[‘fname’])); 
    $lname        = htmlspecialchars(trim($_POST[‘lname’])); 
 
    $addClient  = “INSERT INTO tbluser (username,userpassword) VALUES (‘$fname’,’$lname’)”; 
    mysql_query($addClient) or die(mysql_error()); 
   
?>

jqueryForm.php

<html>
    <head>
        <title>
        </title>
        <script src=”lib/jquery/jquery-1.3.2.js” type=”text/javascript”>
        </script>
        <script src=”javascripts/jquery.validate.js” type=”text/javascript”>
        </script>
      
        <script type=”text/javascript”>
            $(document).ready(function(){          
              
                $(“form#submit”).submit(function() {
              
                 $(“.error”).hide();
                
                 $(“#loader”).show();
                $(“#loader”).fadeIn(400).html(‘<img src=”ajax-loader.gif” align=”absmiddle”>&nbsp;<span class=”loading”>Loading Comment…</span>’);
              
                 var hasError = false;  
                // we want to store the values from the form input box, then send via ajax below
                var fname     = $(‘#fname’).attr(‘value’);
                var lname     = $(‘#lname’).attr(‘value’);          
              
                if(fname == ”){
                     $(“#fname”).after(‘<span class=”error”>Please enter a First name</span>’);                    
                     $(“#loader”).hide();
                    hasError = true;
                }
              
                if(lname == ”){
                     $(“#lname”).after(‘<span class=”error”>Please enter a Last name</span>’);
                     $(“#loader”).hide();
                     hasError = true;
                }
                    if(hasError = false){
                        $.ajax({
                            type: “POST”,
                            url: “ajax.php”,
                            data: “fname=”+ fname +”& lname=”+ lname,
                            success: function(){
                                document.getElementById(‘fname’).value=”;
                                document.getElementById(‘lname’).value=”;
                              
                                $(“#loader”).hide();
                              
                            }
                        });
                    }
                return false;
                });
            });
          
        </script>
      
    </head>
    <body>
        <div class=”container”>
            <form id=”submit” method=”post”>
                <fieldset>
                    <legend>Enter Information</legend>

                    <label for=”fname”>Client First Name:</label>
                    <input id=”fname” class=”text” name=”fname” size=”20″ type=”text”>
                    <br>
                    <br>
                    <label for=”lname”>Client Last Name:</label>
                    <input id=”lname” class=”text” name=”lname” size=”20″ type=”text”>
                    <br>
                    <br>
                    <button class=”button positive”> Add Client </button>
                </fieldset>
            </form>
        <div class=”success” style=”display: none;”>Client has been added.</div>
        </div>
      
        <div id=”loader” align=”left”></div>

    </body>
</html>