模态：如何保存一个值并在页面中显示

Question

我有一个带有“更改”按钮的网页。当您单击该按钮时，会出现一个模式，要求用户输入一个数字。我需要能够保存用户输入的数字并将其显示在网页中。我已经在表单中创建了模式，但我不确定如何在网页中显示更改。 是这样的：

 <a   class="btn btn-primary" data-toggle="modal" data-target="#moneyModal">
 <span class="glyphicon glyphicon-money glyphicon-white"></span>Change</a>

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

        <form method="post" action="change-goal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Change Goal</h4>
                </div>
                <div class="modal-body">
                    <p>Please enter a new number.</p>
                </div>
                <div class="modal-body">
                    <input class="form-control" name="newGoal" id="newGoal">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" >Save</button>
                </div>
            </div>
        </form>
        </div>
    </div>

所以，我的问题是如何显示由 单击“保存”按钮后，用户在输入字段（id=newGoal）中。 非常感谢您的帮助。

Answer 1

这是一个如何工作的示例 - 我将 jQuery 和 Bootstrap CSS 和 JS 添加到这个 sn-p 以重现您的环境。

当在模式中单击 #save 按钮（我分配的 ID）时，我添加的一小部分 JavaScript 将触发，并将 #newGoal 字段中的文本放入新的 #value 跨度我做了。

另外，我在模态按钮上将type="submit" 更改为type="button"（因此它不会执行真正的表单提交并重新加载页面），并且我向其添加了data-dismiss 属性，因此它也会关闭点击时的模态。

$('#save').on('click', function() {
  $('#value').text( $('#newGoal').val() );
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a class="btn btn-primary" data-toggle="modal" data-target="#moneyModal">
  <span class="glyphicon glyphicon-money glyphicon-white"></span>Change</a>
  
<p>Your Number: <span id="value"></span></p>

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

    <form method="post" action="change-goal">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Change Goal</h4>
        </div>
        <div class="modal-body">
          <p>Please enter a new number.</p>
        </div>
        <div class="modal-body">
          <input class="form-control" name="newGoal" id="newGoal">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button id="save" type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 2

查看下面的代码示例，它应该可以使用 dom 引用来获取更改和更新页面，并且还可以使用 .modal('hide') 等模式的引导操作。来自引导文档

hide：手动隐藏模式。在模态框实际被隐藏之前（即在 hidden.bs.modal 事件发生之前）返回给调用者。

然后观察我使用 id 来引用 DOM 的表单，以便我们可以在提交表单时使用它来操作视图

希望，这个帮助。

$(document).ready(function(){

/**
using when the form is closed, we update the view 
*/
$("#formTest").submit(function(e){
e.preventDefault();
  var nameGoal = $(this).find("[name=newGoal]").val();
 //we update our view here now
 $("#update").html("name goal: <b>"+nameGoal+"</b>");
 $("#moneyModal").modal('hide');//close our modal now
});


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 <a   class="btn btn-primary" data-toggle="modal" data-target="#moneyModal">
 <span class="glyphicon glyphicon-money glyphicon-white"></span>Change</a>
 
<div id="update">
am going to update here
</div>

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

        <form id="formTest" method="post" action="change-goal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Change Goal</h4>
                </div>
                <div class="modal-body">
                    <p>Please enter a new number.</p>
                </div>
                <div class="modal-body">
                    <input class="form-control" name="newGoal" id="newGoal">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" >Save</button>
                </div>
            </div>
        </form>
        </div>
    </div>