Geek Answers Handbook

How can I add / remove a line with verification

How to add / remove a line with verification? Here is my working example. I want to install only verification.

http://jsfiddle.net/Bhuro/o6g60b57/1/

<div id="mainDiv"> <div class="one"> <div class="row"> <div class="input-field col s1"> <input type="text" class="sno" name="sno[]" value="1" readonly> <label for="Sr" >Sr</label> </div> <div class="input-field col s2"> <input id="item_code" type="text" name="item_code[]" onKeyUp="showHint(this.value)"> <label for="item_code" >Item Code</label> </div> <div class="input-field col s2"> <input id="item_name" type="text" name="item_name[]" value=" "> <label for="item_name" >Item Name</label> </div> <div class="input-field col s1 add"> <a href="#">Add</a> </div> <div class="input-field col s1 delete"> <a href="#"> Remove</a> </div> </div> </div> </div> <div class="row"> <div class="input-field col s2"> <button class="btn cyan waves-effect waves-light right" type="submit" name="submit" onClick="return purchasebill_validation_print();"/> Save <i class="mdi-content-send right"></i> </button> </div> </div> 
 $(document).ready(function () { $(".add").click(function () { var length = $('.one').length; var cloned = $(this).closest('.one').clone(true); cloned.appendTo("#mainDiv").find('.sno').val(length + 1); cloned.find(':input:not(".sno")').val(" "); cloned.find("input[onKeyUp*='showHint']").attr('onKeyUp', 'showHint' + (length + 1) + '(this.value)'); cloned.find("input[onkeydown*='showHintqty']").attr('onkeydown', 'showHintqty' + (length + 1) + '(this.value)'); cloned.find("input[id*='item_name']").attr('id', 'item_name' + (length + 1)); cloned.find("input[id*='quantity']").attr('id', 'quantity' + (length + 1)); cloned.find("input[id*='item_code']").attr('id', 'item_code' + (length + 1)); var parent = $(this).closest('.one'); calculate(parent); }); $('.delete').click(function () { if ($('.one').length == 1) { alert("This is default row and can't deleted"); return false; } var parent = $(this).closest('.one'); $(this).parents(".one").remove(); calculate(parent); // reset serial numbers again $('.one').each(function(index, item) { $(this).find('.sno').val(index + 1); $(this).find("input[onKeyUp*='showHint']").attr('onKeyUp', 'showHint' + (index + 1) + '(this.value)'); $(this).find("input[onkeydown*='showHintqty']").attr('onkeydown', 'showHintqty' + (index + 1) + '(this.value)'); $(this).find("input[id*='item_name']").attr('id', 'item_name' + (index + 1)); $(this).find("input[id*='quantity']").attr('id', 'quantity' + (index + 1)); $(this).find("input[id*='item_code']").attr('id', 'item_code' + (index + 1)); }) }); }); $(document).on('keyup', '.quantity, .net_rate, .Tax_Amount, .Discount_rate, .Discount_tax, .Gross_Amount', function () { var parent = $(this).closest('.one'); calculate(parent); }) function calculate(e){ var q = +$(e).find('.quantity').val(); var n = +$(e).find('.net_rate').val(); var t = +$(e).find('.tax').val(); var dr = +$(e).find('.Discount_rate').val(); var dt = +$(e).find('.Discount_tax').val(); var sum = 0; $(e).find('.Gross_Amount').val(q * n); $(e).find('.Tax_Amount').val((g = q * n * t / 100).toFixed(2)); $(e).find('.total').val(((q * n) + g).toFixed(2)); $('.total').each(function(i, e){ sum += +$(e).val(); }); var disc = $('.Discount_rate').val(); if (parseInt(disc) >= 0) { $('.Discount_tax').val(''); $('#Grand').val((sum - $('.Discount_rate').val()).toFixed(2)); } else { $('.Discount_rate').val(''); disc = $('.Discount_tax').val(); if ((disc) > 0) $('#Grand').val((sum - ((disc) * sum / 100)).toFixed(2)); else $('#Grand').val((sum).toFixed(2)); } };
+6
source share
1 answer

The code you want is a verification code

 /*Intercepts the form submision*/ $('#myform').submit(function(e) { /*sets send to true*/ var send = true; /*foreach required element*/ $('.required').each(function() { /*check if input is valid*/ if (!$(this).val()) { /*if not valid, don't send and mark red*/ send = false; $(this).css('background-color', 'red'); } else { /*if valid, take away mark*/ $(this).css('background-color', 'none'); } }); /*if don't send, prevent sending*/ if (!send) { e.preventDefault(); return false; } else { alert('sent'); } }); 

 $(document).ready(function() { $(".add").click(function() { var length = $('.one').length; var cloned = $(this).closest('.one').clone(true); cloned.appendTo("#mainDiv").find('.sno').val(length + 1); cloned.find(':input:not(".sno")').val(""); cloned.find("input[onKeyUp*='showHint']").attr('onKeyUp', 'showHint' + (length + 1) + '(this.value)'); cloned.find("input[onkeydown*='showHintqty']").attr('onkeydown', 'showHintqty' + (length + 1) + '(this.value)'); cloned.find("input[id*='item_name']").attr('id', 'item_name' + (length + 1)); cloned.find("input[id*='quantity']").attr('id', 'quantity' + (length + 1)); cloned.find("input[id*='item_code']").attr('id', 'item_code' + (length + 1)); var parent = $(this).closest('.one'); calculate(parent); }); $('.delete').click(function() { if ($('.one').length == 1) { alert("This is default row and can't deleted"); return false; } var parent = $(this).closest('.one'); $(this).parents(".one").remove(); calculate(parent); // reset serial numbers again $('.one').each(function(index, item) { $(this).find('.sno').val(index + 1); $(this).find("input[onKeyUp*='showHint']").attr('onKeyUp', 'showHint' + (index + 1) + '(this.value)'); $(this).find("input[onkeydown*='showHintqty']").attr('onkeydown', 'showHintqty' + (index + 1) + '(this.value)'); $(this).find("input[id*='item_name']").attr('id', 'item_name' + (index + 1)); $(this).find("input[id*='quantity']").attr('id', 'quantity' + (index + 1)); $(this).find("input[id*='item_code']").attr('id', 'item_code' + (index + 1)); }) }); }); $(document).on('keyup', '.quantity, .net_rate, .Tax_Amount, .Discount_rate, .Discount_tax, .Gross_Amount', function() { var parent = $(this).closest('.one'); calculate(parent); }) function calculate(e) { var q = +$(e).find('.quantity').val(); var n = +$(e).find('.net_rate').val(); var t = +$(e).find('.tax').val(); var dr = +$(e).find('.Discount_rate').val(); var dt = +$(e).find('.Discount_tax').val(); var sum = 0; $(e).find('.Gross_Amount').val(q * n); $(e).find('.Tax_Amount').val((g = q * n * t / 100).toFixed(2)); $(e).find('.total').val(((q * n) + g).toFixed(2)); $('.total').each(function(i, e) { sum += +$(e).val(); }); var disc = $('.Discount_rate').val(); if (parseInt(disc) >= 0) { $('.Discount_tax').val(''); $('#Grand').val((sum - $('.Discount_rate').val()).toFixed(2)); } else { $('.Discount_rate').val(''); disc = $('.Discount_tax').val(); if ((disc) > 0) $('#Grand').val((sum - ((disc) * sum / 100)).toFixed(2)); else $('#Grand').val((sum).toFixed(2)); } }; /*Intercepts the form submision*/ $('#myform').submit(function(e) { /*sets send to true*/ var send = true; /*foreach required element*/ $('.required').each(function() { /*check if input is valid*/ if (!$(this).val()) { /*if not valid, don't send and mark red*/ send = false; $(this).css('background-color', 'red'); } else { /*if valid, take away mark*/ $(this).css('background-color', 'none'); } }); /*if don't send, prevent sending*/ if (!send) { e.preventDefault(); return false; } else { alert('sent'); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <form id='myform' method='post'> <div id="mainDiv"> <div class="one"> <div class="row"> <div class="input-field col s1"> <input type="text" class="sno" name="sno[]" value="1" readonly> <label for="Sr">Sr</label> </div> <div class="input-field col s2"> <input id="item_code" type="text" name="item_code[]" onKeyUp="showHint(this.value)" class='required'> <label for="item_code">Item Code</label> </div> <div class="input-field col s2"> <input id="item_name" type="text" name="item_name[]" class='required'> <label for="item_name">Item Name</label> </div> <div class="input-field col s1 add"> <a href="#">Add</a> </div> <div class="input-field col s1 delete"> <a href="#"> Remove</a> </div> </div> </div> </div> <div class="row"> <div class="input-field col s2"> <button class="btn cyan waves-effect waves-light right" type="submit" name="submit" onClick="return purchasebill_validation_print();" />Save<i class="mdi-content-send right"></i> </button> </div> </div> </form>
+1
source

More articles:


All Articles