How to create rows in tables by append() that still be able to operate with math operations?
Now I have row in HTML including netto price, amount, discount, tax rate and brutto price - brutto price is shown after input netto and amount, tax is selected from , but it's working only for HTML generated row, not for jQuery append. How to fix it?
HTML
<table class="table table-striped table-bordered" id="invoice">
<thead>
<tr>
<th class="col-xs-0">Lp.</th>
<th class="col-xs-4">Towar/usługa</th>
<th class="col-xs-1">PKWiU</th>
<th class="col-xs-1">Ilość</th>
<th class="col-xs-1">Jedn.</th>
<th class="col-xs-1">Cena netto</th>
<th class="col-xs-1">Rabat</th>
<th class="col-xs-2">VAT</th>
<th class="col-xs-1">Cena brutto</th>
</tr>
</thead>
<tbody>
<tr>
<th><p class="form-control-static">1.</p></th>
<td>
<div class="form-group input-sm">
<input type="text" name="product[]" class="form-control" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="pkwiu[]" class="form-control">
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="quantity[]" class="form-control quantity" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="unit[]" class="form-control">
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="nettoprice[]" class="form-control nettoprice" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="discount[]" class="form-control discount">
</div>
</td>
<td>
<div class="form-group">
<div class="col-xs-12">
<select class="form-control vatrate" name="vatrate[]" form="invoice">
<option value="0">zw.</option>
<option value="1.00">0%</option>
<option value="1.05">5%</option>
<option value="1.08">8%</option>
<option value="1.23" selected>23%</option>
</select>
</div>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">
</div>
</td>
</tr>
</tbody>
</table>
jQuery
var x = 2;
$("#addProduct").click(function(){
$row = '<tr>' +
'<th>'+x+'.</th>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="product[]" class="form-control" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="pkwiu[]" class="form-control">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="quantity[]" class="form-control quantity" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="unit[]" class="form-control">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="nettoprice[]" class="form-control nettoprice" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="discount[]" class="form-control discount">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group">' +
'<div class="col-xs-12">' +
'<select class="form-control vatrate" name="vatrate[]" form="invoice">' +
'<option value="0">zw.</option>' +
'<option value="1.00">0%</option>' +
'<option value="1.05">5%</option>' +
'<option value="1.08">8%</option>' +
'<option value="1.23" selected>23%</option>' +
'</select>' +
'</div>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">' +
'</div>' +
'</td>' +
'</tr>';
$('#invoice > tbody:last').append($row);
x=x+1;
});
$("#deleteProduct").click(function(){
$("tbody > tr:last").remove();
if(x > 1) {
x = x - 1;
}
});
$('select').on('change', function () {
var vat = this.selectedOptions[0].value;
console.log(vat);
});
$(":input").on('input', function(){
var $tr = $(this).closest("tr");
var netto = parseFloat($tr.find('.nettoprice').val()),
quantity = parseFloat($tr.find('.quantity').val()),
vat = parseFloat($tr.find('.vatrate').val()),
discount = parseFloat($tr.find('.discount').val());
if(isNaN(discount)) {
discount = 1;
} else {
discount = discount / 100;
discount = 1 - discount;
}
if(vat == 0 || vat == -1) {
vat = 1;
}
var v = '';
console.log(netto, quantity, vat, discount);
if(!isNaN(netto) && !isNaN(vat) && !isNaN(quantity)) {
v = netto * quantity * discount * vat;
v = v.toFixed(2);
}
$tr.find('.bruttoprice').val(v.toString());
});
Remove the last or make it :last-child:
$('#invoice > tbody').append($row);
$('#invoice > tbody:last-child').append($row);
Either remove the :last from it:
$('#invoice > tbody').append($row);
or use it with .after() with the :last tr of the table:
$('#invoice > tbody tr:last').after($row);
Okay, I found mistake - function works fine now.
$(document).on('input', ':input', function(){
/* Foo */
});
Related
I'm trying to solve a problem with my POS module on Laravel 8 that removes an item from a dropdown once it is selected. The items from the dropdown are from a database table. My POS module consists of a table with Name (dropdown), Quantity, Price, and Total with the ability to add more rows. Here's the code I'm working on right now as well as screenshot of my POS.
pos.blade.php
<tbody class="addMoreProduct">
<tr>
<td>1</td>
<td>
<select name="product_id[]" id="product_id" class="form-control product_id">
<option value="s" selected>Select Item</option>
#foreach($products as $product)
<option data-price="{{ $product->price }}"
value="{{ $product->id }}">{{ $product->name }}
</option>
#endforeach
</select>
</td>
<td>
<input type="text" name="quantity[]" id="quantity" class="form-control quantity" required>
</td>
<td>
<input type="number" name="price[]" id="price" step=".01" class="form-control price" readonly>
</td>
<td>
<input type="number" name="total_amount[]" id="total_amount" step=".01" class="form-control total_amount" readonly>
</td>
</tr>
</tbody>
<script>
//Add a row
$('.add_more').on('click', function(){
var product = $('.product_id').html();
var numberofrow = ($('.addMoreProduct tr').length - 0) + 1;
var tr = '<tr><td class="no">' + numberofrow + '</td>' +
'<td><select class="form-control product_id" name="product_id[]">' + product +
'</select></td>' +
'<td><input type="number" name="quantity[]" class="form-control quantity"></td>' +
'<td><input type="number" name="price[]" class="form-control price" readonly></td>' +
'<td><input type="number" name="total_amount[]" class="form-control total_amount" readonly></td>' +
'<td><a class="btn btn-danger btn-sm delete rounded-circle"><i class="fa fa-times-circle"></i></a></td>';
$('.addMoreProduct').append(tr);
});
//Delete a row
$('.addMoreProduct').delegate('.delete', 'click', function(){
$(this).parent().parent().remove();
});
</script>
I did try looking for this problem and came across these code, I tried, but unfortunately it did not solve my problem. Any help would be appreciated. Thank you.
var selectobject = document.getElementById("product_id");
for (var i=0; i<selectobject.length; i++) {
if (selectobject.options[i].value == 's')
selectobject.remove(i);
}
var index = $('#product_id').get(0).selectedIndex;
$('#product_id option:eq(' + index + ')').remove();
I have following JavaScript code that used to append the entire records to MySQL table.
$('#request_table').append('<tr>' +
'<td ><span id="product" >' + jData.data[0].item_name + '</span>' +
'<input type="hidden" id="item_id[]" name="item_id[]" value="' + jData.data[0].item_id
+ '">' +
'</td>' +
'<td class="text-center">' + jData.data[0].qty + '</td>' +
'<td class="text-center"><input class="form-control text-center rquantity" data-qty-bal="' + jData.data[0].qty + '" autofocus required type="number" step="any" id="qty[]" name="qty[]" ></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus required type="number" step="any" id="sales_price[]" name="sales_price[]" value="' + jData.data[0].unit_price + '"></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus type="number" step="any" id="discount_price[]" name="discount_price[]" ></td>' +
'<td class="text-center" ><i class="fa fa-remove remove" style="cursor: pointer"></i>
</td>' +
'</tr>');
But the above function only append the first record to the table. How to change the code with foreach statement to append the entire records.I used Codeigniter framework.
Can anyone help me ?
You can use forEach like this:
jData.data.forEach(data => {
$('#request_table').append('<tr>' +
'<td ><span id="product" >' + data.item_name + '</span>' +
'<input type="hidden" id="item_id[]" name="item_id[]" value="' + data.item_id
+ '">' +
'</td>' +
'<td class="text-center">' + data.qty + '</td>' +
'<td class="text-center"><input class="form-control text-center rquantity" data-qty-bal="' + data.qty + '" autofocus required type="number" step="any" id="qty[]" name="qty[]" ></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus required type="number" step="any" id="sales_price[]" name="sales_price[]" value="' + data.unit_price + '"></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus type="number" step="any" id="discount_price[]" name="discount_price[]" ></td>' +
'<td class="text-center" ><i class="fa fa-remove remove" style="cursor: pointer"></i>
</td>' +
'</tr>');
})
You accesing only to jData.data[0].* (just the first index element)
you need an iteration eg: based on a index i and then accessing by
jData.data[i].qty ,
jData.data[i].unit_price,
....
pushData = [];
//+ button when clicked
function myFunction() {
var custOfficeId = document.getElementById('customOfficeId').value;
var custOfficeName = $("#customOfficeId option:selected").text();
var fromDate = document.getElementById('fromDate').value;
var toDate = document.getElementById('toDate').value;
var consignmentNo = document.getElementById('consignmentNo').value;
var selectionName = "A";
var selectionId = 1;
var selecOff = {
custOfficeId,
custOfficeName,
fromDate,
toDate,
consignmentNo,
selectionId,
selectionName
};
console.log(selecOff);
pushData.push(selecOff);
console.log(pushData);
populateSelectionCustomTable();
}
function populateSelectionCustomTable() {
$("#tempTable tbody").html("");
for (var i = 0; i < pushData.length; i++) {
var r = pushData[i];
$("#tempTable tbody")
.append(
"<tr>" +
"<td>" +
r.custOfficeName +
"</td><td>" +
r.fromDate +
"</td><td>" +
r.toDate +
"</td>" +
"<td>" +
r.consignmentNo +
"</td>" +
"<td>" +
r.selectionName +
"</td>" +
"<td>" +
"<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
i +
"' class='deleteIcon'/>" +
"</td></tr></tbody>");
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group row">
<div class="col-md-4">
<label>Custom Office</label>
</div>
<div class="col-md-2">
<label>From Date</label>
</div>
<div class="col-md-2">
<label>To Date</label>
</div>
<div class="col-md-4">Consignment No</div>
<div class="col-md-4">
<select class="form-control" id="customOfficeId" required
name="customOfficeId" >
<option value="" disabled selected>Choose</option>
<option value=1>Office 1</option>
<option value=2>Office 2</option>
</select>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate"
onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate"
name="toDate" onfocus="showNdpCalendarBox('toDate')" required />
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="consignmentNo"
required name="consignmentNo">
</div>
<div class="col-md-1">
<button onclick="myFunction()">+</button>
</div>
</div>
<table class="table table-bodered" id="tempTable">
<thead>
<th>Custom Office</th>
<th>From Date</th>
<th>To Date</th>
<th>Consignment No</th>
<th>Selection Name</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I have added the "required" attribute in each of the input field and in select options above in html.But if i even didn't enter any data and click plus button it is getting pushed in table rather it should show me the validation required error. In "select" also i added the required field but the default is getting added in table automatically.How can i make this html5 required validation working here?
You can use checkValidity() to check if the fields in a form are valid.
https://www.w3schools.com/js/js_validation_api.asp
pushData = [];
//+ button when clicked
function myFunction() {
var custOfficeId = document.getElementById('customOfficeId').value;
var custOfficeName = $("#customOfficeId option:selected").text();
var fromDate = document.getElementById('fromDate').value;
var toDate = document.getElementById('toDate').value;
var consignmentNo = document.getElementById('consignmentNo').value;
var selectionName = "A";
var selectionId = 1;
var selecOff = {
custOfficeId,
custOfficeName,
fromDate,
toDate,
consignmentNo,
selectionId,
selectionName
};
console.log(selecOff);
if (document.getElementById("new-row").checkValidity()) {
pushData.push(selecOff);
console.log(pushData);
populateSelectionCustomTable();
} else {
alert('New row data is invalid or incomplete');
}
}
function populateSelectionCustomTable() {
$("#tempTable tbody").html("");
for (var i = 0; i < pushData.length; i++) {
var r = pushData[i];
$("#tempTable tbody")
.append(
"<tr>" +
"<td>" +
r.custOfficeName +
"</td><td>" +
r.fromDate +
"</td><td>" +
r.toDate +
"</td>" +
"<td>" +
r.consignmentNo +
"</td>" +
"<td>" +
r.selectionName +
"</td>" +
"<td>" +
"<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
i +
"' class='deleteIcon'/>" +
"</td></tr></tbody>");
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<form id="new-row">
<div class="form-group row">
<div class="col-md-4">
<label>Custom Office</label>
</div>
<div class="col-md-2">
<label>From Date</label>
</div>
<div class="col-md-2">
<label>To Date</label>
</div>
<div class="col-md-4">Consignment No</div>
<div class="col-md-4">
<select class="form-control" id="customOfficeId" required name="customOfficeId">
<option value="" disabled selected>Choose</option>
<option value=1>Office 1</option>
<option value=2>Office 2</option>
</select>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate" name="toDate" onfocus="showNdpCalendarBox('toDate')" required />
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="consignmentNo" required name="consignmentNo">
</div>
</form>
<div class="col-md-1">
<button onclick="myFunction()">+</button>
</div>
</div>
<table class="table table-bodered" id="tempTable">
<thead>
<th>Custom Office</th>
<th>From Date</th>
<th>To Date</th>
<th>Consignment No</th>
<th>Selection Name</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I am currently working on a web app that lets the user create a survey like Google forms using asp.net C#. Right now having trouble getting the id of the generated drop down list that's why I can't put any field in the new rows here is the code for the form:
<div class="form-group" style="margin:auto; width:80%;">
<form name="add_question" id="add_question">
<asp:Label ID="Label1" runat="server" Text="Survey Title: " Font-Size="Large"></asp:Label>
<input type="text" name="title" id="title" class="form-control question_list" placeholder="Enter Survey Title"/>
<asp:Label ID="Label2" runat="server" Text="Description: " Font-Size="Large"></asp:Label>
<br>
<textarea rows="4" cols="100%" name="description" id="description" placeholder="Enter description"></textarea>
<table class="table" id="dynamic_field">
<tr>
<th style="width: 50%">Question</th>
<th style="width: 15%">Type of Question</th>
<th style="width: 30%">Fields</th>
<th style="width: 5%">Remove</th>
</tr>
<tr id="row1">
<td style="width: 50%"><input type="text" name="question1" id="question1" class="form-control question_list" placeholder="Enter question"/></td>
<td style="width: 15%"><select name="type1" id="type1" class="dropdown">
<option selected></option>
<option value="1">Multiple Choice</option>
<option value="2">CheckBox</option>
<option value="3">Short Sentence</option>
<option value="4">Paragraph</option>
<option value="5">Line Scale</option>
</select></td>
<td style="width: 30%"></td>
<td style="width: 5%"> <button name="remove" id="1" class="btn btn-danger btn_remove"> X </button></td>
</tr>
</table>
<button type="button" name="add" id="add" class="btn btn-warning" > Add Question </button>
</form>
<button type="button" name="submit" id="submit" class="btn btn-success" > Submit </button>
</div>
And here is the code for generating the fields of the survey I'm making:
<script>
var i = 1;
$("#add").click(function () {
i++;
$("#dynamic_field").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
+ i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type'
+ i + '" id="type' + i + '">'
+ '<option selected></option>'
+ '<option value="1">Multiple Choice</option>'
+ '<option value="2">CheckBox</option>'
+ '<option value="3">Short Sentence</option>'
+ '<option value="4">Paragraph</option>'
+ '<option value="5">Line Scale</option>'
+ '</select></td><td></td><td><button name="remove' + i + '" id="'
+ i + '" class="btn btn-danger btn_remove"> X </button> </td> </tr> ');
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr("id");
$("#row" + button_id + "").remove();
});
$('#type1').change(function () {
var x = 1;
if ($(this).val() == '3') {
$('#myInput' + x + '').remove();
var row = document.getElementById("row1");
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><input id="myInput' + x + '" type="text" style="width: 80%" /></td>';
row.deleteCell(3);
}
else if ($(this).val() == '4') {
$('#myInput' + x + '').remove();
var row = document.getElementById("row1");
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><textarea rows="2" cols="40" name="description" id="myInput' + x + '"></textarea></td>';
row.deleteCell(3);
} else {
$('#myInput'+x+'').remove();
}
});
</script>
I'm also open for any ideas that can make this easier to create.
Create table like
<table class="table" id="dynamic_field">
<thead>
<tr>
<th style="width: 50%">Question</th>
<th style="width: 15%">Type of Question</th>
<th style="width: 30%">Fields</th>
<th style="width: 5%">Remove</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
When appending rows, append to tbody.
$("#add").click(function () {
i++;
$("#dynamic_field tbody").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
+ i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type'
+ i + '" id="type' + i + '">'
+ '<option selected></option>'
+ '<option value="1">Multiple Choice</option>'
+ '<option value="2">CheckBox</option>'
+ '<option value="3">Short Sentence</option>'
+ '<option value="4">Paragraph</option>'
+ '<option value="5">Line Scale</option>'
+ '</select></td><td></td><td><button name="remove' + i + '" id="'
+ i + '" class="btn btn-danger btn_remove"> X </button> </td> </tr> ');
});
Change change event like this
$('#dynamic_field').on('change','[id^=type]',function () {
var x = 1;
if ($(this).val() == '3') {
$(this).closest('tr').find('[id^=myInput]').remove();
var row = $(this).closest('tr');
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><input id="myInput' + x + '" type="text" style="width: 80%" /></td>';
row.deleteCell(3);
}
else if ($(this).val() == '4') {
$(this).closest('tr').find('[id^=myInput]')
var row = $(this).closest('tr');
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><textarea rows="2" cols="40" name="description" id="myInput' + x + '"></textarea></td>';
row.deleteCell(3);
} else {
$(this).closest('tr').find('[id^=myInput]')
}
});
I am using Jquery validate plugin for doing my form validation.
In my form, I had an usecase of adding rows dynamically upon clicking an add button.
Adding new row, will result in generating a new name for the row (new name is appending a number to the original name).
I have written the validation logic, which will validate the first standard row itself, but the subsequent addition of rows will not be getting validated.
Need help in making validation for these dynamic Names w.r.t added rows.
Below is my html code, where standard row was mentioned with the class and Names to the elements in the row.
The js file contains the logic to add the rows dynamically and the validation logic.
Html:
<tbody>
<tr>
<td>
<div class="uriDiv input-group">
<input type="text" name="uriName" class="common form-control authUrl"
id="uriName" placeholder="URL for the Policy" />
</div>
</td>
<td>
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message
code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
</td>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label> <input type="radio" class="common anyuser authPermission"
value="anyUser" name="authPermission" id="anyUser" disabled="disabled">Any
User
</label>
</div>
<div class="uriDiv radio radio-input">
<label> <input type="radio" class="common groupuser authPermission"
value="groupUser" name="authPermission" id="groupUser" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled"
class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
</td>
<td><button type="button"
class="btn btn-primary delete-but-grid">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr>
<td colspan="4">
<button type="button" id="addBtn"
class="btn add-but-grid glyphicon glyphicon-plus-sign"></button>
</td>
</tr>
</tbody>
js:adding new rows
$("#addBtn").click(function() {
var divAdd = '
<tr id=' + dynamicCount + '>
<td>
<div class="uriDiv input-group"><input type="text" name="uriName' + dynamicCount + '" class="common form-control" id="uriName' + dynamicCount + '" placeholder="URL for the Policy"/></div>
</td>
'
divAdd = divAdd + '
<td>
<div class="uriDiv input-group">
<select class="common authSelect form-control" id="authType' + dynamicCount + '" name="authType' + dynamicCount + '">
<option value="">Select Auth Type </option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
</td>
'
divAdd = divAdd + '
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left"><label> <input type="radio" class="common anyuser authPermission" value="anyUser" disabled="disabled" name="authPermission' + dynamicCount + '" id="anyUser">Any User</label></div>
'
divAdd = divAdd + '
<div class="uriDiv radio radio-input"> <label> <input type="radio" class="common groupuser authPermission" value="groupUser" disabled="disabled" name="authPermission' + dynamicCount + '"id="groupUser"><input type="text" disabled="disabled" name="authPermissionValue' + dynamicCount + '" class="common form-control-placeHolder" id="authPermissionValue' + dynamicCount + '" placeholder="Enter custom Permissions - Comma separated" /></label></div>
</div>
</td>
'
divAdd = divAdd + '
<td><button type="submit" id=' + dynamicCount + ' class="uriDelte btn btn-primary delete-but-grid"><span class="glyphicon glyphicon-remove"></span></button></td>
</tr>
'
$('#uriInfo tr:last').before(divAdd);
dynamicCount++;
});
js validation: some part of it.
$("#policy-form").validate({
rules:{
uriName:{
required: true
},
authType:{
required: true
},
authPermission:{
required: true
},
},
Need help in getting the validation for dynamic rows.
Thanks.
Normally Jquery validation works by input 'Name'..here in this case as my input rows can be dynamically added,i created a custom class validation method, which does the validation based on the class name, instead of the row name..so by making these changes, my Jquery validation is working fine..below is my new code...
validation :
$.validator.addClassRules({
authUrl:{ // here authUrl is one of the class Name for the input row..
crequiredUrl:true
},
authSelect:{
crequiredSelect:true
},
authPermission:{
crequiredPermission:true
},
authPermissionMulti:{
crequiredPermCust:true
}
});
$.validator.addMethod('crequiredUrl', $.validator.methods.required,
'Please enter the Url');
$.validator.addMethod('crequiredSelect', $.validator.methods.required,
' Auth Type for policy is required');
$.validator.addMethod('crequiredPermission', $.validator.methods.required,
' AuthPermission for policy is required');
$.validator.addMethod('crequiredPermCust', $.validator.methods.required,
' Custom AuthPermissions cannot be empty');
$("#policy-form").validate({
rules:{
targetEnv:{
required:true
},
domainName: {
required:true
},
authSchemaType: {
required: true
},
headersRequired: {
required: true
},
headersReqEle: {
required: true
// other form validation rules..
my dynamic row add/delete code:
$('#headerCheck').hide();
var dynamicCount=0;
// var validateArray=new Array('uriName','authType','authPermission','authPermissionValue');
$("#addBtn").click(function() {
var divAdd = '<tr id=' + dynamicCount + '><td><div class="uriDiv input-group"><input type="text" name="uriName' + dynamicCount + '" class="common form-control authUrl" id="uriName' + dynamicCount + '" placeholder="URL for the Policy"/></div></td>'
divAdd = divAdd + '<td><div class="uriDiv input-group"><select class="common authSelect form-control" id="authType' + dynamicCount + '" name="authType' + dynamicCount + '"><option value="">Select Auth Type </option><option value="RACF">RACF</option><option value="LDAP">LDAP</option></select></div></td>'
divAdd = divAdd + '<td><div class="auth-permission-rd"><div class="uriDiv radio radio-left"><label> <input type="radio" class="common anyuser authPermission" value="anyUser" disabled="disabled" name="authPermission' + dynamicCount + '" id="anyUser">Any User</label></div>'
divAdd = divAdd + '<div class="uriDiv radio radio-input"> <label> <input type="radio" class="common groupuser authPermission" value="groupUser" disabled="disabled" name="authPermission' + dynamicCount + '"id="groupUser"><input type="text" disabled="disabled" name="authPermissionValue' + dynamicCount + '" class="common form-control-placeHolder authPermissionMulti" id="authPermissionValue' + dynamicCount + '" placeholder="Enter custom Permissions - Comma separated" /></label></div></div></td>'
divAdd = divAdd + '<td><button type="submit" id=' + dynamicCount + ' class="uriDelte btn btn-primary delete-but-grid"><span class="glyphicon glyphicon-remove"></span></button></td></tr>'
$('#uriInfo tr:last').before(divAdd);
dynamicCount++;
});
for my jsp page, pls refer to my question..
cheers :)