Auto-populate two input boxes from a dropdown menu

Question

I am trying to fetch two variables from a mysql db table which is supposed to auto-populate once a user selects a dropdown option.

The dropdown menu will show a list of teams and the input boxes will display the names of the Captain and the Vice-Captain once the team is selected (actually it will only capture their MemberID in the backend and save them in a table)

I had been able to fetch the name of one Captain, using a Javascript function and Ajax. That part is working fine.

What I am after is getting the second captains name/id.

My HTML/PHP code is here:

 <script type="text/javascript" src="js/capt-dropdown.js"></script> ... <table> <?php $x = 0; ?> <tr style="background-color:#FFF9C4"> <td>Select Team: </td> <td><select name="teamcode" id="teamcode"> <option disabled selected value> - Select Team - </option> <?php $sql_select = mysqli_query($conn, "SELECT teamcode, team FROM team"); while ($row = mysqli_fetch_assoc($sql_select)){ echo '<option value = " '.$row['teamcode'].'"> '.$row['team'].' </option>'; } ?> </select> </td> </tr> <tr> <td>Captain 1: </td> <td><input type="text" name="captain1" id="captain1"></td> </tr> <tr> <td>Captain 2: </td> <td><input type="text" name="captain2" id="captain2"></td> </tr> </tr> </table> 

The JS file: capt-dropdown.js

 $(document).ready(function() { $("#teamcode").change(function() { var team = $(this).val(); if(team != "") { $.ajax({ url:"get-captain.php", data:{teamcode : team}, type:'POST', success:function(response) { var resp = $.trim(response); $("#captain1").html(resp); } }); } else { $("#captain1").html("<option value=''>--- Select ---</option>"); } }); }); 

The php file: get-captain.php is here:

 if(isset($_POST['teamcode'])) { $teamcode = trim($_POST['teamcode']); $sql_select = mysqli_query($conn,"SELECT surname, preferred_name, memberid FROM member WHERE memberid in ((SELECT captain FROM captain WHERE year = YEAR(CURDATE()) AND teamcode = '$teamcode'), (SELECT vcaptain FROM captain WHERE year = YEAR(CURDATE()) AND teamcode = '$teamcode'))"); while ($result = mysqli_fetch_assoc($sql_select)){ $name = ($result['surname']. ', '.$result['preferred_name']); echo '<option value = " '.$result['memberid']. '">'.$name.'</option>'; } } 

Member table contains the name, surname and member-id of members Captain table contains historic data of team captains Captain table

The query in get-captain.php is working, and is able to retrieve the captain and vcaptain's names & ids.

Read several posts but couldn't find anything similar to what I am doing here.

Can anyone please suggest how to fetch the second captains (the vice-captains) details? (ie. Display his name and capture his member-id)

Pls Note: this is an extract of a form which contains lot of other information, hence my apologies if I missed a line while cutting & pasting here)

Thank you in advance.

Answer 1

Sorry I cannot comment yet due to my rep, but captain 1 & 2 are inputs why are you trying to echo out option tags and insert them inside captain1.

You should change get-captain.php to fetch an associative array and echo json_encode($array); Your javascript can then parse json array var array=JSON.parse(response); finally putting your array values inside your input

$("#captain1").html(arr[0]["surname"] + "," + arr[0]["preferred_name"]);
$("#captain1").val(arr[0]["memberid"]);
$("#captain2").html(arr[1]["surname"] + "," + arr[1]["preferred_name"]);
$("#captain2").val(arr[1]["memberid"]);

If your dealing with more than 2 captains then you can just loop through your array and add a counter. Hope this makes sense i've never been good at explaining.