CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
christostsang
christostsang

Reputation: 1841

2nd Drop Down selection to be related to the selection on the 1st Drop Down Selection

I want to create a signup form, that its values will be stored in a database (mysql). Because i want the data to be in the correct format (New York instead of NY when asking for City) i am thinking in limiting the options using a drop down list. For example, when a user selects as a Country: UK, the second selection to narrow down to the cities inside UK and remove the rest cities of the world.

Can i do this with only PHP/HTML/MYSQL knowledge? Or do i need to know Javascript/Jquery and more?

Thanks in advance.

Upvotes: 0

Views: 2971

Answers (4)

cssyphus
cssyphus

Reputation: 40068

The best approach is to use jQuery (javascript) to manage the interaction with the server (this process is known as AJAX).

First, jQuery is just a javascript library that makes it TONS easier to use javascript. Here is an interesting article about why jQuery is absolutely necessary. However, the two main reasons to use jQuery are: (1) cross-browser is done for you, and (2) waaaaaay less typing. Here are some great FREE resources for learning jQuery:

theNewBoston.com
phpAcademy.org

Next, when using jQuery, you must first load the jQuery library. After that, you can type jQuery commands instead of javascript and much magic happens much easier. Load the library like this, in your head tags:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

Finally, look here for populating Select #2 based on results from Select #1:

Populate Select2 based on Select1, from MySQL DB

Populate dropdown 2 based on selection in dropdown 1

Upvotes: 1

Awlad Liton
Awlad Liton

Reputation: 9351

You can easily do it by jquery ajax.

First populate dropdown for country like this:

$sql = "select * from country";
$result = //execute your query and fetch array

run a loop through $result and inside loop 

echo "<option value=".$row['id'].">".$row['name']."</option>";

after that you need to call ajax on chaging this dropdown like this:

$("#your_dropdown_id").change(function(){
     $.ajax({
        url: "ajax.php?id="+$(this).val(),
        success: function(data) {
            $("#second_dropdown_id").html(data);
        }
    })
})

I have tried to give you basic idea.

See details : http://www.appelsiini.net/2010/jquery-chained-selects

How to make cascading drop-down lists using mysql and php

Upvotes: 0

Mave
Mave

Reputation: 2516

You can do it with PHP, but not dynamic. People will have to select United Kingdom first, then press submit, and proceed to select a city.

You can, however, do it dynamic. You can use Ajax to do this properly:

The HTML:

<select name="country" id="country" onchange="getCities(this.value)">
 <option>Brazil</option>
 <option>United Kingdom</option>
</select>

<select name="city" id="city">
 <option disabled selected>Please select a country first</option
</select>

The Javascript:

function getCities(str) {
 if (str=="") {
  document.getElementById("city").innerHTML="";
  return;
 } if(window.XMLHttpRequest) {  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 } else {   // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 } xmlhttp.onreadystatechange=function() {
 if(xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("hat").innerHTML=xmlhttp.responseText;
 }
}
 xmlhttp.open("GET","getcities.php?q="+str,true);
 xmlhttp.send();
}

In getcities.php you'd get all the relevant cities, and output them as <option>city_name</option.

Upvotes: 0

awei
awei

Reputation: 1164

You could do it with only PHP/HTML/MYSQL, but, it would impact the user experience as you'd have to do something like this:

1) present form with the country dropdown menu. get user submission and send back to server (via POST, PUT, GET)

2) receive the user input and then present filtered cities in second dropdown menu. now the user can select the city and POST to your server.

Upvotes: 0

Related Questions