How to POST two parameters in PHP using Ajax - Jquery

Jimmy
December 31, 2022
131 views
0 votes
2 Answers

I want to pass two parameters into the function getStuName() but found that there is error. Can anyone help me with the syntax?

<script language="javascript">        
    function getStuName1(val, val1) {
        if(val!=''){
            $.ajax({
            type: "POST",
            url: "get_stuname1.php",
            data:'yr='+val+'&classname='+val1,
            success: function(data){
            $("#stu-list1").html(data);
            }
            });
            alert(data);
        }else{
            document.getElementById('stuname').options.length=1;
            document.getElementById('stuname').options[0].text='Please select';
        }
    } //end function
</script>

<select style="font-size: 18px;" name="yr" onChange="getStuName1(this.value);">
    <option value="2021-2022">2021-2022</option>
    <option value="2022-2023">2022-2023</option>
    <option value="2023-2024">2023-2024</option>
    <option value="2024-2025">2024-2025</option>
    <option value="2025-2026">2025-2026</option>
    <option value="2026-2027">2026-2027</option>
</select>


<select style="font-size: 18px;" name="classname" id="class-list" class="demoInputBox"  onChange="getStuName1(this.value);">
    <option value="" selected>please select</option>
    <?php
        $sql="SELECT classname FROM class";
        $class_result = mysqli_query($db_link,$sql);
        while($rs = mysqli_fetch_array($class_result, MYSQLI_ASSOC)) { 
    ?>
    <option value="<?php echo $rs["classname"]; ?>"><?php echo $rs["classname"]; ?></option>
    <?php
    }
    ?>
</select>

Content of get_stuname1.php

<?php
    require_once("connMysql.php");
    $sql_stu ="SELECT * FROM stu_hist WHERE enabled='1' AND sch_yr = '" . $_POST['yr'] . "' AND classname = '" .    $_POST['classname'] . "' ORDER BY classno";
    $stu_result = mysqli_query($db_link,$sql_stu);
    while($rs = mysqli_fetch_array($stu_result, MYSQLI_ASSOC)) {
?>
    <option value="<?php echo $rs["stu_name"]; ?>"> <?php echo $rs["stu_name"]; ?></option>
<?php
}
?>

I want to get the yr and classname and pass them into the function getStuName1 but cannot display student name

Answers

Since you are passing two parameters to the getStuName1 function, so instead of using onChange (for a change in one select box) , it is recommended that you have a button which submit the two selected values when both of the them are selected (a "confirm submission" button is the preferred choice because normally a person needs to make up his/her mind that all the select boxes are properly chosen before the actual submission, and actually there is no point to trigger the ajax if only one of the select boxes are selected)

Hence

make sure that both select box are having a unique id (so add id="yr" for the yr select box)
add say a button which trigger passing the selected values of the two select boxes, such as:

<input type=button value="Confirm" onclick="javascript:trigger1();">

and

<script>
function trigger1() {
  var e = document.getElementById("yr");
  var value1 = e.value;

  var e2 = document.getElementById("class-list");
  var value2 = e2.value;

  getStuName1(value1, value2);

    }
</script>

So, change your code to

<script language="javascript">        
function getStuName1(val, val1) {
if(val!=''){
$.ajax({
type: "POST",
url: "get_stuname1.php",
data:'yr='+val+'&classname='+val1,
success: function(data){
$("#stu-list1").html(data);
}
});
alert(data);
}else{
document.getElementById('stuname').options.length=1;
document.getElementById('stuname').options[0].text='Please select';
}
} //end function
</script>

<select style="font-size: 18px;" name="yr" id="yr">
<option value="2021-2022">2021-2022</option>
<option value="2022-2023">2022-2023</option>
<option value="2023-2024">2023-2024</option>
<option value="2024-2025">2024-2025</option>
<option value="2025-2026">2025-2026</option>
<option value="2026-2027">2026-2027</option>
</select>


<select style="font-size: 18px;" name="classname" id="class-list" class="demoInputBox"  >
<option value="" selected>please select</option>
<?php
$sql="SELECT classname FROM class";
$class_result = mysqli_query($db_link,$sql);
while($rs = mysqli_fetch_array($class_result, MYSQLI_ASSOC)) { 
?>
<option value="<?php echo $rs["classname"]; ?>"><?php echo $rs["classname"]; ?></option>
<?php
}
?>
</select>

<input type=button value="Confirm" onclick="javascript:trigger1();">


<script>
function trigger1() {
  var e = document.getElementById("yr");
  var value1 = e.value;

  var e2 = document.getElementById("class-list");
  var value2 = e2.value;

  getStuName1(value1, value2);

    }
</script>

[Additional point]

Last but not least, please amend your PHP script to use parameterized prepared statement which is resilient against SQL injection. You may refer to the following:

For Mysqli:

https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php

For PDO

https://www.php.net/manual/en/pdo.prepare.php

To ensure that the values from both select menus ( or all if there are more ) are used in the ajax request one method you might consider would be to use a global variable that you populate when a select menu triggers the change event. This global variable could be an object or array – it is the effective length when populated that is of interest as we can decide to send the AJAX request only when both/all select menus have been changed. This is all done without jQuery but the fetch code could very easily be replaced with suitable jQuery code. No need for buttons to fire the request…

// populate this with select name & value pairs
let args={};

// a function to process the response from the server
let callback=(r)=>{
  document.getElementById('stu-list1').innerHTML=r;
}

// delegated event handler bound to the document
document.addEventListener('change',e=>{
  if( e.target instanceof HTMLSelectElement && e.target.classList.contains('required') ){
    
    // store this select menu name/value
    args[ e.target.name ]=e.target.value;
    
    // if BOTH (all) select menus are populated, do the AJAX request
    if( Object.keys( args ).length==document.querySelectorAll('select.required').length ){
      
      let payload=Object.keys( args ).map(name=>{
        return [ name, args[name] ].join('=')
      }).join('&');
      
      fetch( 'get_stuname1.php', { method:'post', body:payload } )
        .then(r=>r.text())
        .then(callback)
        .catch(alert)
    }
  }
});

<select name="yr" class='required'>
  <option selected hidden disabled>please select...
  <option>2021-2022
  <option>2022-2023
  <option>2023-2024
  <option>2024-2025
  <option>2025-2026
  <option>2026-2027
</select>


<select name="classname" id="class-list" class="demoInputBox required">
  <option selected hidden disabled>please select...
  <option>geronimo
  <option>horatio
  <option>mimosa
</select>


<div id='stu-list1'></div>

Please signup or login to give your own answer.

Click here to cancel reply.

How to POST two parameters in PHP using Ajax – Jquery

Answers