How to post data to database in Jquery

Question

Currently I have this jquery that helps me to get data from my database which only display the different types of option when this department is selected. But now I want to post this data to database again. is there any solution available? Here's my code:

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#cat").change(function() {
                $.ajax({
                    type: "GET",
                    url: "getPositionTitle.php",
                    data: "category_id=" + $(this).find(":selected").val(),
                    cache: false,
                    success: function(msg){
                        $("#position_title").empty();
                        my_position_title_array = $.parseJSON(msg);
                        for (i = 0; i < my_position_title_array.length; i ++) {
                            $("#position_title").append('<option value="' + my_position_title_array[i].id + '">' 
                                + my_position_title_array[i].position_title + '</option>');
                        }
                        $("#position_title").trigger('change');
                    }
                });
            });
            $("#cat").trigger('change');
        });   
    </script>


<form id="offeredjob" method="post" action="doOfferedJob.php">

<tr>
     <td><label for="applied_department">Department:</label></td>
     <td>
         <select id="cat" name ="applied_department" applied_position_title="category">
          <?php
                $query = "SELECT id, department FROM department";
                $result = mysqli_query($link, $query) or die(mysqli_error());
                    while ($row = mysqli_fetch_assoc($result)) {
                      echo "<option value ='" . $row['id'] . "'>" . $row['department'] . "</option>";
                            }
                            ?>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td><label for = "applied_position_title">Position Title:</label></td>
                    <td>
                        <select id="position_title" applied_position_title="applied_position_title">
                            <option value="1"></option>
                        </select>
                    </td>
                </tr>

And this is how I post to my database:

$query = "UPDATE job_application SET applied_department = '$applied_department', applied_position_title = '$applied_position_title' WHERE id = '$id'";

$result = mysqli_query($link, $query) or die(mysqli_error($link));

Looks like you're pretty close. Please check out this post for a working example http://stackoverflow.com/a/20150474/2191572 — MonkeyZeus, Dec 20 '13 at 17:12
You are only sending the `applied_department` value to your php script but there you are using 3 variables in your sql statement. Where is the rest supposed to come from? — jeroen, Dec 20 '13 at 17:16
On a side note, the provided code is possible vulnerable to SQL injections. You might want to consider that also. — JanC, Dec 20 '13 at 18:15

score 0 · Accepted Answer · answered Dec 20 '13 at 17:25

Add something like this to your JQuery.

// Post data to postPositionData.php when user changes form
$("#offeredjob").change(function() {
    // Serialize form data
    var yourFormData = $(this).serialize();
    // POST
    $.ajax({
        type: "POST",
        url: "postPositionData.php",
        data: yourFormData,
        success: function(msg){
            // do something
        }
    });
});

File postPositionData.php would then do the database insert/update.

How to post data to database in Jquery

1 Answers1