使用ajax，jquery和php将引导输入数据添加到mysql

Question

Here I have a bootstrap modal window:

<!-- 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 type="button" id="newData" class="btn btn-primary">Add new data</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

I want to ADD this data from input fields to mysql database with column: name,gender,age,donuts eaten

So I write ajax jquery code:

<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($("#message-content").val()!="") {
        $.ajax({
            url: "messages.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);    
            },  
        });
    } else {
        //notify the user they need to enter data
    }
});
</script>

now I was try to write a php file but i'm beginer to this show I only know how to connect so I write:

<?php

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

mysql_select_db('gmaestro_agro', $con); 

//WHAT I NEED TO WRITE HERE TO ADD DATA TO MYSQL

?>

I have a demo of all this: http://agrotime.roadvoyage.com/index1.html, so click on add new button to get modal window...

Please help me with that

sorry for my english its bad but i'm learning hard

Answer 1

As simple as you have to write a query:

$con = mysql_connect(...);
if($con != false) {
    mysql_select_db('gmaestro_agro', $con);
    $query = "INSERT INTO `table` (`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!";
    }
}

I assume by the way that you know the name of your 'table' and your 'columns' in your mysql db and can fix them on your own. All the data in your AJAX Request appear in PHP's POST array.