CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
MikiMrki
MikiMrki

Reputation: 195

Jquery ajax add to mysql database

I want to save data from input fields to mysql database so first I create a modal window and input fields:

<!-- Button trigger modal -->
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">
Add new</button>
<div id="output"></div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add new row</h4>
         </div>
         <div class="modal-body">
            ......
            <div class="input-group">
               <span class="input-group-addon">Ime</span>
               <input type="text" id="Ime" class="form-control" placeholder="Upisi ime">
            </div>
            </br>
            <div class="input-group">
               <span class="input-group-addon">Pol</span>
               <input type="text" id="pol" class="form-control" placeholder="Pol (male/female)">
            </div>
            </br>
            <div class="input-group">
               <span class="input-group-addon">Godine</span>
               <input type="text" id="godine" class="form-control" placeholder="Godine starosti">
            </div>
            </br>
            <div class="input-group">
               <span class="input-group-addon">Broj pojedenih krofni</span>
               <input type="text" id="krofne" class="form-control" placeholder="Pojedene krofne">
            </div>
            </br>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button id="newData" class="btn btn-primary">Add new data</button>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Now I write jQuery AJAX code to add data to database:

 <script>
  //add data to database using jquery ajax
$("#newData").click(function() {
    //in here we can do the ajax after validating the field isn't empty.
    if($("#ime").val()!="") {
        $.ajax({
            url: "add.php",
            type: "POST",
            async: true, 
            data: { Name:$("#ime").val(), Gender:$("#pol").val(), Age:$("#godine").val(), Donuts_eaten:$("#krofne").val()}, //your form data to post goes here as a json object
            dataType: "html",

            success: function(data) {
                $('#output').html(data); 
                drawVisualization();   
            },  
        });
    } else {
        //notify the user they need to enter data
    }
});
</script>

and finally I create a php file (add.php)

<?php

$con = mysql_connect('localhost', 'gmaestro_agro', 'pass') or die('Error connecting to server');

mysql_select_db('gmaestro_agro', $con); 

    mysql_select_db('gmaestro_agro', $con);
    $query = "INSERT INTO `stat` (`Name`, `Gender`, `Age`, `Donuts eaten`) VALUES (";
    $query .= mysql_real_escape_string($_POST['Name']) . ", ";
    $query .= mysql_real_escape_string($_POST['Gender']) . ", ";
    $query .= mysql_real_escape_string($_POST['Age']) . ", ";
    $query .= mysql_real_escape_string($_POST['Donuts_eaten']);
    $query .= ")";
    $result = mysql_query($query);
    if($result != false) {
        echo "success!";
    } else {
        echo "an error occured saving your data!";
    }

?>

Now, when I try to add data I just get this error: an error occurred saving your data!.

What is the problem here exactly? I try to find the error whole day...

Upvotes: 1

Views: 1830

Answers (2)

Anubhav
Anubhav

Reputation: 1625

      $query = "INSERT INTO `stat` (`Name`, `Gender`, `Age`, `Donuts eaten`) VALUES (";
      $query .= "'".mysql_real_escape_string($_POST['Name']) . "', ";
      $query .= "'".mysql_real_escape_string($_POST['Gender']) . "', ";
      $query .= "'".mysql_real_escape_string($_POST['Age']) . "', ";
      $query .= "'".mysql_real_escape_string($_POST['Donuts_eaten']);
      $query .= "')";

Put all the values in single quotes.

Upvotes: 1

jeroen
jeroen

Reputation: 91734

You are not quoting your strings:

$query .= mysql_real_escape_string($_POST['Name']) . ", ";

should be:

$query .= "'" . mysql_real_escape_string($_POST['Name']) . "', ";

(for all string values)

By the way, it would probably make your life easier if you switched to PDO or mysqli and prepared statements. Then you would not have to escape and quote your variables and the mysql_* functions are deprecated anyway.

Upvotes: 4

Related Questions