Dynamic added controls in JQuery -
i create 2 textboxes
dynamically , append table row. need validate textboxes
if empty or having values.if empty means need highlight textboxes. if press validatecontrols button
,that particular row textboxes
need highlighted if empty
. if press validateallcontrols
means need highlight textboxes
in table if empty.
how this? please refer fiddle link
<script> $(document).ready(function () { $("#inputid").click(function () { var table = $('table#mytable'); var row = "<tr><td> <input name='name' id='name' type='text' />* </td>" + "<td> <input name='email' id='email' type='text' /> </td>" + "<td> <input id='btnadd' type='button' value='validatecontrols' /> "+ "</tr>"; var col = $('<td style="width:100px;" align="left"></td>'); table.append(row); }); }); </script> body <form id="form1" runat="server"> <input type="button" id="inputid" value="add controls"/> <input type="button" id="validateall" value="validate controls"/> <table id="mytable"></table> </form>
try this
$('#mytable').on('click', '#btnadd', function () { $(this).parents('tr').find('input:text').each(function () { if ($(this).val() == '') $(this).css('border', '1px solid red') else $(this).css('border', '1px solid grey') }); }); $('#form1').on('click', '#validateall', function () { $('#mytable').find('input:text').each(function () { if ($(this).val() == '') $(this).css('border', '1px solid red') else $(this).css('border', '1px solid grey') }); });
Comments
Post a Comment