Hi People, got a small issue.

I have 3 select boxes, I mean dropdown list

country dropdown list... then a state and then a town...

I'm fetching data from database and loading it in the first dropdown list (country)

On change of country, states get loaded and on change of states, town gets loaded.

All is working fine...

But when I submit this data... I echoed country and its getting displayed in the backend page... but state and town values get vanished.... I want these selected values to get posted in the backend php page.

This is my code:

<?php include('config.php'); 

$sqlcountry= "SELECT DISTINCT country FROM contact";

$resultcountry= mysql_query($sqlcountry);

?>
<html>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
function get_states(country)
{
$.ajax({
type: "POST",
url: "states.php", /* The country id will be sent to this file */
beforeSend: function () {
$("#state").html("<option>Loading ...</option>");
},
data: "country="+country,
success: function(msg){
$("#state").html(msg);
}
});
}

function get_towns(states)
{
$.ajax({
type: "POST",
url: "towns.php", /* The state id will be sent to this file */
beforeSend: function () {
$("#town").html("<option>Loading ...</option>");
},
data: "states="+states,
success: function(msg){
$("#town").html(msg);

}
});
}
</script>

</head>
<body>
<div id="details">
<?php
$num=1;
$sql="SELECT * FROM contact";
$result=mysql_query($sql);
$count=mysql_num_rows($result);
?>


<table>
<form action="filtercat.php" method="post">
<tr>
<td>Country </td>
<td>
<select name="country" onchange="get_states(this.value)">
<option>Select Country</option>
<?php 
while($rowcountry=mysql_fetch_array($resultcountry))
{

?>
<option value="<?php echo $rowcountry['country']; ?>"><?php echo $rowcountry['country']; ?></option>
<?php
}
?>
</select>
</td>

<td>State:</td>
<td id="state">
<select name="state">
<option>Select State</option>
</select>
</td>

<td>City / Town:</td>
<td id="town">
<select name="town" id="townsbox">
<option>Select City / Town</option>
</select>
</td>

<td><input type="image" name="submitcat" src="images/filter.png"></td>

</form>
</tr>
</table>

<!-- /* To display Data in the tabular form */ -->
<?php
$num=1;
$sql="SELECT * FROM contact";
$result=mysql_query($sql);
$count=mysql_num_rows($result);
?>


<table id="rounded-corner">
<form name="form1" method="post" action="delmultipleuser.php">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Skype Id</th>
<th>Phone Number</th>
<th>Address</th>
<th>Category</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="12">Total Users: <?php echo $count; ?></td>
</tr>
</tfoot>
<tbody>
<?php

while($row=mysql_fetch_array($result))
{
?>
<tr class="odd">
<td><input type="checkbox" name="checkbox[]" id="checkbox[]" value=<?php echo $row['contactid']; ?> ></td>
<td><a href="details.php?id=<?php echo $row['contactid']; ?>"><?php echo $row['fullname']; ?></a></td>
<td><?php echo $row['email']; ?></td>
<td><?php echo $row['skype']; ?></td>
<td><?php echo $row['phone']; ?></td>
<td><?php echo $row['address']; ?></td>
<td><?php echo $row['category']; ?></td>

<td><a href="deletesinglerecord.php?id=<?php echo $row['contactid']; ?>" onclick="return confirm('Delete Record ?')"><img src="images/trash.gif"></a></td>

</tr>

<?php
}

if($count==0)
{
?>
<tr>
<td colspan="10" class="norecords">
<p>
No Records Found.
</p>
</td>
</tr>
<?php
}

?>

</tbody>
</table>


</div>
</body>
</html>

The selected values (country, state and town) which I'm trying to echo in filtercat.php....... only country is getting echoed. But state and town values are vanishing.

This is my states.php ....... to fetch states and populate in the main page...

<?php
$country = $_POST['country'];

$sql_state = "SELECT DISTINCT state FROM contact WHERE country = '$country'";
$result_state = mysql_query($sql_state);

?>
<select name="state" id="state" onchange="get_towns(this.value)">
<option>Select States</option>
<?php
while($row_state = mysql_fetch_array($result_state))
{
?>

<option value="<?php echo $row_state['state'];?>" ><?php echo $row_state['state']; ?></option>;
<?php
}

?>
</select>

And this is towns.php to fetch town and populate in the main page...

