0

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

programmer
  • 4,571
  • 13
  • 49
  • 59
  • If you add `select` element for "cities" using Ajax, it is added to the page dynamically. Hence you won't see it in the source code, only in debugger. [W3Fools](http://w3fools.com). – VisioN May 13 '12 at 13:33

2 Answers2

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"

Mr Coder
  • 8,169
  • 5
  • 45
  • 74
  • In my tests the user always chooses one of the cities. My problem is that the ($_POST['cities']) is always blank with no value. What am i supposed to do with that?Thanks – programmer May 13 '12 at 13:48
  • Also, i use echo in order to display to the browser the drop down list for cities.It seems that the
    does not realise that a new input/drop down list is created and that's why in the submit page, $city is blank.
     – programmer May 13 '12 at 13:55
  • 1
    that tutorial looks old and outdated , try this instead http://www.erichynds.com/jquery/jquery-related-dependent-selects-plugin/ – Mr Coder May 13 '12 at 14:01
  • It's a bit hard for me to understand the tutorial cause i'm using ajax in order to connect to the database and not jquery. – programmer May 13 '12 at 14:07
  • 1
    you can use ajax with jquery which is much more simpler . – Mr Coder May 13 '12 at 14:35
1

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.

Ander2
  • 5,569
  • 2
  • 23
  • 42
  • I'm following the tutorial in the url link i have already written in my first post. So, i'm not using jquery but a javascript function that calls a php file, selects from the database the cities and prints the drop down list with the cities to the browser by using "echo" – programmer May 13 '12 at 13:50
  • When you say that i have to "add a node", what does this mean? – programmer May 13 '12 at 13:52
  • 1
    That "echo" is the problem. It will update your screen and you'll see the select, but the DOM is not updated, so the select doesn't exist. I'll find an example and post it. – Ander2 May 13 '12 at 13:56
  • 1
    Here you have: http://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro – Ander2 May 13 '12 at 13:57
  • 1
    Here is better explained what I mean when I say to add a node: https://developer.mozilla.org/en/DOM/document.createElement Did you understand the problem? – Ander2 May 13 '12 at 14:06
  • Thanks, yes i understood where the problem is and i;m trying to figure out how i'm going to combine the code in the url you've sent me with the actual code i've made. – programmer May 13 '12 at 14:10
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/11195/discussion-between-ander2-and-programmer) – Ander2 May 13 '12 at 14:12