CODEWITHSUNDEEP
javascriptphpjqueryajax
user3235016
user3235016

Reputation: 317

Two dropdown with one onchange

Hi what I'm trying to do is I have 2 dropdown. I want that the ajax will only work if the two dropdown has value selected. And how do I pass the datas of the two? Here is my code right now

SCRIPT

<script>
function getState(val) {
    $.ajax({
    type: "POST",
    url: "get_state.php",
    data:'country_id='+val,
    success: function(data){
        $("#state-list").val(data);
    }
    });
}
</script>

INDEX

<label>Group:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Group</option>
<?php
while($row = mysql_fetch_array($results)) {
?>
<option value="<?php echo $row["g_id"]; ?>"><?php echo $row["g_name"]; ?>    </option>
<?php
}
?>
</select>
<label>Division:</label><br/>
<select name="division" id="div-list" class="demoInputBox"  onChange="getState(this.value);">
<option value="">Select Division</option>
<?php
while($row = mysql_fetch_array($results2)) {
?>
<option value="<?php echo $row["d_id"]; ?>"><?php echo $row["div_name"]; ?>    </option>
<?php
}
?>
</select>

getstate.php

<?php
include("dbcon2.php");
if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM personnel_gdd WHERE pg_group = '" .    $_POST["country_id"] . "' ";
$results = mysql_query($query) or die(mysql_error());
?>

<?php
$row = mysql_num_rows($results)
?>
<?php echo $row; ?>

PS: I know that mysql is deprecated. I'll change it as soon as this problem is fixed. Thanks!

Upvotes: 4

Views: 6996

Answers (4)

Shlomi Hassid
Shlomi Hassid

Reputation: 6596

You only need to check if all values are different from -1 or "" or whatever - then build the data object and fire the Ajax:

JSnippet Demo

function runAjax() {

 //Check both:
 check = true;
 $('select').each(function(){
   console.log($(this).val())
    if ($(this).val() == -1) {
      $('span').text("Please select both.");
      check = false
    }
 });
 if (!check) return;

 $('span').text("OK. submiting");

 //Get the data:
 var data = {
    select1: $('#sel1').val(),
    select2: $('#sel2').val()
 };

 //Go on with ajax....
}

Upvotes: 0

Shailesh Katarmal
Shailesh Katarmal

Reputation: 2785

HTML

<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox"     onChange="getState(this.value);">
<option value="">Select Country</option>
<?php
$selq = "your query..............";
$selm = mysql_query($selq);
while($row = mysql_fetch_array($selm)) 
{
    ?>
    <option value="<?php echo $row["country_id"]; ?>"><?php echo $row["name"]; ?>    </option>
    <?php
}
?>
</select>
<select name="state" id="state-list" >
</select>

Javascript function

function getState(val) {

$.ajax({
type: "POST",
url: "test2.php",
data:'country_id='+val,
success: function(data){
    $("#state-list").append('<option value=""></option>');
    $('#state-list').html(data);
}
});

}

Ajax PHP file

if(!empty($_POST["country_id"])) 
{
    $query ="your query............... ";
    $results = mysql_query($query) or die(mysql_error());
    while($fetch = mysql_fetch_array($results))
    {
        ?>
        <option value="<?php echo $fetch['id']?>" ><?php echo $fetch['name'] ?></option>
        <?php 
    }
}

Upvotes: 0

Niranjan N Raju
Niranjan N Raju

Reputation: 11987

change 

    onchange="getState()"

donot pass any value in onchange event. And change your script like this

<script>
function getState(val) {
    var country = $("#country-list").val();
    var div = $("#div-list").val();
    if(country && div) {
        $.ajax({
            type: "POST",
            url: "get_state.php",
            data:{"country_id": country,"div":div},
            success: function(data){
                $("#state-list").val(data);
             }
        }); 
    }
}
</script>

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29249

This answer is generic, not related to your data but you will can understand how to figure it out.

$('select').change(function() {
  var group = $('#country-list').val();
  var div = $('#div-list').val();
  
  if (group == -1 || div == -1) {
    alert('please select country and division');  
  }
  else {
    $.ajax({
      type: "POST",
      url: "get_state.php",
      data:'country_id=' + country + '&=div_id' + div,
      success: function(data){
          $("#state-list").val(data);
      }
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Group:</label>
<select name="country" id="country-list" class="demoInputBox">
<option value="-1">Select Group</option>
<option value="1">Country 1</option>
  <option value="1">Country 1</option>
  <option value="2">Country 2</option>
  <option value="3">Country 3</option>
</select>
<br />
<label>Division:</label>
<select name="division" id="div-list" class="demoInputBox">
<option value="-1">Select Division</option>
  <option value="1">Division 1</option>
  <option value="2">Division 2</option>
  <option value="3">Division 3</option>
</select>

Than you get the 2 values in the server and return the data to the client. Than put this data into the third dropdown.

Upvotes: 0

Related Questions