<?php
include('config.php');
?>

<?php
$states = $_POST['states'];
$sql_town = "SELECT DISTINCT town FROM contact WHERE state = '$states'";
$result_town = mysql_query($sql_town);
?>

<select name="town" id="town">
<option>Select Town</option>
<?php
while($row_town = mysql_fetch_array($result_town))
{
?>

<option value="<?php echo $row_town['town'];?>" ><?php echo $row_town['town']; ?></option>;
<?php
}

?>

</select>

Data is getting populated fine onchange of the respective dropdown list, but any idea how to pass the selected data to the backend page once i click submit ...??

I need those values for writing a further query in the backend page.

Thanx. And sorry for such a lengthy post.

Recommended Answers

All 11 Replies

Member Avatar for LastMitch

@Albert Pinto

The selected values (country, state and town) which I'm trying to echo in filtercat.php....... only country is getting echoed. But state and town values are vanishing.

$sql_state = "SELECT DISTINCT state FROM contact WHERE country = '$country'";

$sql_town = "SELECT DISTINCT town FROM contact WHERE state = '$states'";

I'm not familiar with JQuery. There's something wrong with your query.

You don't need to echo out twice here:

 <option value="<?php echo $row_state['state'];?>" ><?php echo $row_state['state']; ?></option>;

<option value="<?php echo $row_town['town'];?>" ><?php echo $row_town['town']; ?></option>;

You know there's 50 states in the US.

Other countries doesn't have states.

How are you going to gather contact from other countries that doesn't have states?

Other countries have a lot of towns too.

How are you going to gather contact from other countries that have alot of towns?

A dropdown lists shows alot of countries and towns and states. The only way is to input it from UPS or Fedex or DHL.

Thanx for your reply sir, but I just wanna know why I'm not able to post the state and town value which I had selected and submitted. Only country is visible when I echo it in the background.

<?php
$country=$_POST['country'];
$state=$_POST['state'];

$town=$_POST['town'];

echo $country." ".$state." ".$town;


?>

The state and town part never shows up...

States.php and towns.php are 2 different pages for getting the states and town... and then these values are populated in the main page.

In main page its like...

<td>State:</td>
<td id="state">
<select name="state">
<option>Select State</option>
</select>
</td>


<td>City / Town:</td>
<td id="town">
<select name="town" id="townsbox">
<option>Select City / Town</option>
</select>
</td>
Member Avatar for LastMitch

@Albert Pinto

Like I mention before i'm not familiar with Jquery. You are using ajax to get your file.

Try to fetch the data using id

You need to change your query to select the id

$sql_state = "SELECT DISTINCT state FROM contact WHERE country = '$id'";
$sql_town = "SELECT DISTINCT town FROM contact WHERE state = '$id'";

You change the the first $row_state & $row_town as id?

<option value="<?php echo $row_state['id'];?>" ><?php echo $row_state['state']; ?></option>;
<option value="<?php echo $row_town['id'];?>" ><?php echo $row_town['town']; ?></option>;

It's getting late I have to go.

There is no id attribute... I'm fetching data as per name....

The 2 ajax functions in my main page....

