HTML 文本值在弹窗时没有显示在 Modal 上

Question

编写了下面的代码，但我无法在模式中显示文本值（公司）。它没有捕获公司名称的价值并显示在模态弹出窗口中。你能建议吗？这里有什么问题？下面是我的代码

<form id="inputform" type="text" method="post">
<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <label for="company">Company Name</label>
      <input type="text" class="form-control" placeholder="ABC Bakers" id="company" readonly>
    </div>
 </div>
  <div class="col-md-6">
    <div class="form-group">
      <label for="prefix">Company Prefix</label>
      <input type="text" class="form-control" placeholder="1234" id="prefix" readonly>
    </div>
  </div>
</div>
        <label for="InputFile">Product Image input</label>
        <input type="file" id="InputFile" required>
</div><button input type="button" name="btn" value="Submit" id="mybtn" data-toggle="modal" data-target="#confirm-submit">Submit</button>

    <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h4 class="modal-title">Hello</h4></div><div class="modal-body"> 
<h4 id="comp"> </h4>Thank You for your submission! Your. Please check your product information.</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

<script>
        $(document).ready(function(){$("#myBtn").click(function(){
       $("#myModal").modal();
       $("#comp").html($("#company").val());
     });
     $("#myModal").modal("hide").on("hidden.bs.modal", function () {        
        location.reload();                   
    }); 
</script>

Answer 1

您有两个具有相同 id 的元素，请将其中一个更改为其他元素。

<input type="text" class="form-control" placeholder="ABC Bakers" id="company" readonly>

<h4 id="company"> </h4>

并将 myBtn click 事件处理程序更改为：

$("#myBtn").click(function () {
    $('#comp').html($('#company').val());
    //$("#myModal").modal();
});

并将按钮的id改为myBtn，区分大小写。

<button input type="button" name="btn" value="Submit" id="myBtn" data-toggle="modal" data-target="#confirm-submit">Submit</button>

HTML 文本值在弹窗时没有显示在 Modal 上

HTML text value didn't display on Modal when pop up

html

javascript

bootstrap-modal