I am trying to write a single-page app with the below details, but unable to complete all. (shared the code below)
- Header input fields.
- Items input(can be using modal) and View(as table)
- Sub-items input(using modal) and view(as table) , each items can or cannot have sub-items.
- Create/Submit button will send all data to an end-point using Ajax.
sub table data will be added by input form through a bootstrap modal.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form>
<table class="table">
<tbody>
<tr>
<td><input type="text" class="form-control" id='txtCustomerNumb' placeholder="Customer Number" /></td>
<td><input type="text" class="form-control" id='txtCustomerName' placeholder="Customer Name" /></td>
<td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
<td></td>
</tr>
<tr>
<td><input type="text" class="form-control" id='txtDriverName' placeholder="Driver Name" /></td>
<td><input type="text" class="form-control" id='txtDriverContact' placeholder="Driver Contact" /></td>
<td><input type="text" class="form-control" id='txtVehNumber' placeholder="Vehicle No." /></td>
<td></td>
</tr>
<tr>
<td>
<select class="form-control" id="txtDeliverTo" placeholder="Exit Point">
<option value="">Select Exit Point</option>
<option value="Exit_Point_1">Exit Point 1</option>
<option value="Exit_Point_2">Exit Point 2</option>
<option value="Exit_Point_3">Exit Point 3</option>
</select>
</td>
<td><input type="text" class="form-control" id='txtDeliverTo' placeholder="Deliver To" /></td>
<td><input type="text" class="form-control" id='txtExitType' placeholder="Type Of Exit" /></td>
<td></td>
</tr>
</tbody>
</table>
<div class="form-row">
<div class="form-group col-md-4">
<label>Name:</label>
<input type="text" name="name" class="form-control" value="Smith" required="">
</div>
<div class="form-group col-md-6">
<label>Email:</label>
<input type="text" name="email" class="form-control" value="smith@abc.com" required="">
</div>
<div class="form-group col-md-2" style="padding-top: 23px;">
<button type="submit" class="btn btn-success save-btn">Add</button>
</div>
</div>
</form>
<br/>
<table class="table table-bordered data-table">
<thead>
<th>Name</th>
<th>Email</th>
<th width="200px">Action</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript">
$("form").submit(function(e){
e.preventDefault();
var name = $("input[name='name']").val();
var email = $("input[name='email']").val();
$(".data-table tbody").append("<tr data-name='"+name+"' data-email='"+email+"'><td>"+name+"</td><td>"+email+"</td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>");
$("input[name='name']").val('');
$("input[name='email']").val('');
});
$("body").on("click", ".btn-delete", function(){
$(this).parents("tr").remove();
});
$("body").on("click", ".btn-edit", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="'+name+'">');
$(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="'+email+'">');
$(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>")
$(this).hide();
});
$("body").on("click", ".btn-cancel", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-update").remove();
$(this).parents("tr").find(".btn-cancel").remove();
});
$("body").on("click", ".btn-update", function(){
var name = $(this).parents("tr").find("input[name='edit_name']").val();
var email = $(this).parents("tr").find("input[name='edit_email']").val();
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").attr('data-name', name);
$(this).parents("tr").attr('data-email', email);
$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-cancel").remove();
$(this).parents("tr").find(".btn-update").remove();
});
</script>
</body>
</html>from insert items in table and Sub table using Jquery
No comments:
Post a Comment