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.
