Skip to main content
search
0

How to insert in Mysql with Jquery Ajax with validation?

By November 2, 2011Jquery
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>

Leave a Reply

7 + 2 =

Open chat
💬 Need help?
Hello 👋
We are expert at building website and digital properties. Do you have an idea that you want to bring to life. Let us know and we will build it for you.