1. ホーム
  2. 質問と答え
  3. ブートストラップモードでフォームフィールドを更新するにはどうすればよいですか？

ブートストラップモードでフォームフィールドを更新するにはどうすればよいですか？

2016-10-18 27 views
1

名前、電子メール、連絡先のフィールドを持つフォームを作成できました。私がサブミットをクリックすると、編集ボタンが付いたテーブルに入力された値が表示されます。現在、ブートストラップモーダルに現行の値が表示されるように、ブートストラップモーダルを設定します。そして私がそれを編集し、それをクリックすると、それはテーブルの要素に反映されます。私はあなたのためのJsfiddleを開発しましたブートストラップモードでフォームフィールドを更新するにはどうすればよいですか？

$(document).ready(function(){ 
 
    
 
    
 
    $("#submitid").on("click",function(){ 
 
     var Name = $("#name").val(); 
 
     console.log("Name is "+ Name); 
 
     var Email = $("#emailid").val(); 
 
     console.log("Email is "+Email); 
 
     var Contact = $("#contactno").val(); 
 
     $("#tableid").css("display","block"); 
 
     
 
     var newRow = "<tr><td>"+ Name +"</td> <td>"+ Email + "</td> <td>"+ Contact + "</td> <td>"; 
 
     $("table tbody").append(newRow + "<p data-placement=" +"top" + "data-toggle="+ "tooltip" + "title="+ " Edit" + "><"+ "button class="+ "btn btn-primary btn-xs" + "data-title=" +"Edit" + "data-toggle=" + "modal" + "data-target=" + "#edit" + "><span class=" + 
 
"glyphicon glyphicon-pencil" + "></span></button></p></td> </tr>"); 
 
     
 
     return false; 
 
     
 
     }); 
 
    });
<!DOCTYPE HTML> 
 
<html lang="en"> 
 

 
<head> 
 
    
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript" src="assgn9_2.js"></script> 
 
    </head> 
 
    
 
    <body> 
 
    
 
     
 
    <div class="container"> 
 
    
 
    <form id="myform"> 
 
    <div class="form-group"> 
 
     <label for="name">Name:</label> 
 
     <input type="text" class="form-control" id="name" placeholder="Enter Name"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="email">Email:</label> 
 
     <input type="email" class="form-control" id="emailid" placeholder="Enter Email"> 
 
    </div> 
 
     <div class="form-group"> 
 
     <label for="contact">Contact no:</label> 
 
     <input type="number" class="form-control" id="contactno" placeholder="Enter Phone"> 
 
    </div> 
 
    <div class="checkbox"> 
 
     <label><input type="checkbox"> Remember me</label> 
 
    </div> 
 
    <button type="submit" class="btn btn-default" id="submitid" >Submit</button> 
 
    </form> 
 
     
 
     <table class="table" id ="tableid" style="display : none"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Email</th> 
 
     <th>Contact</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     
 
    </tbody> 
 
    </table> 
 
     
 
</div> 
 
     
 
     
 
     
 
    </body> 
 
</html>

出典

2016-10-18 Rohit Sachdeva

答えて

0

を助けてください。しかし、ちょっとしたアドバイスがまず必要です。

1 - ユーザーがフォームを送信した後に入力タイプを変換するのではなく、jQueryValidateなどのライブラリを使用してフォームを送信する前にデータを検証し、必要な場合は戻る）を入力フィールドに入力して、再度入力し直します。

2 - これを行う方法はたくさんあるので、値を行に更新しなかったので、ここであなたを教育し、あなたの目的に合ったものを選択するのに役立つ有名なスニペットを配置します。

方法1. inputイベント最近のブラウザで

入力イベントを使用します。このイベントは、値がある値から別の値に変更されたときに、ユーザーがテキストフィールドに入力したり、貼り付けたり、元に戻したりするときに発生します。 （

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field. 
});

方法古いブラウザ2. keyupイベント

は、keyUpイベントを使用します。

はjQueryのjQueryの1.7で始まるこの

のようなことを行うには、上でバインドを置き換えますこれは、キーボードのキーが解放された後に起動します。このイベントは、「w」が解放されると入力値が変更され、keyupイベントが発生するため、 o "shift"キーが離されると、keyupイベントは発生しますが、入力は変更されません）。コンテキストメニューからユーザーを右クリックし、貼り付けた場合にも、この方法では発生しません：

$('#someInput').keyup(function() { 
    $(this).val() // get the current value of the input field. 
});

例：http://jsfiddle.net/pxfunc/5kpeJ/

今、あなたの答え：
JS/jQueryの

$(document).ready(function(){ 

    $("#submitid").on("click",function(){ 
     var Name = $("#name").val(); 
     console.log("Name is "+ Name); 
     var Email = $("#emailid").val(); 
     console.log("Email is "+Email); 
     var Contact = $("#contactno").val(); 
     $("#tableid").css("display","block"); 

     var newRow = "<tr><td>"+"<input type='text' placeholder='"+Name+ "'>"+Name+"</td> <td>"+"<input type='text' placeholder='"+Email + "'>"+Email+"</td> <td>"+"<input type='text' placeholder='"+Contact + "'>"+Contact+"<a href='#' id=''> DELETE</a> </td> <td>"; 
     $("table tbody").append(newRow); 


     return false; 

     }); 
    }); 


<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 

    <div class="container"> 

    <form id="myform"> 
    <div class="form-group"> 
     <label for="name">Name:</label> 
     <input type="text" class="form-control" id="name" placeholder="Enter Name"> 
    </div> 
    <div class="form-group"> 
     <label for="email">Email:</label> 
     <input type="email" class="form-control" id="emailid" placeholder="Enter Email"> 
    </div> 
     <div class="form-group"> 
     <label for="contact">Contact no:</label> 
     <input type="number" class="form-control" id="contactno" placeholder="Enter Phone"> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox"> Remember me</label> 
    </div> 
    <button type="submit" class="btn btn-default" id="submitid" >Submit</button> 
    </form> 

     <table class="table" id ="tableid" style="display : none"> 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Email</th> 
     <th>Contact</th> 
     </tr> 
    </thead> 
    <tbody> 

    </tbody> 
    </table> 

</div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button>

出典

2016-10-18 22:26:30

関連する問題

 関連する問題