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

aspnet_regsql.exe -S YourServerName -d YourDatabaseName -ssadd -E -sstype c

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

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

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

3 个答案: