CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Anil Shah
Anil Shah

Reputation: 61

How to insert data in MySQL with jQuery and Ajax without page refresing

I have an index.php page that contains a form & an input button, and use this script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    e.preventDefault();
    var name = $("#first_name").val();
    var last_name = $("#last_name").val();
    var city_name = $("#city_name").val();
    var dataString = 'first_name='+name+'&last_name='+last_name+'&city_name='+city_name;
    $.ajax({
        data:dataString,
        url:'index.php',
        success:function(data) {
            alert(data);
        }
    });
});
</script>

FORM

<form method="post" id="reg-form">
    <table align="center">
        <tr>
            <td align="center"><a href="index.php">back to main page</a></td>
        </tr>
        <tr>
            <td><input type="text" name="first_name" id="first_name" placeholder="First Name" required /></td>
        </tr>
        <tr>
            <td><input type="text" name="last_name" id="last_name" placeholder="Last Name" required /></td>
        </tr>
        <tr>
            <td><input type="text" name="city_name" id="city_name" placeholder="City" required /></td>
        </tr>
        <tr>
            <td><input type="submit" name="Update" id="update1" value="SAVE" /></td>
        </tr>
    </table>
</form>

I would like to store the form data into database without refreshing the page when I click the insert button.

Upvotes: 3

Views: 306

Answers (6)

Manwal
Manwal

Reputation: 23816

Use form submit event for handling form submition

$(document).ready(function() {
    $("#reg-form").submit(e) { //submit event occur when you submit your form
        e.preventDefault(); //this will prevent reloading and default form submission 
        var name = $("#first_name").val();
        var last_name = $("#last_name").val();
        var city_name = $("#city_name").val();
        var dataString = 'first_name=' + name + '&last_name=' + last_name + '&city_name=' + city_name;
        $.ajax({
            data: dataString,
            url: 'index.php',
            success: function(data) {
                alert(data);
            }
        });
    }
});

You are sending ajax request on document.ready instead of when form submitted.

Upvotes: 2

Anil Shah
Anil Shah

Reputation: 61

am using this insert Query in index.php

<?php
include_once 'dbconfig.php';
if(isset($_POST['Update'])){
    $fname = $_POST['first_name'];  
    $lname = $_POST['last_name'];
    $cityname = $_POST['city_name'];
    $query1 = mysql_query("INSERT INTO users (first_name,last_name,user_city) VALUES('$fname','$lname','$cityname')");
    if(is_scalar($query1)){
        echo "Insert Sucssesfulyy";die;
    }        
}
?>

Upvotes: 2

Aroniaina
Aroniaina

Reputation: 1252

If you use this PHP code

<?php
include_once 'dbconfig.php';
if(isset($_POST['Update'])){
    $fname = $_POST['first_name'];  
    $lname = $_POST['last_name'];
    $cityname = $_POST['city_name'];
    $query1 = mysql_query("INSERT INTO users (first_name,last_name,user_city) VALUES('$fname','$lname','$cityname')");
    if(is_scalar($query1)){
        echo "Insert Sucssesfully";
    }
    else{
        echo "Insert aborted";
    }
}
?>

And this markup 

<form method="post" id="reg-form">
    <table align="center">
        <tr>
            <td align="center"><a href="index.php">back to main page</a></td>
        </tr>
        <tr>
            <td><input type="text" name="first_name" id="first_name" placeholder="First Name" required /></td>
        </tr>
        <tr>
            <td><input type="text" name="last_name" id="last_name" placeholder="Last Name" required /></td>
        </tr>
        <tr>
            <td><input type="text" name="city_name" id="city_name" placeholder="City" required /></td>
        </tr>
        <tr>
            <td><input type="submit" name="Update" id="update1" value="SAVE" /></td>
        </tr>
    </table>
</form>
<div id="result">

</div>

Then the best way to send data (according to me) is to use Jquery .load() function

The sript result is :

<script type="text/javascript">
    $(document).ready(function() {
        $( "#reg-form" ).submit(function(event){
            event.preventDefault();
            var name = $("#first_name").val();
            var last_name = $("#last_name").val();
            var city_name = $("#city_name").val();
            $( "#result" ).load(
                     //The URL of the action page
                    "index.php",
                     //Datas to sent as an Array [name:value]
                    {Update:true,first_name:name,last_name:last_name,city_name:city_name},
                     //OnComplete function
                    function() {
                        alert( "Datas sent" );
                    }
                );
        });
    });
</script>

Upvotes: 0

Altaf Hussain
Altaf Hussain

Reputation: 5202

You can use jquery as mentioned in answers, but why invent the wheal again? There is a jQuery form plugin which handles the submitting forms. You dont have to write down that long JS code. It is simple, easy to use and provides multiple data formats. Please check it at below link:

http://malsup.com/jquery/form/

Hope that will help you and will make your work easy :) .

Upvotes: 1

Tareq
Tareq

Reputation: 5363

Well, there is alot of missing stuff here but let me tell you what to do generally:

in your index.php:

  1. Check if you get POST request then init the DB save functionality. I would use doctrine or at least PDO to save/update data.

    if($_POST['Update'] == 'SAVE'){ // Do DB work}

  2. On front-end side, do AjAX to that page with type POST. you can use:

    var formData = jQuery('#reg-form').serialize();

and then use it in the Ajax call :

type: 'POST', data:formData,

Hope it helps.

Upvotes: 1

Aroniaina
Aroniaina

Reputation: 1252

To handle form submit, you can use $( "#reg-form" ).submit(function(event)

To prevent loading, use event.preventDefault();

The result is

<script type="text/javascript">
    $(document).ready(function() {
        $( "#reg-form" ).submit(function(event){
            event.preventDefault();
            var name = $("#first_name").val();
            var last_name = $("#last_name").val();
            var city_name = $("#city_name").val();
            var dataString = 'first_name=' + name + '&last_name=' + last_name + '&city_name=' + city_name;
            $.ajax({
                data: dataString,
                url: 'index.php',
                success: function(data) {
                    alert(data);
                }
            });
        });
    });
</script>

Upvotes: 1

Related Questions