使用onChange提交表单，ajax，php和Mysql.Dropdown列表的值不会发送到php提交页面

Question

I have a form which has a drop down list for countries.

If the user chooses one of the countries (onchange), a new drop down list for cities appears displaying only the cities of this specific country.

<select name = \"countries\" id=\"ListOfCountries\" onchange=\"showCities(this.value)\">

I have implemented that by using php, mysql and ajax.

The tutorial i have studied and followed is in the following link:

http://www.w3schools.com/php/php_ajax_database.asp

The drop down list for cities is displayed automatically on the web page without loading the page again.

When the cities box appears, if i do Ctrl-U in order to see the source code of the page, the html code for the drop down list of cities is not in the source code page.

My problem is that when i submit the form, the value of the cities' drop down list is NOT sent to the submit.php file

index.php

 <form action="submit.php" name="my_form" method="post">

submit.php

 echo $_POST['cities'];

The $_POST['cities']; is blank.

That means that in the submit page NO value for cities' drop down list was sent.

What am i supposed to do in order to fix that?

Thanks, in advance

Answer 1

Add a client side and server side validator . For example on client side if no cities are selected disable submit button . And on server side if isset($_POST['cities']) is false then don't execute any query simply redirect user to same page with error message "Please select cities"

Answer 2

It seems like you are not updating the DOM correcly, so the cities parameter is not avaible when you submit the form. If you use jQuery, use jQuery.after() or any similar function to update the DOM. If not you'll have to create a node with the select and add it into the form.