Modal：如何保存一個值並將其顯示在頁面中

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和自舉CSS和JS這個片段重現您的環境。

我加入了#save按鈕（即我分配一個ID）被點擊的模式時會觸發，並把從#newGoal字段中的文本到一個新的#value跨度我做的JavaScript的點點。

而且，我改變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')。從bootstrap文件

隱藏：手動隱藏模式。在模式實際被隱藏之前（即在發生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>