How can i get value from select option using ajax and php

Question

I have 2 select box option, city and district. I use ajax go get district name when I choose on the city. For this process I have succeed but when I click submit I get the error message Undefined index: district ,as this picture you can see result image.

Here is my ajax code:

 $(document).ready(function($) {
    $("#city").change(function() {
        var search_id = $(this).val();
        $.ajax({
            url: "search.php",
            method: "post",
            data: {search_id:search_id},
            success: function(data){
                $("#district").html(data);
            }
        })
    });
});

Here is HTML code:

   

 <form action="" method="post">
    select city:
    <select name="city" id="city">
    	<option value="1">Phnom Penh</option>
    	<option value="2">Kampong Soam</option>
      <option value="3">Siem Reap</option>
    </select>

    select district:
    <select name="distrcit" name="district" id="district">
    	<option>Select District</option>
    </select>

    <input type="submit" name="submit">
    </form>

Here is PHP code:

<?php 
if(isset($_POST['submit'])){
	echo $_POST['city'];
	echo $_POST['district'];
}

 ?>

//ajax request
<?php 
if(isset($_POST['search_id'])){
	$search_id = $database->escape_string($_POST['search_id']);

	if(!empty($search_id)){
		// $output = array();
		$sql = "SELECT * FROM district WHERE ref_id = '$search_id'";
		$districts = District::find_this_query($sql);
		foreach($districts as $district){
			// echo $district->id;
			// echo $district->district_name;
			$output .= "<option value='{$district->id}'>{$district->district_name}</option>";
		}

		echo $output;
	}
	
 }
?>

Nothing with ajax and PHP but you have a problem in HTML with select case, you have "name" twice — Lorenzo Belfanti
– Lorenzo Belfanti, Commented Apr 29, 2016 at 7:47
Why you have got double name=""" parameter in this line: <select name="distrcit" name="district" id="district"> — pes502
– pes502, Commented Apr 29, 2016 at 7:47
oh my god, I really didn't check the name. now it work! Thank you much :) Lorenzo and Pes — So Pheak
– So Pheak, Commented Apr 29, 2016 at 7:53

Dhara Parmar · Accepted Answer · 2016-04-29 07:48:34Z

1

You have set name twice in select box. assign name only once:

so make it:

<select name="district" id="district">
    <option>Select District</option>
</select>

answered Apr 29, 2016 at 7:48

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

So Pheak Over a year ago

Oh dear, it work. I'm so mistake, but anyway thank you. very thank for that :)

Clément Levallois · Accepted Answer · 2016-04-29 08:33:43Z

1

I think this way is not very clean, you may create an ajax request returning values in json format and then append resultats in the select tag using

new Option(text, value);

answered Apr 29, 2016 at 8:33

Clément Levallois

463 bronze badges

Comments

Mayank Awasthi · Accepted Answer · 2016-04-29 08:50:08Z

1

please define name one time only :

<select name="district" id="district">
<option>Select District</option>

answered Apr 29, 2016 at 8:50

Mayank Awasthi

4912 silver badges9 bronze badges

Comments

Gaurav Mahajan · Accepted Answer · 2016-04-29 09:51:56Z

1

In the HTML you have declared name attributes 2 times:

<select name="distrcit" name="district" id="district">

Please replace with:

<select name="district" id="district">

edited Apr 29, 2016 at 9:51

answered Apr 29, 2016 at 7:51

Gaurav Mahajan

2901 silver badge5 bronze badges

Comments

Hoang Cong · Accepted Answer · 2016-11-29 07:37:19Z

0

   

 <form action="" method="post">
    select city:
    <select name="city" id="city">
    	<option value="1">Phnom Penh</option>
    	<option value="2">Kampong Soam</option>
      <option value="3">Siem Reap</option>
    </select>

    select district:
    <select name="distrcit" name="district" id="district">
    	<option>Select District</option>
    </select>

    <input type="submit" name="submit">
    </form>

answered Nov 29, 2016 at 7:37

Hoang Cong

111 bronze badge

1 Comment

AppsWise Over a year ago

Please support your answer with explanation. Apparently code only options are not very useful.

Collectives™ on Stack Overflow

How can i get value from select option using ajax and php

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related