Question

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

random-1.0.1.1

所以，我的问题是如何显示由...输入的值单击“保存”后输入字段中的用户（id = newGoal）按钮。真的很感激帮助。

Answer 1

以下是一个如何工作的示例 - 我将jQuery和Bootstrap CSS和JS添加到此代码段以重现您的环境。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

查看下面的代码示例，它应该使用dom引用来执行您要执行的操作以获取更改和更新页面，并且还使用诸如.modal('hide')之类的模式的引导操作。来自bootstrap doc

隐藏：手动隐藏模态。在模态实际被隐藏之前（即在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>

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

2 个答案: