How to update the form fields in the Bootstrap Modal?
Question
I have been able to create a form with fields Name, Email and Contact number. When I click on submit, I am displaying the entered values in a table with an Edit button,Now I want to configure the Bootstrap modal with the current values should appear on the Bootstrap modal. And once I edit it , and click update it shoould reflect on the table elements. Please help
$(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>
1 answers
solution1
0 2016-10-18 22:26:30
I've develop a Jsfiddle for you. But just a few advices first.
1 - The best way to do this is not transforming the input type after the user submitted the form, instead of this, use some library like jQueryValidate to validate the data before submit the form and if its necessary retrieve(step back) to the input fields to retype again.
2 - I did not updated the values to the row because there are many ways to do this, so I will dispose a famous snippet here that can educate you and helps YOU to choose what fits well for your purpose.
Method 1. input event
In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.
In jQuery do that like this
starting with jQuery 1.7, replace bind with on:
$('#someInput').on('input', function() {
$(this).val() // get the current value of the input field.
});
Method 2. keyup event
For older browsers use the keyup event (this will fire once a key on the keyboard has been released, this event can give a sort of false positive because when "w" is released the input value is changed and the keyup event fires, but also when the "shift" key is released the keyup event fires but no change has been made to the input.). Also this method doesn't fire if the user right-clicks and pastes from the context menu:
$('#someInput').keyup(function() {
$(this).val() // get the current value of the input field.
});
examples: http://jsfiddle.net/pxfunc/5kpeJ/
Now your answer:
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">×</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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.