best way to get form input names for dynamic dropdown?

man5 · April 7, 2014

Normally you can get input names from form using $_GET method. However, with a multi level dropdown, the php query files are called externally and through the js code.

So I am wondering, what is the best way to get the input names of each dropdown? For eg. country, state, city. Getting the input name for the country is easy; how would I get it for the state and city if they are in a seperate php files? Do I get the input name in their own files and put them in a session?

Edited April 7, 2014 by man5

man5 · April 7, 2014

I suppose I should be more clear. Here is an example of a form dropdown.

<form action="" method="post" enctype="multipart/form-data >

	<div id="countrydiv">
		<select id="country" name="country" onChange="showRegion(this.value);">
		
			<option value="0">--Select Country--</option>
			
			<?php  
				// query to get the id and name of the country here.
			?>
		</select>
		
	</div>
	
	<div id="regiondiv">
		// this <select> option is in region.php that queries data from mysql table. It is called through js code in the head section of the website.
	</div>
		
	<div id="citydiv">
		// this <select> option is in city.php that queries data from mysql table. It is called through js code in the head section of the website.
	</div>
	<input type="submit" value="submit">
	
</form>

trq · April 7, 2014

I suggest you Google for "Dynamic Ajax Dropdown" or similar. There should be literally thousands of examples.

man5 · April 7, 2014

I'm sorry if I wasn't being clear. I have the dynamic ajax dropdown fully working. I am just having hard to getting data from mysql table using the ajax dropdown.

For eg.

$country   =  $_GET['country'];
$region   =  $_GET['region'];
$city   =  $_GET['city'];


$stmt = $dbh->prepare("SELECT * FROM posts WHERE countryid = $country AND regionid= $region  AND cityid= $city ");

That's how the query looks like for getting the data from db. The only problem with that is, $_GET region and city are not working. The data shows fine if i only use the country, because the country <select> is defined on the same page, while region and city <select> is defined on a sperate php page that is called with the ajax code.

Ch0cu3r · April 7, 2014

That is the wrong use of prepared queries. The variables $country, $region AND $city should be substituted by place holders. Then you use your DB class bind method to bind them to the placeholders

I dont know what DB class you're using but I'll link to PDO and MySQLi documentation for binding values to prepared queries

PDO::bind_param

MySQLi::bind_param

Also if your forms submit method is POST then you should retrive the form values from $_POST not $_GET

Edited April 7, 2014 by Ch0cu3r

man5 · April 7, 2014

I think it's best if I show you my entire process. This should clear things up. I have the binding done in a db class so don't worry about that. Everything works, except fo the last bit where I would like to filter values from the db table based on the location of country,region,city.

Index.php

<html>
<head>  
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        function showRegion(str) {
            var xmlhttp;
            if (str.length==0) {
            document.getElementById("regiondiv").innerHTML="";
            return;
            }
            if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
            }
            else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("regiondiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","showregion.php?country="+str,true);
            xmlhttp.send(null);
        }
        
        function showCity(str) {
            var xmlhttp;
            if (str.length==0) {
            document.getElementById("citydiv").innerHTML="";
            return;
            }
            if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
            }
            else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("citydiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","showcity.php?region="+str,true);
            xmlhttp.send(null);
        }
    </script>
 </head>
<body>
<?php
    if(isset($_GET['submit']) {
    
        $country        =    $_GET['country'];
        $region2        =    $_GET['region'];
        $city2            =    $_GET['city'];
        
    
        
        $results = DB::getInstance()->query("SELECT * FROM posts WHERE countryId = {$country2}  AND regionId = {$region2} AND cityId = {$city2}");
        
        if(!$results) {

            echo 'Could not process!';
            
        } else if(!$results->count()) {
        
             echo 'No results found!';
            
        } else {
        
            foreach($results->results() as $row) {
                
                $date              =     $row->posted;
                $post_id          =     $row->post_id;
                $title             =     $row->title;
            
                echo $date;
                echo $post_id;
                echo $title;
            }
        }
    
    }
 ?>
    <form action="" method="get" enctype="multipart/form-data >
        select id="country" name="country" onChange="showHint(this.value);" required >

            <option value="0">--Select Country--</option>

            <?php  
                $getCountry = DB::getInstance()->query("SELECT * FROM countries");

                if(!$getCountry->count()) {

                    echo 'No Country found!';

                } else {

                    foreach($getCountry->results() as $row) {

                        $country_id     =   $row->countryId;
                        $country_name   =   $row->countryName;

                 ?><option value="<?php echo $country_id; ?>" ><?php echo $country_name; ?></option><?php

                    }
                }
            ?>


        </select>

        <div id="regiondiv">
        </div>
        
        <div id="citydiv">
        </div>
        
        <input type="submit" class="search" value="Search">
    </form>
</body>
</html>

showcity.php

$region_id   =  $_GET['region'];

$select_city = DB::getInstance()->get('cities', array('regionId', '=', $region_id));

if(!$select_city->count()) {

	echo 'No City found!';
	
} else {
	
?>
<select name="city" id="city" ><?php	

	?><option value=0" >---Select City---</option><?php
	
	foreach($select_city->results() as $row) {
	
		$city_id			=	$row->cityId;
		$city_name			=	$row->cityName;

	?><option value="<?php echo $city_id; ?>" ><?php echo $city_name; ?></option><?php

	}
	
?></select><?php		
}

showregion.php

$country_id  =  $_GET['country'];

$select_region = DB::getInstance()->get('regions', array('countryId', '=', $country_id));

if(!$select_region->count()) {

	echo 'No Region found!';
	
} else {

?>
<select name="region" id="region" onChange="showCity(this.value);"><?php	

	?><option value=0" >---Select Province/State---</option><?php
	
	foreach($select_region->results() as $row) {
	
		$region_id			=	 $row->regionId;
		$region_name		=	 $row->regionName;

	?><option value="<?php echo $region_id; ?>" ><?php echo $region_name; ?></option><?php

	}
	
?></select><?php		
}

Edited April 7, 2014 by man5

man5 · April 7, 2014

I have solved this problem. I just needed to play around more withe the structure to come up with the solution.

Sign In

best way to get form input names for dynamic dropdown?

Recommended Posts

man5

Link to comment

Share on other sites

man5

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

man5

Link to comment

Share on other sites

Ch0cu3r

Link to comment

Share on other sites

man5

Link to comment

Share on other sites

man5

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information