如何在引导模式中更新表单字段

How to update the form fields in the Bootstrap Modal?

本文关键字：更新 表单 字段 模式      更新时间：2023-09-26

我已经能够创建一个字段名称，电子邮件和联系电话的形式。当我点击提交，我在一个表中显示输入的值与编辑按钮，现在我想配置引导模态与当前值应该出现在引导模态。一旦我编辑它，并单击更新，它应该反映在表元素。请帮助

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

我为您开发了一个jsp。但先给我一些建议。

1 -最好的方法是在用户提交表单后不转换输入类型，而是使用jQueryValidate之类的库在提交表单之前验证数据，如果有必要检索(后退一步)到输入字段重新键入。

2 -我没有将值更新到行，因为有很多方法可以做到这一点，所以我将在这里处理一个著名的代码片段，它可以教育你并帮助你选择适合你的目的。

方法1。

在现代浏览器中使用input事件。当用户在文本字段中输入，粘贴，撤消，基本上任何时候值从一个值改变到另一个值时，该事件将触发。

在jQuery中这样做

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

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

方法2。

对于旧的浏览器使用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;
        });
    });

相关文章：