在我的模态文本输入中，使用jQuery .val（）传递的值不会以表单形式显示

Question

所以我在桌子上有一个编辑按钮，一旦你点击它，就会弹出一个包含表格的模态。但是使用我的代码，我想在输入标记中传递的值不会显示出来。但是这些值显示在控制台中，只是它没有出现在表单/输入区域中。我只是想将表中的值传递给输入框。我已经在我的旧项目中完成了它，但它现在还没有工作。

这是我的HTML：

<?php
       while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    ?>
    <tr style="color:black; font-weight:bold;">
        <td><?php echo $row['t_id']?></td>
        <td><?php echo $row['status']?></td>
        <td><?php echo $row['dateBorrowed']?></td>
        <td><?php echo $row['principal']?></td>
        <td><?php echo $row['netProceeds']?></td>
        <td><?php echo $row['interest']?></td>
        <td><?php echo $row['dueDate']?></td>
        <td><?php echo $row['month']?></td>
        <td><a href="paid.php?id=<?php echo $row['t_id'];?>&aid=<?php echo $row['account_id'];?>" class="btn btn-info label label-info"><span class="glyphicon glyphicon-check"></span> PAID</a> <a class="btn-basic label label-default" data-toggle="modal" data-target="#edit" data-acc="<?php echo $row['account_id'];?>" data-tid="<?php echo $row['t_id'];?>" data-sta="<?php echo $row['status'];?>" data-db="<?php echo $row['dateBorrowed'];?>" data-pr="<?php echo $row['principal'];?>" data-net="<?php echo $row['netProceeds'];?>" data-in="<?php echo $row['interest'];?>" data-dd="<?php echo $row['dueDate'];?>" data-mn="<?php echo $row['month'];?>"><span class="glyphicon glyphicon-pencil"></span> EDIT</a>

        <?php } ?>

模态：

<div class="modal fade" id="edit" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Edit Transaction</h4>

        </div>
        <div class="modal-body">

            <form class="form-horizontal" action="updateT.php" method="post">
                <fieldset>
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="id_id" name="n_id">
                    </div>
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="id_tid" name="n_tid">
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Status</label>
                        <div class="col-md-8">
                            <select id="id_stat" name="stats" class="form-control input-md" required="">
                            <option value="Paid">Paid</option>
                            <option value="Unpaid">Unpaid</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Borrow Date</label>
                        <div class="col-md-8" data-date="2016-09-16" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
                            <input id="bdate" name="borrowdate" type="date" class="form-control input-md" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Principal</label>
                        <div class="col-md-8">
                            <input id="principal" name="prin" type="text" class="form-control input-md" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Net Proceeds</label>
                        <div class="col-md-8">
                            <input id="net" name="netP" type="text" class="form-control input-md" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Interest</label>
                        <div class="col-md-8">
                            <input id="interest" name="int" type="text" class="form-control input-md" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Due Date</label>
                        <div class="col-md-8" data-date="2016-09-16" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
                            <input id="ddate" name="duedate" type="date" class="form-control input-md" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Month</label>
                        <div class="col-md-8">
                            <select id="mnth" name="month" class="form-control">
                            <option value="January">January</option>
                            <option value="February">February</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="August">August</option>
                            <option value="September">September</option>
                            <option value="October">October</option>
                            <option value="November">November</option>
                            <option value="December">December</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="type"></label>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                    </div>
                </fieldset>
                </form>

        </div>
        </div>

    </div>
</div>

使用Javascript：

<script>
    $(document).ready(function(){
    $(".btn-basic").click(function(){

       var vacc = $(this).data("acc");
       var vtid = $(this).data("tid");
       var vsta = $(this).data("sta");
       var vdb = $(this).data("db");
       var vpr = $(this).data("pr");
       var vnet = $(this).data("net");
       var vin = $(this).data("in");
       var vdd = $(this).data("dd");
       var vmn = $(this).data("mn");

        $("#id_id").val(vacc);
        $("#id_tid").val(vtid);
        $("#id_stat").val(vsta);
        $("#bdate").val(vdb);
        $("#principal").val(vpr);
        $("#net").val(vnet);
        $("#interest").val(vin);
        $("#ddate").val(vdd);
        $("#mnth").val(vmn);

        console.log(vacc);
        console.log(vtid);
        console.log(vsta);
        console.log(vdb);
        console.log(vpr);
        console.log(vnet);
        console.log(vin);
        console.log(vdd);
        console.log(vmn);
        });
    });
</script>

Screencaps of the page Screencaps of the page

Answer 1

这对我有用。我什么都没做。我认为你应该在价值设定后做$（＆＃39;＃id＆＃39;）。modal（＆＃39; show＆＃39;）。

＆＃13;

＆＃13;

$(document).ready(function(){
$('#btnShowPopup').click(function(){
       var vacc = '1';
       var vtid = '1';
       var vsta = 'Unpaid';
       var vdb = '2017-05-10';
       var vpr = '9500';
       var vnet = '9000';
       var vin = '500';
       var vdd = '2017-05-10';
       var vmn = 'June';

        $("#id_id").val(vacc);
        $("#id_tid").val(vtid);
        $("#id_stat").val(vsta);
        $("#bdate").val(vdb);
        $("#principal").val(vpr);
        $("#net").val(vnet);
        $("#interest").val(vin);
        $("#ddate").val(vdd);
        $("#mnth").val(vmn);
        
        $('#edit').modal('show');
        });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="col-lg-12">
        <input type="button" id="btnShowPopup" class="btn btn-primary" value="open Popup" />
    </div>
</div>

<div class="modal fade" id="edit" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Edit Transaction</h4>

        </div>
        <div class="modal-body">

            <form class="form-horizontal" action="updateT.php" method="post">
                <fieldset>
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="id_id" name="n_id">
                    </div>
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="id_tid" name="n_tid">
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Status</label>
                        <div class="col-md-8">
                            <select id="id_stat" name="stats" class="form-control input-md" required="">
                            <option value="Paid">Paid</option>
                            <option value="Unpaid">Unpaid</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Borrow Date</label>
                        <div class="col-md-8" data-date="2016-09-16" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
                            <input id="bdate" name="borrowdate" type="date" class="form-control input-md" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Principal</label>
                        <div class="col-md-8">
                            <input id="principal" name="prin" type="text" class="form-control input-md" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Net Proceeds</label>
                        <div class="col-md-8">
                            <input id="net" name="netP" type="text" class="form-control input-md" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Interest</label>
                        <div class="col-md-8">
                            <input id="interest" name="int" type="text" class="form-control input-md" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Due Date</label>
                        <div class="col-md-8" data-date="2016-09-16" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
                            <input id="ddate" name="duedate" type="date" class="form-control input-md" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Month</label>
                        <div class="col-md-8">
                            <select id="mnth" name="month" class="form-control">
                            <option value="January">January</option>
                            <option value="February">February</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="August">August</option>
                            <option value="September">September</option>
                            <option value="October">October</option>
                            <option value="November">November</option>
                            <option value="December">December</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="type"></label>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                    </div>
                </fieldset>
                </form>

        </div>
        </div>

    </div>
</div>

＆＃13;

＆＃13;

＆＃13;