Using ajax to submit a form to update database

Question

Trying to pass a single hidden data to update my sql using ajax. But it is not working and no error message too.

Html

<form id="hidden_form">
<input type="hidden" id="id_hidden" name="id_hidden">
<input type="submit" value="Accept">
</form>

ajax

$("#hidden_form").submit(function(){
    $.ajax({
        type: "GET",
        url: "milestoneAccept.php",
        data: $("#hidden_form").serialize(), // serializes the form's elements.
        success: function(data){

            $("#add_success").html(data);
            $("#add_err").html("");

        }
    });

});

php

$id = $_GET['id_hidden'];

$sql = "UPDATE projectmilestone SET accepted=1 WHERE ID='$id'";

if (mysqli_query($con,$sql)){
    echo "Project Accepted";
} else {
    echo mysqli_error();
}
?>

**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Aug 01 '14 at 08:26
Use developer tools to find out if any data is sent through ajax request, and also echo out the $id to see if you receive any data — Alen, Aug 01 '14 at 08:28
success indicates that the ajax request was successful. It does not indicate if what you wanted to do was successful on the server or not. You must return something more meaningful from the server and then check the data to determine if you should display success or display an error. — Varun Nath, Aug 01 '14 at 08:28

score 2 · Accepted Answer · answered Aug 01 '14 at 08:29

You aren't preventing the default behaviour of the submit event so, before the Ajax request is sent, the form is submitting and the page is reloaded.

// Capture the event object argument
$("#hidden_form").submit(function(evt){
  $.ajax({…});
  // Prevent the default behaviour
  evt.preventDefault();

pomeh · Answer 2 · 2014-08-01T08:42:35.450

I suggest you to try this: create a correct form tag (with action and method) and don't hard code that in the JS

Html

<form id="hidden_form" method="GET" action="milestoneAccept.php">
    <input type="hidden" id="id_hidden" name="id_hidden">
    <input type="submit" value="Accept">
</form>

JavaScript

$("#hidden_form").on('submit', function onSubmitForm(ev){

    var $form = $(this);

    $.ajax({
        // retrieve automatically values from the form itself, don't hardcode them in JavaScript
        type: $form.attr('method')
        url: $form.attr('action'),
        data: $form.serializeArray(),
        success: function(data){
            // use this to see what result you get in your console
            console.log(data);

            $("#add_success").html(data);
            $("#add_err").html("");
        }
    });

    // don't let the browser submit the form itself
    ev.preventDefault();

});

Also, be sure your JavaScript code gets executed after the form is present in the page. Try this if you're not sure (right before you're xxx.submit(function(){ xxx }) line):

console.log( $("#hidden_form").length );

If you get 0 then it's not OK. Try to wrap this code with this:

$(document).ready(function onReady(){
    // your code goes here
});

Also, use Firebug or Chrome DevTools and look at the network panel: you should see your request in there, maybe you have a 404 error (page not found) or something else.

score -1 · Answer 3 · answered Aug 01 '14 at 08:36

Try this

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<form id="hidden_form">
<input type="text" id="id_hidden" name="id_hidden">
<input type="button" value="Accept" onclick="saveform()">
</form>
<div id="add_success" >#</div>

AJAX

 <script type="text/javascript">
function saveform() {
    $.ajax({
        type: "GET",
        url: "milestoneAccept.php", 
        data: $("#hidden_form").serialize(), // serializes the form's elements.
        success: function(data){

            $("#add_success").html(data);
            $("#add_err").html("");

        }
    });
} 
</script>

PHP

$id = $_GET['id_hidden'];

$sql = "UPDATE projectmilestone SET accepted=1 WHERE ID='$id'";

if (mysqli_query($con,$sql)){
    echo "Project Accepted";
} else {
    echo mysqli_error();
}

Using ajax to submit a form to update database

3 Answers3