如何以自举模式显示来自输入字段的信息？

Question

因此，一旦用户填写了他们的信息并单击“提交”，我想在引导模型中显示信息，并在其下方显示一个确认按钮。

这将是他们的信息摘要，然后再提交给数据库。 到目前为止，这是我所拥有的：

 const text = document.getElementsByClassName("myText").innerHTML; const modalBody = document.getElementById("bodyModal") function submitText () { modalBody.innerHTML = text } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <label>Name</label> <input type="text" class="myText"> <br> <label>Age</label> <input type="text" class="myText"> <br> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" onClick="submitText"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body" id="bodyModal"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Confirm</button> </div> </div> </div> </div> 

Answer 1

  function submitText(){ var html="Your name is "+$("#name").val()+"<br>Your age is "+$("#age").val(); $("#bodyModal").html(html); } 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <label>Name</label> <input type="text" class="myText" id="name"> <!-- i only added name id to this element --> <br> <label>Age</label> <input type="text" class="myText" id="age"> <!-- i only added age id to this element --> <br> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" onClick="submitText()"> <!-- here was an syntax error. you were calling method by uts name without () sign --> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body" id="bodyModal"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Confirm</button> </div> </div> </div> </div> 

Answer 2

 const modalText = $("#modalText") function submitText () { var name = $("#myName").val(); var age = $("#myAge").val(); modalText.text("Hello " + name + " with " + age + " years old "); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <label>Name</label> <input type="text" id="myName" class="myText"> <br /> <label>Age</label> <input type="text" id="myAge" class="myText"> <br /> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" onClick="submitText()"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body" id="bodyModal"> <lable id="modalText"></lable> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Confirm</button> </div> </div> </div> </div> 

Answer 3

您需要获取输入字段的值。 我建议给输入两个id像这样：

<label for="id1">Name</label>
<input type="text" class="myText" id="id1">

<label for="id2">Age</label>
<input type="text" class="myText" id=id2">

然后通过以下方式获得其价值：

var name = document.getElementById("id1").value
var age = document.getElementById("id2").value

最后，您可以通过执行以下操作来附加刚在模式上获得的文本：

$("#bodyModal").html("<p>"+name+"</p><p>"+age+"</p>")