Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    663
    Thanks
    5
    Thanked 14 Times in 14 Posts

    Post Form to MySql Database

    I know how to take a form, and have php process the POST variables and add the information to a database. And I'm doing all sorts of google searches on ajax, but haven't found a sample or tutorial to learn from, and I'm pretty clueless with javascript.

    Is iy possible to use javascript/ajax to submit a form, and have this infromation added to a database? Does anyone have any sample code or a know of a good tutorial to look at?

    Thanks
    PT

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    It's pretty easy with jQuery.

    For example, with a form like this:
    Code:
    <form id="fmExample">
        Text: <input type="text" id="txtText" name="txtText" value="">
        Check: <input type="checkbox" id="chkCheck" name="chkCheck" value="1">
        <select id="selSelect" name="selSelect">
            <option value="0"> - Select - </option>
            <option value="1">Dogs</option>
            <option value="2">Cats</option>
        </select>
        <input type="submit" value="Submit">
    </form>
    You could post it via ajax to your server-side processing page with something like:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#fmExample').submit(function(){
            var objForm = $(this);
            var form_values = objForm.serializeArray();
            $.post('response.php', form_values, function(response){
                $('<p>'+ response +'</p>').insertAfter(objForm);
            });
            return false;
        });
    });
    </script>
    Or for an even easier ride, and one that'll deal with stuff like file uploads, you could look at the jquery form plugin.

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    27
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hay you can use this code also this is very simple..

    this is your formfile.html with ajax .

    Code:
    
    <html>
    <head><title> Store data with the help of ajax </title>
    
    <script type="text/javascript">
    
    
    
     function store()
     {
    
    
      document.getElementById("message").innerHTML = "Please Wait....";
    
    
      if(window.XMLHttpRequest)
      {
    
       xmlhttp = new XMLHttpRequest();
      }
      else
      {
     
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
    
      xmlhttp.onreadystatechange=function()
      {
    
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
    
          document.getElementById("message").innerHTML = xmlhttp.responseText;
    
        }
    
      }
    
    
      var name = document.form1.yourname.value;
      var age = document.form1.yourage.value;
    
    
      xmlhttp.open("GET","mydatabase.php?name=" + name + "&age=" + age, true);
      xmlhttp.send();
    
    }
    
    </script>
    
    
    </head>
    
    <body>
    
    <form name="form1">
    
     <table cellpadding="3px" cellspacing="2px" align="center">
     <tr>
     <td> <t style="font-size:14px; color:gray; font-family:verdana"> Enter your name </t> </td>
     </tr>
     <tr>
     <td> <input type="text" name="yourname" size="35" > </td>
     </tr>
     <tr>
     <td> <t style="font-size:14px; color:gray; font-family:verdana"> Enter your Age </t> </td> 
     </tr>
     <tr>
     <td> <input type="text" name="yourage" size="35" > </td>
     </tr>
     <tr>
     <td> <input type="button" name="send" value="Store Data" onclick="store()" > </td>
     </tr>
     <tr>
     <td> <div id="message" style="font-size:14px; color:orange; font-family:verdana"> </div> </td>
     </tr>
     </table>
    
    </form>
    
    
    
    </body>
    </html>
    and this is your mydatabase.php file..

    Code:
    
    <?php
    
    
     $name = $_GET['name'];
     $age = $_GET['age'];
    
    
     $connection = mysql_connect("localhost","root","admin") or die(mysql_error());
    
     mysql_select_db("test") or die(mysql_error());
    
     $query = "INSERT INTO mytable VALUES('$name','$age')";
    
     $result = mysql_query($query);
    
     echo "Data has been Stored in your database";
    
    ?>
    have a nice day..

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thank u mr. ashishchaudhary

    thank u mr. ashishchaudhary. it is working. but i need something...
    as your code, if i submit data it stores the database successfully. but in the data submission page, the data which i m trying to submit is remaining.



    I need it blank after successful submission.

    Thank u again.

    Fahim Ahmed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •