javascript - Populate a text box based on a dynamic drop down box in php

Question

I am trying to input a value (Rating) from the database when an item is selected. I need to also be able to update that rating and then put that value into another table. My problem is that I'm trying to figure out how to make the value in the text box be related to the selection made in the drop down. I've found coding to make another option box but cannot figure out how to make that a text box.

REWORDING: Originally when I posted the question I thought it was possible to do this without JQuery and was trying to copy the for loop and run a while loop to populate the text box. I now know that isn't possible and would like to figure out how to run a script to populate a text box on change for the drop down box. The problem being the function has to be connected to the database as well as the drop down. 1. pull the data for the drop down (from the JOURNAL table). 2. Select a journal from that drop down 3. Inside the JOURNAL table a JournalRating has been assigned to every journal pull that value and place inside a textbox.

What I've tried to do is

<?php
    include 'dbc.php';
    connect();

    //insert form values into database                                                                                                                                                   
$sql = "SELECT JournalName, JournalID, Rating, JournalActive from JOURNAL where JournalActive = 1;";      
//Can take out JournalActive if we do not want it                                                                                                                        
$result = mysqli_query($conn, $sql);                                                                                                                                                 
if (!$result) {                                                                                                                                                                      
    $message  = 'Invalid query: ' . mysql_error() . "
";                                                                                                                            
    $message .= 'Whole query: ' . $query;                                                                                                                                            
    die($message);                                                                                                                                                                   
    echo "there was an issue";                                                                                                                                                       
} 

$sql2 = "SELECT FName, LName, FacultyID from FACULTY where FacultyActive = 1;"; 
//Can take out JournalActive if we do not want it                                                                                                                        
$result2 = mysqli_query($conn, $sql2);                                                                                                                                                 
if (!$result2) {                                                                                                                                                                      
    $message  = 'Invalid query: ' . mysql_error() . "
";                                                                                                                            
    $message .= 'Whole query: ' . $query;                                                                                                                                            
    die($message);                                                                                                                                                                   
    echo "there was an issue";                                                                                                                                                       
} 

    //array to hold all of the data                                                                                                                                                      
$journals = array();                                                                                                                                                                  
    //print out all of the first names in the database   
$rownumber = 0;                                                                                                                                 
while ($row = mysqli_fetch_assoc($result)) {                                                                                                                                         
    $journals[$rownumber][0] = $row['JournalName'];
    $journals[$rownumber][1] = $row['JournalID'];
    $journals[$rownumber][2] = $row['JournalRating'];
    $journals[$rownumber][3] = $row['JournalActive'];
    $rownumber++;                                                                                                                                                       
}

$faculty = array();                                                                                                                                                                  
    //print out all of the first names in the database   
$rownum = 0;                                                                                                                                 
while ($row = mysqli_fetch_assoc($result2)) {                                                                                                                                         
    $faculty[$rownum][0] = $row['FName'];
    $faculty[$rownum][1] = $row['LName'];
    $faculty[$rownum][2] = $row['FacultyID'];
    $rownum++;                                                                                                                                                       
}

?>

<!DOCTYPE html>

<head>
<link href="styles.css" rel="stylesheet">
<h1> Miami University </h1>
<h4> Information Systems and Analytics Department </h4>
<script>
(function($){
    $(function(){ 
        $("#JournalID").on('change', function() {
              $("#JournalRating").val($(this).find("option:selected").data('Rating'));
        });
    }); 
})(jQuery);
</script>

</head>
<body>

<div class="StyleDiv" > 
<!-- coding for journal -->
<form id="form1" name="form1" method="post" action="RR2.php">


<label for="FacultyID">Faculty Name</label>
<select multiple="multiple" name="FacultyID[]" id="FacultyID">
<?php
    for($i = 0; $i < sizeof($faculty); $i++) {
    print "<option value="" . $faculty[$i][2] . "">" . $faculty[$i][0] .' '. $faculty[$i][1] . "</option>
";
    }
?>
</select>


<br class="clear" />

<br class="clear" /> 
<label for="JournalID">Journal Name</label>
<select name="JournalID" id="JournalID">
<?php

    for($i = 0; $i < sizeof($journals); $i++) {
    print "<option value="" . $journals[$i][1] . "" data-rating="" . $journals[$i][2] . "">" . $journals[$i][0] . "</option>
";
}
?>
</select>
<br class="clear"/>

<label for="JournalRating">Journal Rating</label><input type="text" name="JournalRating" id="JournalRating" />

<br class="clear" /> 


<!-- coding for publication --> 
<label for="Title">Publication Title</label><input type="text" name="PubID" id="PubID" />
<br class="clear" /> 
<label for="Year">Year</label><input type="text" name="Year" id="Year" />
<br class="clear" /> 
<label for="Volume">Volume</label><input type="text" name="Volume" id="Volume" />
<br class="clear" /> 
<label for="Issue">Issue</label><input type="text" name="Issue" id="Issue" />
<br class="clear" /> 
<label for="Comments">Comments</label><textarea name="Comments" id="Comments" cols="45" rows="5"></textarea>
<br class="clear" /> 



<input type="submit" name="Submit" id="Submit" value="Submit" />
<br class="clear" /> 
</br>
</br>

</div>
</form>

<?php

//Post Parameters 
$JournalID = $_POST['JournalID'];
//for($i = 0; $i < sizeof($journals); $i++) {
    //if ($JournalID = $journals[$i][1]) {
    //$JournalName = $journals[$i][0];
    //}
    //}
$Year = $_POST['Year'];  
$Comments = $_POST['Comments'];  
$Volume = $_POST['Volume'];  
$Issue = $_POST['Issue'];  
$Title = $_POST['Title'];
$JournalRating = $_POST['JournalRating'];
$FacultyMemID = $_POST['FacultyID'];


//Query 



 //INSERT 
$stmt = $conn->prepare(" INSERT INTO PUBLICATION ( JournalID, Year, Comments, Volume, Issue, Title, JournalRating )  VALUES ( ?, ?, ?, ?, ?, ?, ? )"); 
$stmt->bind_param('sssssss', $JournalID, $Year, $Comments, $Volume, $Issue, $Title, $JournalRating);
$stmt->execute(); 

$pubID = $stmt->insert_id;
$facmemid = 0; 

$stmt = $conn->prepare(" INSERT INTO FACULTYPUBLICATIONS ( FacultyID, PubID )  VALUES ( ?, ? )"); 
$stmt->bind_param('ii', $facmemid, $pubID);
 //for ($_POST['FacultyID'] as $FacultyMemID) {
 for($i = 0; $i < sizeof($FacultyMemID); $i++) {
    $facmemid = $FacultyMemID[$i]; 
    $stmt->execute();
    }

mysqli_close($conn);
?>



</body>
</html>

Answer 1

Add the rating to your HTML using a data attribute:

<select name="JournalID" id="JournalID">
<?php
    for($i = 0; $i < sizeof($journals); $i++) {
    print "<option value="" . $journals[$i][1] . "" data-rating="" . $journals[$i][2] . "">" . $journals[$i][0] . "</option>
";
}
?>
</select>

Then you can access this using jQuery .data():

(function($) {
  $(function() {
    $("#JournalID").on('change', function() {
      $("#JournalRating").val($(this).find("option:selected").data('rating'));
    });
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="JournalID">
  <option>Select a journal</option>
  <option value="1" data-rating="3">Journal #1</option>
  <option value="2" data-rating="2">Journal #2</option>
  <option value="3" data-rating="5">Journal #3</option>
  </select>
<br>
Rating: <input id="JournalRating">