Update form fields with AJAX and PHP

Question

I have a form that can be edited by a user. I want the form to update without page reload using Ajax. The new values will replace the old values. For the input fields im reading in the values from a php SQL query. So the user will be able to see there details at first sight. The problem is when this code runs im getting no error and no result. I have tried console.log.

I'm getting the users value from the while loop.

if(isset($_GET['edit_user'])){
    $the_user_id =  $_GET['edit_user'];
    $query = "SELECT * FROM users WHERE user_id = $the_user_id ";
    $select_users_query = mysqli_query($connection,$query);  

    while($row = mysqli_fetch_assoc($select_users_query)) {
        $user_id        = $row['user_id'];
        $user_firstname = $row['first_name'];
        $user_lastname  = $row['last_name'];
        $user_contact = $row['mobile'];


      $_SESSION["id"] = $user_id;
    }  
}

Ajax code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#update').click(function(){
        var user_id =  $("#user_id").val();
        var firstname = $("#firstname").val();
        var lastname = $("#lastname").val();
        var contact = $("#mob").val();
        var dataString = 'firstname='+firstname + 'lastname='+lastname + 'contact='+contact+'user_id='+user_id;

        if(firstname=='' || lastname=='' || contact=='') {
            alert("Please fill all fields");
        } else {
            $.ajax({
                type: "POST",
                url: "update.php",
                data: dataString,
                cache: false,
                success: function(html){
                    alert(html);
                }
            });
        }
        return false;
    });
}); 
</script>

The form I want to be able to edit without page reloading.

<form method="post" name="form">
    <div style="position:relative; left:120px;">
        <p>Title: <select><option value="Mr">Mr</option> <option value="Mrs">Mrs</option><option value="Miss">Miss</option><option value="Ms">Ms</option><option value="Dr">Dr</option></select></p>
        <p>First name *: <input type="text" id="firstname" name="firstname" value="<?php echo $user_firstname; ?>" style="width:50%;"></p>
        <p>Last name *: <input type="text" id="lastname" name="lastname" value="<?php echo $user_lastname; ?>" style="width:50%;"></p>
        <p>Contact telephone number *: <input type="text" id="mob" name="contact" value="<?php echo $user_contact; ?>" style="width:50%;"></p>
                    <p><input type="hidden" id="user_id" name="user_id" value="<?php echo $_SESSION['user_id']; ?>" style="width:50%;"></p>
        <button class="btn btn-primary btn-lg" id="update" name="update" role="navigation" type="submit" style="border-radius:0px;">Save & continue</button>
    </div>
</form>

The update.php

         <?php require_once("includes/db.php"); ?>

             if(isset($_POST['update'])){

              $firstname = mysqli_real_escape_string($_POST['firstname']);
             $lastname =  mysqli_real_escape_string($_POST['lastname']);
             $contact =  mysqli_real_escape_string($_POST['contact']);
             $user_id =  mysqli_real_escape_string($_POST['user_id']);

              $query = "UPDATE users
          SET first_name   ='". $_POST['firstname'] . "',
              last_name ='". $_POST['lastname'] . "',
              mob    ='". $_POST['contact'] . "'

         WHERE
             user_id = '". $_POST['user_id'] . "'";



        $edit_user_query = mysqli_query($connection,$query);



}

[Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)*** Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! [Don't believe it?](http://stackoverflow.com/q/38297105/1011527) — Jay Blanchard, Dec 12 '16 at 16:28
Hi Fred - I got a response from the ajax now. But the update.php query is not working. The confirm() is a function i created in functions.php. Nothing to do with this. Dont worry about that. — steven, Dec 12 '16 at 16:30

hans · Answer 1 · 2016-12-12T18:42:22.013

-1

You don't set the user id. Make sure to send userid in your ajax request or get it based on given data

update-> you need to change you jquery to below

 var dataString = 'firstname='+firstname + '&lastname='+lastname + '&contact='+contact;

I would change the update.php to below code

<?php
require_once("includes/db.php");

//get user_id from session data or from call to db to combine session id with user_id
//this is depending on where you store this data for a currently logged in user
$userid = $_SESSION['user_id'];

if (isset($_POST['firstname'], $_POST['lastname'], $_POST['contact'])) {

$firstname = mysqli_real_escape_string($_POST['firstname']);
$lastname = mysqli_real_escape_string($_POST['lastname']);
$contact = mysqli_real_escape_string($_POST['contact']);

$query = "UPDATE users
SET first_name   ='" . $_POST['firstname'] . "',
last_name ='" . $_POST['lastname'] . "',
mob    ='" . $_POST['contact'] . "'

WHERE
user_id = '" . $userid . "'";


$edit_user_query = mysqli_query($connection, $query);
} 
else {
echo "invalid response";
}

?>

edited Dec 12 '16 at 18:42

answered Dec 12 '16 at 17:09

hans

1
2

hans - can you please modify my code so I can understand? – steven Dec 12 '16 at 17:24
Not from my mobile :) – hans Dec 12 '16 at 17:36
I would suggest to add the user id to your form as an element. You can make it hidden or disabled if you like. Update the javascript to add the userid to the datastring. Change update.php to get user id from postrequest. Consider how you will validate the userinput, perform some errorhandling and avoid for sqlinjection. – hans Dec 12 '16 at 17:42
Hans I have updated my code with your suggestions. Can you please take a look. – steven Dec 12 '16 at 17:48
I have tried everything you have suggested with my modified code. Now the datastring from ajax code is being posted into the firstname field. – steven Dec 12 '16 at 18:03
In that case it can be done a bit easier. You don't have to set the user id for the form and the Jquery. – hans Dec 12 '16 at 18:17
Hans ok no problem. Thank you very much for helping me. Let me know when you have solution. – steven Dec 12 '16 at 18:24
Your Jquery datastring should look like: – hans Dec 12 '16 at 18:32
Hi Hans, my php update query is not updating the database? – steven Dec 12 '16 at 18:38
Sorry hans lol ur code works now. i had to correct ur code you had mob instead of mobile :) Now it works you genius!!!! highly recommend you. – steven Dec 12 '16 at 18:47

Update form fields with AJAX and PHP

1 Answers1