Hello Everybody,
Trying to get the drop down list box to display newly added information.
As of now(works)
- Initial page load the drop down list box is populated with a list of cars from the database, and this works.
- I also have a text box and a submit button below the drop down menu to add a new vehicle and this works as it does save the new vehicle to the database.
not working
After submitting the newly added vehicle, the vehicle doesnt appear in the drop down list box unless i refresh the page.
What i want:
when a new vehicle is added i like it to automatically appear in the drop down list box without having to refresh the page.
<form METHOD="POST" action="" id="formtestID">
<!-- load dropdown listform -->
<select name="country" >
<option value="">Select a car</option>
<?php
foreach(carList($dbcon) as $value1)
{ echo '<option value="'. $value1['test_index'] . '">' . $value1["test_car"]. '</option>';}
?>
</select>
<!-- on click save and reload drop-down -->
<br><br>
Add new car: <Br>
<input type="text" name="newcar" id="newcarID">
<br><br>
<button type="submit" name="btn_addCar" id="btn_addCarID">Submit</button>
<span class='success'>Successful</span>
<span class='error'>Error</span>
</form>
javascript
$(function() {
$("#btn_addCarID").click(function(e) {
e.preventDefault();
var newcar = $("#newcarID").val();
var dataString = 'newcar=' + newcar;
if(newcar =='')
{ $('.success').fadeOut(200).hide();
$('.error').fadeIn(200).show();
}
else
{
$.ajax({
type: "POST",
url: "addnewcar.php",
data: dataString,
success: function(){
$('#form').fadeOut(200).hide();
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});