<script type="text/javascript">
function get_states(country)
{
    $.ajax({
       type: "POST",
       url: "states.php", /* The country id will be sent to this file */
       beforeSend: function () {
      $("#state").html("<option>Loading ...</option>");
        },
       data: "country="+country,
       success: function(msg){
         $("#state").html(msg);
            //  alert(msg);          return false;        }
       });
}


function get_towns(state)
{
    $.ajax({
       type: "POST",
       url: "towns.php", /* The state id will be sent to this file */
       beforeSend: function () {
      $("#town").html("<option>Loading ...</option>");
        },
       data: "state="+state,
       success: function(msg){
         $("#town").html(msg);       
        //alert(msg);        return false;
       }
       });
}

</script>

I selected USA and did alert the .html(msg)

and it gave me this in the alert box.....

<select name="state" onchange="get_towns(this.value)">

<option>Select States</option>

<option value="CALIFORNIA" >CALIFORNIA</option>
</select>

Now I just wanna know .... why am I not able to post the selected value...

I have given name attribute as state for that select box....

and in the backend php file

<?php
    $country=$_POST['country'];
    $state=$_POST['state'];
    $town=$_POST['town'];
    echo $country." ".$state." ".$town;
?>

That $state is going blank so also $town....

After loading all my values in the dropdown... I right clicked and checked View Source of my main page.... Though the states and towns combo go loaded... in the View Source there were no records...

It was like....

<td>Country </td>

<td>
<select name="country" onchange="get_states(this.value)">
<option>Select Country</option>
<option value="INDIA">INDIA</option>
<option value="U.S.A">U.S.A</option>
</select>
</td>

<td>State:</td>
<td id="state">
<select name="state">
<option>Select State</option>

</select>
</td>

<td>City / Town:</td>
<td id="town">
<select name="town" id="townsbox">
<option>Select City / Town</option>
</select>
</td>

How come its blank in the view source.....?? Its fetching the combo box values from states.php and towns.php

Member Avatar for LastMitch

@Albert Pinto

There is no id attribute... I'm fetching data as per name....

You can fetch the data with the id

That $state is going blank so also $town....

<?php
$country=$_POST['country'];
$state=$_POST['state'];
$town=$_POST['town'];
echo $country." ".$state." ".$town;
?>

That's not how you echo!

Read this it will show you how to echo correctly:

http://php.net/manual/en/function.echo.php

I also notice the issue is also in Ajax too. Look closely it's fetching the file but it's missing a few elements.

Read here:

http://api.jquery.com/jQuery.ajax/

I read through the code you posted, it was messy and I felt dirty and soiled :D
But your question is:

any idea how to pass the selected data to the backend page once i click submit ...??

...and my answer is yes, I have plenty idea, and I will explain it to you.
You need to make sure all your form elements are contained within a form declaration:

<form action="page_that_will_process_form.php" method="post">
<input type="text"... />
<input type="button"... />
</form>

Make sure each input has a unique name.
<input name="unique_name"... />

Then on the page that will process the form:

<?php
//print_r($_POST); die();
if( isset($_POST['unique_name']) ){
    //All of your form elements that had a valid name will be available:
    $form_name = $_POST['text_input_name'];
    $form_comment = $_POST['textarea_comment'];
}
?>

Uncomment //print_r($_POST); die(); this line if you want to see what the $_POST variable contains.
Good luck :D

Thanx Mr adam and LastMitch for your time and consideration.

I guess I failed in mentioning properly my issue.....

There are many fields in my form.... out of those elements... I hav 3 textboxes...

Country.... States and Town

Data gets inserted in the database.

There is ONLY ONE table in the database... its not like I hav different tables with country and countrid... then states and stateid....or towns and townid....

What I want is... there are 3 select boxes(dropdown list) Country.... States and Town..

I'm fetching countries from country column and using DISTINCT keyword in my query so that it fetches only distinct country names.

Then I load all these country names in the first select box. Now onchange of the first select box ... My states get changed... and onchange of my states ... towns get changed.

I used separate php page called states.php to generate states select box. I called this states.php page from my original register.php page through onChange attribute. and from register.php I passed the country id with ajax function..in states.php.. like wise... onchange of states towns get generated. I'm passing states value from ajax (my second ajax function)

Now problem starts when I try to post these selected values to a php page...

Country selectbox was preloaded. So whatever value selected...I can post and is visible in the backend if I echo it..

its like

<select name="country">
....
...
</select>

and in the backend...

$country= $_POST['country'];
echo $country;

But states and towns variable are not visible.

In my ajax function I alerted html(msg) for both states and cities. and I got this..

<select name="states">
<option value="california">california</option>
</select>

But i can't post the value to my backend php page...Its going blank...

Member Avatar for LastMitch

@Albert Pinto

I'm fetching countries from country column and using DISTINCT keyword in my query so that it fetches only distinct country names.

I think I mention to you about your query it's not fetching.

There is ONLY ONE table in the database... its not like I hav different tables with country and countrid... then states and stateid....or towns and townid....

When you ajax a file you don't necessary need a database. Regarding about the id

This is from your code:

url: "states.php", /* The country id will be sent to this file */

url: "towns.php", /* The state id will be sent to this file */

You're the one who mention the id not me!

I read your code and trying to help you and I been very patience with you.

I guess i need to take a differnt approach... This doesn't seem to work.... :(

@LastMitch: Thanx Sir, for all your kind help, if any of my post was offensive, I would like to ask for an apology. It was never intentional.

Thanx for all your help Sir.

Regards.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.