弹出时,HTML 文本值未显示在模态上



编写了下面的代码,但我未能在模态中显示文本值(公司(。它没有捕捉到公司名称的价值并显示在Modal弹出窗口上。你能给我建议吗?这里怎么了?下面是我的代码

<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>

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

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

并将myBtn点击事件处理程序更改为:

$("#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> 

最新更新