Dynamically add table row with input fields and validation
Dynamically add table row with input fields and validation
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="" method = "POST">
</form>
<table>
<tr class="" id ="row_1">
<td>
<INPUT TYPE="text" NAME="add_stop_sale_from_date[]" VALUE="" id="add_stop_sale_from_date1" />
</td>
<td>
<INPUT TYPE="text" NAME="add_stop_sale_to_date[]" VALUE="" id="add_stop_sale_to_date1" />
</td>
</tr>
<tr>
<td><a href="javascript:void(0);" class="add_button" id="add_button" title="Add field">Add Row</a></td>
<td> <a href="javascript:void(0);" class="remove_button" id="remove_button" title="Remove field">Remove Row</a>
</td>
</tr>
<tr>
<td>
<input type="button" id="submit_button" value="Save" name="save_button">
</td>
</tr>
</table>
JavaScript
$(document).ready(function(){
$('#submit_button').click(function(){
var count = $(":input[id^='add_stop_sale_to_date']").length;
//alert(count);
for(var x=1;x<=count;x++){
var from_date = $('#add_stop_sale_from_date'+x).val();
var to_date = $('#add_stop_sale_to_date'+x).val();
if(from_date=="" || from_date==null){
alert("Select From Date");
$('#add_stop_sale_from_date'+x).focus();
return false;
}if(to_date=="" || to_date==null){
alert("Select To Date");
$('#add_stop_sale_to_date'+x).focus();
return false;
}
}
alert("Form Will be Submitted");
return true;
});
var maxField = 5;
var x = 1;
if(x==1){
$('#remove_button').hide();
}
$('#add_button').click(function(){
if(x>=1){
$('#remove_button').show();
}
if(x < maxField){
x++;
$("#row_"+(x-1)).closest( "tr" ).after('<tr id="row_'+x+'"><td><INPUT class="input_style1" TYPE="text" NAME="add_stop_sale_from_date[]" VALUE="" id="add_stop_sale_from_date'+x+'"/></td><td><INPUT class="input_style1" TYPE="text" NAME="add_stop_sale_to_date[]" VALUE="" id="add_stop_sale_to_date'+x+'"/></td><td></td><td> </td></tr>');
}
});
$('#remove_button').click(function(){
$('#row_'+x+'').remove();
x--;
if(x == 1){
$('#remove_button').hide();
}
});
});