Two drop-down lists with one

Question

Hi, what I'm trying to do is I have 2 dropdowns. I want ajax to work only if two dropdowns have chosen a value. And how can I transfer the data of these 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 mysql is deprecated. I will change it as soon as this problem is fixed. Thanks!

Answer 1

change

    onchange="getState()"

donot passes any value in the onchange event. And change your script as follows

<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>

Answer 2

This answer is general, not related to your data, but you will understand how to understand it.

$('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>

Run code

2 . .

Answer 3

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 
    }
}

Answer 4

You only need to check if all values ​​differ from -1 or "" or something else - then create a data object and run 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....
}