Updating database with AJAX

Question

So I have a database of vehicles and I made a form where a user can update the information of vehicles and then confirming if he/she wants to save the changes. Problem is I feel like I am still not understanding how AJAX works and here's what Iv done so far.

This is the form the users use to edit a vehicles information.

<html>
<body>
<table align = 'center' cellspacing='2'>
    <tr>
        <th> Enter Vehicle Information </th>
    </tr>

    <form enctype = 'multipart/form-data' method = 'post' action = '' >
    <?php
  if($v = $Vehicle->fetch())
  {
  ?>
  <input type = "hidden" id='vID' value = '<?php echo $v['Vehicle_N'];?>'/>

  <img src = "Vehicles/<?php echo $v['Image']?>"  height = 100 width = 100 > </img>
    <tr>
        <td>Vehicle Manufacturer
      <select id = "Manufacturer" value = '<?php echo $v['Manufacturer'];?>'>
        <?php
                foreach($Manu as $m)
        {?>
          <option value = '<?php echo $m['Manufacturer'] ?>'> <?php echo $m['Manufacturer'] ?></option>
        <?php
        }
        ?>
                <option> <a href='test.php'> + Add New</a></option>
            </select>
    </td>
    </tr>

    <tr>
        <td>Vehicle Model <input id = "Model" value = '<?php echo $v['Model'];?>'/> </td>
    </tr>

    <tr>
        <td> Model Year <input type = 'number' id = "modelYear" min='1990' max='2020' value = '<?php echo $v['Model_Year'];?>'/> </td>
    </tr>

    <tr>
        <td> State of Vehicle <input id = "State" value = '<?php echo $v['State'];?>'/> </td>
    </tr>

    <tr>
        <td> Color <input id = "Color" value = '<?php echo $v['Color'];?>'/> </td>
    </tr>

    <tr>
        <td>
            Vehicle Type
            <select id = "Type" value = '<?php echo $v['Type'];?>'>
        <?php
                foreach($vehicleTypes as $vt)
        {?>
          <option value = '<?php echo $vt ?>'> <?php echo $vt ?></option>
        <?php
        }
        ?>
            </select>
        </td>
    </tr>

  <tr>
        <td> License plate No. (If there is one) <input type = 'number' id = "licensePlate" value = '<?php echo $v['License_Plate_N'];?>' /> </td>
    </tr>

  <tr>
        <td> Sale Price <input type = 'number' id = "salePrice" value = '<?php echo $v['Sale_Price'];?>'/> </td>
    </tr>

  <tr>
        <td> Rent Price <input type = 'number' id = "rentPrice" value = '<?php echo $v['Rent_Price'];?>'/> </td>
    </tr>

  <tr>
        <td> Stock <input type = 'number' id = "Stock" value = '<?php echo $v['Stock'];?>' /> </td>
    </tr>


  <tr>
        <td><p>Vehicle Description<textarea  id="Description"  rows="2"  cols="18" > <?php echo $v['Description'];?> </textarea></p> </td>
    </tr>

    <tr>
        <td>Vehicle Image <input id = "i" type = 'file'  /> </td>
    </tr>

    <tr>
        <td> <a href = '#' data-role = "update" data-id = "<?php echo $v['Vehicle_N'];?>" Onclick="confirm_edit()"> Update </a> </td>
    </tr>
<?php
}
 ?>
</form>
</table>

<script>

function confirm_edit(){
    if(confirm("Save changes?") === true){
        var vehicleID = document.getElementById("vID");
        var Manufacturer = document.getElementById("Manufacturer");
        var Model = document.getElementById("Model");
        var modelYear = document.getElementById("modelYear");
        var State = document.getElementById("State");
        var Color = document.getElementById("Color");
        var Type = document.getElementById("Type");
        var salePrice = document.getElementById("salePrice");
        var rentPrice = document.getElementById("rentPrice");
        var Stock = document.getElementById("Stock");
        var i = document.getElementById("i");
        var Description = document.getElementById("Description");

        $.ajax({
          url: 'ajax.php',
          method: 'post',
          data: {vehicleID : vehicleID, Manufacturer : Manufacturer},
          success: function(response){
            console.log(response);
          }
        });
    }else{
        return false;
   }
}
</script>

This is just some code I wrote to test if it is working before I try updating the table in my database, but it is not printing the variable so I am assuming it is not working.

<?php
extract($_POST);


if(isset($Manufacturer))
{
  echo $Manufacturer;
}
?>

If someone can show me my mistakes because I am still having trouble with AJAX because I am new to it. I want the user to confirm if he/she wants to save the changes then through AJAX update the table on my database.

Answer 1

You over-complicated your code and therefore it makes it much harder to understand and handle.

First of all, instead of declaring every form input by finding it's ID, you should just user jQuery's built in serialize() function, which will collect all of the form data and make a simpler string to work with.

$.ajax({
    data: $('form').serialize(),
    success: function(data){
        console.log(data);
    }
});

Also, do not use extract on user data (like $_POST or $_GET) since it is extremely insecure way to handle user data. Simply use:

<?php
if(isset($_POST['manufacturer']))
{
    echo $manufacturer;
}
?>

Updating database with AJAX

Question

1 answers

solution1
0 2019-12-14 10:07:56

Updating database with AJAX

Question

1 answers

solution1 0 2019-12-14 10:07:56

solution1
0 2019-12-14 10:07:56