how to display data in input tag after selecting in select tag value?

Question

I want to achieve after selecting in my select tag, it will display a input tag in my modal and that has been fetch in other table in database.

totalfees.php

if(isset($_POST["year"]))  
{  
    $output = '';  
    $query = "SELECT total_fees FROM manage_fees WHERE year_lvl = '".$_POST["year"]."'";  
    $result = mysqli_query($connect, $query);    
    while($row = mysqli_fetch_array($result))  
    {  
        $output .= '  
                <input type="text" class="form-control" id="tf" name="tf" readonly="readonly" value="'.$row["total_fees"].'">
                ';  
    }  
    echo $output;  
}

gettotal.js

$(document).ready(function(){  
$('#year').click(function(){  
     var year = $(this).attr("year");  
     $.ajax({  
          url:"../include/assessment.php",  
          method:"post",  
          data:{year:year},  
          success:function(data){  
               $('#total_fees').html(data); 
          }  
     });  
});

assessment.php

<div class="modal fade" id="fee_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Assess Student</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="officer_studentAssessment.php" id="reg">
                    <div class="form-group">
                        <label for="year">Year</label>
                        <select class="form-control" id="year" name="year" required>
                            <?php
                                $result = $connect->query("SELECT * FROM year_lvl") or die($connect->error());
                                while($row = $result->fetch_assoc()):
                            ?>
                                <option value="<?php echo $row['year']; ?>"><?php echo $row["year"]; ?></option>
                            <?php endwhile; ?>
                        </select>
                    </div>
                    <div class="form-group" id="total_fees">
                        <label for="tf">Total fees</label>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success" name="create" id="create" type="submit">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

in totalfees.php the output should be display on the DIV tag where id = total_fees, the problem is after I click the select tag the DIV disappears

<div class="form-group" id="total_fees">
    <label for="tf">Total fees</label>
</div>

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, May 09 '21 at 17:03
@Swati still it doesnt show a new div tag after selecting in select tag — Janbres Gagaracruz, May 10 '21 at 16:14
Hey @JanbresGagaracruz - following up. Was your question answered satisfactorily? If there is more we can help with, please add a comment below any answer, or edit your question to clarify what else you want to know. ***Otherwise, please choose a "best answer" (by clicking the checkmark beside the answer) to close out the question.*** If no answer provided helpful information, please add your own answer and select that as the best answer (to close the question). Remember, too: you can upvote any answers you found helpful (you can also upvote and checkmark the same answer, if desired.) *Thanks! — cssyphus, Jul 30 '21 at 19:41
@JanbresGagaracruz This question is still open. Please choose a "best answer" (by clicking the checkmark beside the answer) to close out the question. If no answer provided helpful information, please add your own answer and select that as the best answer (to close the question). That would help us out. *Thanks!* — cssyphus, Nov 15 '21 at 23:30

score 0 · Answer 1 · answered May 09 '21 at 16:10

add

<scritp>
let selectval = document.getElementById('selectId');
let val =document.getElementById('yourId');
let val.value = selectval
</script>

in slectId add id of your select input and in yourId add id of input field where you would like to add the data

score 0 · Answer 2 · answered May 09 '21 at 16:29

Looks like a wrong-word typo.

In gettotal.js, in your ajax code block, you are calling out to the wrong url.

Instead of:

url:"../include/assessment.php",

try:

url:"../include/totalfees.php",

Also, you might want to change:

$('#year').click(function(){

to

$('#year').change(function(){

how to display data in input tag after selecting in select tag value?

totalfees.php

gettotal.js

assessment.php

2 Answers2