モーダル：値を保存してページに表示する方法

Question

「変更」ボタンがあるウェブページがあります。そのボタンをクリックすると、モーダルが表示され、ユーザーに番号を入力するよう求められます。ユーザーが入力した番号を保存してWebページに表示できる必要があります。フォーム内にモーダルを作成しましたが、ウェブページの変更をどのように表示するのか分かりません。 は、それはこのようなものだ：

<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をこのスニペットに追加して環境を再現しました。

私は#saveボタン（私が割り当てられたID）がモーダルでクリックされたときに発生します、そして私が作った新しい#valueスパンに#newGoalフィールドからテキストを配置します追加のJavaScriptを少し。

また、私は（それが本当のフォームの送信を行うと、ページをリロードしません）モーダルボタンをtype="button"へtype="submit"を変更して、クリックされたとき、それはまた、モーダルを閉じてしまうので、私はそれに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')。ブートストラップdocから

hide：手動でモーダルを非表示にします。モーダルが実際に非表示になる前（つまり、hidden.bs.modalイベントが発生する前）に呼び出し元に戻ります。

その後、私は、フォームが

・ホープ、このヘルプを提出しているときに、我々は、それとの見解を操作できるのDOMを参照するためのIDを使用するフォームを観察します。

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