Loading...

Insert Data Into MySQL Database using jQuery + AJAX + PHP

Insert Data Into MySQL Database using jQuery + AJAX + PHP
http://technotip.com/2208/insert-data-into-mysql-jquery-ajax-php/

Insert Data Into Database Without Refreshing Webpage..

Video tutorial illustrates insertion of data into MySQL database using jQuery and PHP, using AJAX method i.e., $.post() method


jQuery Video Tutorial List:
http://technotip.com/2514/jquery-tutorial-list/

RRelated Posts

What is JSON ?

Learn Spring Boot : https://goo.gl/5Wgsk6 Restful Web Services Tutorial : https://goo.gl/3mosnz Servlet and JSP complete playlist : https://goo.gl/JXo6BB JavaScript Object Notation or JSON is an

CComments

  • I was born
    So, who is shweta huh?
  • Alexis Gacasan
    what does this line do? "$("myForm").submit( function() {
    return false;
    });
  • tictac Guys
    $(document).ready(function(){
    $("#submit").click(function(e){
    var name = $("#name1").val();
    var np = $("#people1").val();
    var dt= $("#timenddate1").val();
    var msg = $("#msg1").val();

    if(name ==''|| np=='' || dt=='' || msg==''){
    alert("Some fields are blank");
    }
    else{

    // Returns successful data submission message when the entered information is stored in database.
    $.post("info.php",{
    name:name,
    Nopeople: np,
    DandT: dt,
    message: msg
    },
    function(data) {
    alert(data);
    $('#form2')[0].reset(); //To reset form fields after submission




    });

    e.preventDefault();
    }

    });

    });
    this code is working ...but in the database empty values
  • tictac Guys
    thank you my friend ..but the first way is working with redirection ...ajax is not working
  • Sahil Vig
    Thank you so much brother!
  • Siva Anand
    your way is very easy to understand ............
  • Siva Anand
    Thank you sir ... . . . .
  • Nsubili Mwaipopo
    I fail on connecting
  • Rakhi Singh
    Thank u for this video ..........your way is very easy to understand ............
  • Pentem
    No matter what I try the page gets redirected
  • Imran Rafique
    this vedio is good one and gr8. Plz tell me email address need some help.
  • uthej ks
    Thanks a lot :-)
  • Jojo jaja
    Fatal error: Uncaught Error: Call to undefined function mysql_connect() in C:\xampp\htdocs\simple\db.php:2 Stack trace: #0 C:\xampp\htdocs\simple\userInfo.php(2): include_once() #1 {main} thrown in C:\xampp\htdocs\simple\db.php on line 2
  • Dmitrii Zapolskikh
    Everything works. Thanks!.
  • Matthew McFarland
    nice video. It took a little while to get going, but really nice demonstration. Thanks for sharing. Matt, California.
  • Dominik Gaida
    thanks man, this helped a lot.
    hint for today (january 2018): output complains about: mysql_query is deprecated.
    I made some changes and it worked for me.
    the connection to db:
    $conn = new mysqli('localhost', 'root', 'your_pw', 'your_database');

    and the insert query:
    $conn->query("INSERT INTO table_name VALUES('whatever', 'values', 'you', 'got')");
  • Magat Jonathan
    Can i use this to make a chat system? I'm trying to make a chat without using interval to refresh a specific part of the page..
  • Mubashar Hussain
    thank thank thank and thank you solve my greate problem i dooo thissssssssssssssssssssssss
  • mhouser1978
    Don't know if anyone else will see this, seeing as this is the highest viewed content for the search terms "database" and "ajax". Decided to provide how I finally got this to work. I used XAMPP server and got this to work on Chome 61. This post helped me alot, https://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax


    [***index.html***]
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
    <form id="myForm" action="userInfo.php" method="post">
    <div>
    <label class="title">Name: </label>
    <input type="text" id="name" name="name" >
    </div>
    <div>
    <label class="title">Age: </label>
    <input type="text" id="age" name="age" >
    </div>
    <div>
    <input type="submit" id="sub" name="submitButton" value="Submit">
    </div>
    </form>

    <span id="result"></span>

    <script type='text/javascript'>
    /* attach a submit handler to the form */
    $("#myForm").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault();

    /* get the action attribute from the <form action=""> element */
    var $form = $( this ),
    url = $form.attr( 'action' );

    /* Send the data using post with element id name and name2*/
    var posting = $.post( url, { name: $('#name').val(), age: $('#age').val() } );

    /* Alerts the results */
    posting.done(function( data ) {
    $("#result").html(data);
    });
    });
    </script>

    </body>
    </html>


    [***db.php***]
    <?php
    define('HOST','localhost');
    define('USERNAME', 'test');
    define('PASSWORD','test');
    define('DB','test');

    $con = mysqli_connect(HOST,USERNAME,PASSWORD,DB);
    ?>


    [***userInfo.php***]
    <?php
    include_once('db.php');

    $name = $_POST['name'];
    $age = $_POST['age'];

    $sql = "INSERT INTO user (FirstName, Age) VALUES ('".$name."', '".$age."')";

    if(mysqli_query($con, $sql))
    {
    echo "Record Saved";
    }
    else
    {
    echo "Error: ".mysqli_error($con);
    }
    mysqli_close($con);
    ?>
  • Abu Bakr
    Спасибо
  • ManuAlvarado22
    Thank you so much! This helped me a lot to understand .get/.post and .ajax.
  • Vaibhav Srivastav
    Hi Satish Sir,
    I have created a dynamic table by using JQuery and HTML now I want to fetch the data from each row of dynamic table but the dynamic table is created all row with the same name so How to fetch the value in php file?
  • Amit Gupta
    Are bhaiya isse achha hai ki tum hindi me hi video bana dete to kya ho jata ...
  • Ja Ja
    Can you refresh it? (mysql_ = mysqli_) pls
  • berrada mido
    thks you bro for this video is simple , undestandeble and I invite you to come in morroco
  • Programmer Arnab
    lol... you forget to insert the action="" attribute elements and all of a sudden you php code corrected itself :p common.. you have to insert that second page name in action attribute in form tag
  • H D
    I did it exactly like you, but it still redirects once submit button is hit.
  • Avg Karthik
    ne yabba sariga explain chey work avadam ledu alert($("#myform").attr(''action"))); undefind vastundi
  • Susmitha R
    thanks bro
  • javar ruedas
    imba
  • Fernanda Estrada
    Thank you very much Satish. Excelent Tutorial
  • pritam Saha
    oh , u solved my problem. thank you .
  • satlib wanzai
    Thank you for your video. Please explain function(info). Why did you choose the name 'info'? Can we use any other name, or did you choose 'info' because it is a system global variable? Thanks:)
  • Nakul Sarkar
    i do exactly same......blank data stored in database...................Why?
  • Lucky c
    learn php databa
  • Ravi Chandra
    simple and understandable. TQ :)
  • Kali 33
    wow! i love you
  • alvin cornito
    Thanks Satish!! XD
  • Akbar Yuldoshev
    The problem is that I did everything similar and code is inserting data but it is inserting empty fields.
  • Akbar Yuldoshev
    Quick question if I put all together into one file how I pass php to form? what I should put in action field?
  • El Dios
    Хорошее видео! Индус всё показал и разжевал xD
  • ROSHAN JHA
    help me out
  • ROSHAN JHA
    page is getting redirected
  • YASIR Malik
    i am having problem that when i submit first time its working fine but 2nd time its not submit data into database
  • Philipe De Campos
    This video is very good :) , a strong hug from Brazil...
  • Colombia Cuber
    where is the ajax code??
  • Ý Nguyễn
    Thank you for useful knowledge
  • Joe Kennedy
    he does this really quickly, but you can see there isn’t much html - he’s just utilizing an html webpage that references a couple of PHP files and a js file. he writes to the db through what looks like he’s preventing sql injection methods but it’s all so compact. i think i’m gonna try to set something up like this. I’m be very curious to understand if there are security protocols that are missing from this. i mean it’s missing the SSL which would be necessary for our application, but i’m still not clear on how all of that ties together.
  • m mas.
    god damn it... every one of this video about PHP is from some random indian guy on youtube.
    not to be an ass, but that indian accent won't let me concentrate on your videos. If I would give you a tutorial with my broken lame ass persian accent, you would feel like punching me too!
  • Ali Aslam
    Should be updated :
    var data=$("#myForm").serializeArray();