Repopulate the drop down box without refreshing the page & after db update

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>
						foreach(carList($dbcon) as $value1) 
						{ echo '<option value="'. $value1['test_index'] . '">' . $value1["test_car"]. '</option>';}
			<!-- on click save and reload drop-down -->
			Add new car: <Br>
			<input type="text" name="newcar" id="newcarID">
			<button type="submit" name="btn_addCar" id="btn_addCarID">Submit</button>
				<span class='success'>Successful</span>
                <span class='error'>Error</span>


$(function() {
    $("#btn_addCarID").click(function(e) {
        var newcar = $("#newcarID").val();
		var dataString = 'newcar=' + newcar; 
        if(newcar =='')
        {   $('.success').fadeOut(200).hide();
                type: "POST",				
                url: "addnewcar.php",
				data: dataString,
                success: function(){
        return false;
  1. Your server side code must return the ID of the newly inserted car, so you can use that value in the dropdown box.
  2. Change <select name="country"> to <select name="car" id="car">. I changed the name to car because country doesn’t make sense here, and added the ID because we’ll need that later.
  3. Assuming the code in point 1 will return JSON like {"id": 3} where in this case 3 is the ID of the newly added car, you should alter the success part of your $.ajax to
success: function(data) {
    $('#car').append($('<option>', {
        text: newcar

Hi ScallioXTX,

Thanks for the help, it works.

Question, in your example you opened with the tag but you don’t have one closing. Shouldn’t we not have the closing tag somewhere “”?

No, we’re creating the tag using jQuery. $('<option>'); which will generate <option></option>.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.