如何更新引导模式中的表单字段？答案

【问题标题】：How to update the form fields in the Bootstrap Modal?如何更新引导模式中的表单字段？
【发布时间】：2016-10-18 21:13:14
【问题描述】：

我已经能够创建一个包含名称、电子邮件和联系号码字段的表单。当我单击提交时，我在带有编辑按钮的表中显示输入的值，现在我想配置 Bootstrap 模式，当前值应该出现在 Bootstrap 模式上。一旦我编辑它，然后单击更新它应该反映在表格元素上。请帮忙

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

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

我为您开发了一个Jsfiddle。但首先只是一些建议。

1 - 最好的方法不是在用户提交表单后转换输入类型，而是使用像 jQueryValidate 这样的库在提交表单之前验证数据，如果有必要的话检索（后退）到输入字段以再次重新输入。

2 - 我没有更新行的值，因为有很多方法可以做到这一点，所以我将在这里放置一个著名的 sn-p 可以教育你并帮助你选择适合你的目的。

方法一。input事件

在现代浏览器中使用输入事件。当用户在文本字段中键入、粘贴、撤消，基本上任何时候值从一个值更改为另一个值时，都会触发此事件。

在 jQuery 中这样做

从 jQuery 1.7 开始，将 bind 替换为 on：

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

方法二。keyup事件

对于较旧的浏览器，使用 keyup 事件（一旦键盘上的键被释放，该事件就会触发，此事件可能会产生一种误报，因为当“w”被释放时，输入值会改变并且 keyup 事件会触发，但当“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;

        });
    });

HTML

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

【讨论】：