javascript - How to get values from two or more select in jqurey (ajax)

View Original

This is a select & option in HTML. I use jquery here. I need to fetch the value of both select and pass the values to ajax.php where I need to use both values to check in my database and proceed with another dependent dropdown.

<label>Select Number: </label>
<select id= "number" onchange="FetchState(this.value)" required>
      <option value="0">-- 0 --</option>
      <option value="1">-- 1 --</option>
      <option value="2">-- 2 --</option>
      <option value="3">-- 3 --</option>
</select>

<label>Select letter: </label>
<select id="alphabet" required>
      <option value="a">-- a --</option>
      <option value="b">-- b --</option>
      <option value="c">-- c --</option>
      <option value="d">-- d --</option>
</select>
<select id="dependent">
</select>

This is my script code written below.

function FetchState(id) {
        $("#dependent").html('');
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: {
                number: id,
            },
            success: function(data) {
                $("#dependent").html(data);
            }
        });
    }
</script>

I need to pass two values to PHP via jquery(ajax) to continue further. Here both letter and alphabet value should be get and pass as data in jquery to ajax.php

Answer

Solution:

The html is a little odd but as you will always have a selection in both dropdowns we could simply do

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function FetchState() {
    id =  $('#number option:selected').val();
    alp = $('#alphabet option:selected').val();
            
    $.ajax({
        type: "POST",
        url: "ajax_endpoint.php",
        data: {number: id, alphabet: alp},
        success: function(data) {
            $("#dependent").html(data);
        }
    });
}
</script>
</head>
<body>

<form method="POST" >  
    <label>Select Number: </label>
    <select id= "number" onchange="FetchState()" required>
        <option value="0">-- 0 --</option>
        <option value="1">-- 1 --</option>
        <option value="2">-- 2 --</option>
        <option value="3">-- 3 --</option>
    </select>

    <label>Select letter: </label>
    <select id="alphabet" onchange="FetchState()" required>
        <option value="a">-- a --</option>
        <option value="b">-- b --</option>
        <option value="c">-- c --</option>
        <option value="d">-- d --</option>
    </select>
    <select id="dependent"></select>

</form>

</body>
</html>

And if the dummy ajax_endpoint.php was this

<?php
echo '<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
<option value="dd">dd</option>';
?>

It should fill the 3rd dropdown for you

Answer

Solution:

What about declaring an array, pushing to it and then firing the ajax call when you have reached two items in the array?

var bothnumbers = [];

function FetchState(id) {
bothnumbers.push(id);
console.log('your array: '+bothnumbers);

if(bothnumbers.length == 2){
    console.log('fire function now that two are chosen');
        $("#dependent").html('');
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: {
                number: bothnumbers,
            },
            success: function(data) {
                $("#dependent").html(data);
            }
        });
}

    }

Source