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 :)
Related
I have a few inputs with existing value. I would like to replace inputs by a select with the same options but retain the original value.
html:
<span id="span1">
<input type="text" id="input1" value="1" >
</span>
<span id="span2">
<input type="text" id="input2" value="2" >
</span>
<span id="span3">
<input type="text" id="input3" value="3" >
</span>
This what I've tried for now:
var inputs = ['input1', 'input2', 'input3'];
$.each(inputs, function(key, inputname) {
$('#'+inputname)
.replaceWith('<select id="'+inputname+'" name="'+inputname+'">' +
'<option value="1">0</option>' +
'<option value="1">1</option>' +
'<option value="2">2</option>' +
'<option value="3">3</option>' +
'</select>');
$('#'+inputname).val("2");
});
So it work to build the same custom select for each input and I can set a fixed value but I would like to retrieve the original value for each input.
Is it possible?
Thanks in advance for your help
You would have to grab the value off of the element before you do the replace.
As an alternative, I wrote a simplified version using the native implicit looping that replaceWith will do. I also threw in an extra method to select the previous value in the new select, if that is desired.
$('#input1, #input2, #input3').replaceWith(function(){
const isSelected = (value) => {
return value === this.value ? 'selected' : '';
};
return `
<select id="${this.id}" name="${this.name}">
<option value="1">0</option>
<option value="1" ${isSelected('1')}>1</option>
<option value="2" ${isSelected('2')}>2</option>
<option value="3" ${isSelected('3')}>3</option>
</select>
`;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="span1">
<input type="text" id="input1" value="1" >
</span>
<span id="span2">
<input type="text" id="input2" value="2" >
</span>
<span id="span3">
<input type="text" id="input3" value="3" >
</span>
You need to read the value before you replace it.
var inputs = ['input1', 'input2', 'input3'];
$.each(inputs, function(key, inputname) {
var inp = $('#' + inputname)
var val = inp.val()
var sel = $('<select id="' + inputname + '" name="' + inputname + '">' +
'<option value="0">0</option>' +
'<option value="1">1</option>' +
'<option value="2">2</option>' +
'<option value="3">3</option>' +
'</select>')
sel.val(val);
inp.replaceWith(sel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="span1">
<input type="text" id="input1" value="1" >
</span>
<span id="span2">
<input type="text" id="input2" value="2" >
</span>
<span id="span3">
<input type="text" id="input3" value="3" >
</span>
I am creating dynamic row with jquery. Now each row has different ID and common class name. How can I get the different id from same class name?
https://imgur.com/a/JCEhSna
See in the above picture. While I will select an option, then I want the ID name.
My Try:
HTML:
<tbody id="dynamic_row">
<tr id="firstTR">
<td>
<select name="product_id[]" class="invoiceProducts">
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->productName }}</option>
#endforeach
</select>
</td>
<td>
<input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
</td>
<td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
<td><input type="number" class="form-control" name="itemQuantity[]"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</tbody>
$('#add').click(function(){
i++;
j=i;
console.log("Inside: " + i);
var html = '<tr id="row'+i+'" class="dynamic-added">';
html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">#foreach($products as $product)<option value="{{ $product->id }}">{{ $product->productName }}</option>#endforeach</select></td>';
html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
let tb = $("table.invoice-table").find("tbody");
tb.append(html);
tb.find('tr').last().trigger('select-added');
});
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = $('.invoiceProducts').attr('id');
console.log("Select ID: " + idOfSelect);
});
Output:
Select ID: undefined
You can find the id using this.closest('tr').id in the change event
var i =0;
$('#add').click(function(){
i++;
j=i;
console.log("Inside: " + i);
var html = '<tr id="row'+i+'" class="dynamic-added">';
html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">#foreach($products as $product)<option value="1">1</option><option value="2">2</option>#endforeach</select></td>';
html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
let tb = $("table.invoice-table").find("tbody");
tb.append(html);
tb.find('tr').last().trigger('select-added');
});
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = this.closest('tr').id
console.log("Select ID: " + idOfSelect);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="invoice-table">
<tbody id="dynamic_row">
<tr id="firstTR">
<td>
<select name="product_id[]" class="invoiceProducts">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
</select>
</td>
<td>
<input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
</td>
<td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
<td><input type="number" class="form-control" name="itemQuantity[]"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</tbody>
</table>
I think this could help
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = $(this).attr('id');
console.log("Select ID: " + idOfSelect);
});
The trick is select ID of changed element, right?
If you have <select> element, you should have <option> elements also as a children.
Just set "value" attribute of these children.
<select id="mySelect">
<option id="1" value="1"> A <option>
<option id="2" value="2"> B <option>
<option id="3" value="3"> C <option>
</select>
$("#mySelect").change(function(){
var selectedOption = $(this). children("option:selected").val();
console.log(selectedOption)
})
You should try with "document" It may help you Like:
$(document).on('change', '.invoiceProducts', function() {
var idOfSelect = $(this).attr('id');
console.log("Select ID: " + idOfSelect);
});
according to this question here now i'm trying to figure out the total value of the calculated moltiplication from input fields.
The total value must be autoupdated and i need to store that value into a variable for further data manipulation.
Scenario:
add article dynamically
name0, type0, price0, quantity0 --> total_0 (price*quantity)
name1, type1, price1, quantity1 --> total_1 (price*quantity)
...
nameX, typeX, priceX, quantityX --> total_X (price*quantity)
total value of all articles = (total_0 + total_1 + ... + total_X)
here is the html and js code.
Thanks in advance for help.
$(document).ready(function() {
var i = 0;
$("#sasia-" + i).change(function() {
upd_art(i)
});
$("#cmimi-" + i).change(function() {
upd_art(i)
});
$('#add').click(function() {
i++;
$('#artikujt').append('<tr id="row' + i + '"><td><input type="text" class="form-control input-sm name_list" id="artikulli-' + i + '" name="artikulli[]" value="" placeholder="Artikulli..." required /></td><td><select class="form-control input-sm name_list" id="njesia-' + i + '" name="njesia[]"><option value="" selected disabled>Njesia...</option><option value="tjeter">tjeter</option><option value="m">m</option><option value="m2">m2</option><option value="m3">m3</option><option value="cope">cope</option><option value="ml">m/l</option><option value="litra">litra</option><option value="pako">pako</option></select></td><td><input type="number" class="form-control input-sm name_list" id="sasia-' + i + '" name="sasia[]" value="" placeholder="Sasia..." required /></td><td><input type="number" class="form-control input-sm name_list" id="cmimi-' + i + '" name="cmimi[]" value="" placeholder="Cmimi..." required /></td><td><input type="number" class="form-control input-sm name_list subtotali" id="total_art-' + i + '" name="total_art[]" readonly /></td> <td><center><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn-sm btn_remove">X</button></center></td></tr>');
$("#sasia-" + i).change(function() {
upd_art(i)
});
$("#cmimi-" + i).change(function() {
upd_art(i)
});
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$('#submit').click(function() {
//alert($('#add_name').serialize()); //alerts all values
// $.ajax({
// url: "wwwdb.php",
// method: "POST",
// data: $('#add_name').serialize(),
// success: function(data) {
// $("#add_name")[0].reset();
// }
// });
});
function upd_art(i) {
var qty = $('#sasia-' + i).val();
var price = $('#cmimi-' + i).val();
var totNumber = (qty * price);
var tot = totNumber.toFixed(2);
$('#total_art-' + i).val(tot);
}
});
<html>
<head>
<title>add article</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">add article</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered table-sm" id="artikujt">
<thead>
<tr>
<th>item</th>
<th>type</th>
<th>quantity</th>
<th>price</th>
<th>value</th>
<th><center>+ / -</center></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control input-sm name_list" id="artikulli-0" name="artikulli[]" value="" placeholder="Artikulli..." required /></td>
<td>
<select class="form-control input-sm name_list" id="njesia-0" name="njesia[]">
<option value="" selected disabled>Njesia...</option>
<option value="tjeter">tjeter</option>
<option value="m">m</option>
<option value="m2">m2</option>
<option value="m3">m3</option>
<option value="cope">cope</option>
<option value="ml">m/l</option>
<option value="litra">litra</option>
<option value="pako">pako</option>
</select>
</td>
<td><input type="number" class="form-control input-sm name_list" id="sasia-0" name="sasia[]" value="" placeholder="Sasia..." required /></td>
<td><input type="number" class="form-control input-sm name_list" id="cmimi-0" name="cmimi[]" value="" placeholder="Cmimi..." required /></td>
<td><input type="number" class="form-control input-sm name_list subtotali" id="total_art-0" name="total_art[]" readonly /></td>
<td><center><button type="button" name="add" id="add" class="btn btn-sm btn-success">Add new</button></center></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3">
<label class="req">total sum of items </label>
<input type="text" class="form-control input-sm subtotali" name="vleramonedhe" id="vleramonedhe" readonly />
</div>
</div>
<input type="button" name="submit" id="submit" class="btn btn-sm btn-info" value="Submit" />
</form>
</div>
</div>
</body>
</html>
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 */
});
I need a page I am creating to take the submitted info and then display it on the page when submit is pressed. The way I have it now it prints the name, email, years of experience, date, references and additional comments. Compensation and Region selected print as undefined...
Please help!!
<script type="text/javascript">
info = document.getElementById("personalInfo");
info.innerHTML = "<strong>Peronal Info: </strong>" + "<br>" + "Name: " +
document.feedback.fname.value +
" " +
document.feedback.lname.value +
"<br>" + "Email: " +
document.feedback.email.value;
info = document.getElementById("experienceSubmit");
var compensationValue,regionValue;
//Get compensation value
for(var i=0;i<document.feedback.comp.length;i++){
if(document.feedback.comp[i].checked){
compensationValue = document.feedback.comp[i].value;
}
}
//Get region value
for(var i=0;i<document.feedback.region.length;i++){
if(document.feedback.region[i].checked){
regionValue = document.feedback.region[i].value;
}
}
info = document.getElementById("otherSubmit");
info.innerHTML = "<strong>Other information: </strong>" + "<br>" + "# of References " +
document.feedback.reference.value +
"<br>" + "Additional Comments: " +
document.feedback.comments.value;
return false;
}
</script>
</head>
<body background="../Assignment 5/_images/abstract_color_background_picture_8016-wide.jpg" >
<form name="feedback" method="post" onSubmit="return checkform()">
<section id="pinfo" class="inputArea">
<fieldset>
<table>
<tr>
<td>Last Name: </td>
<td><input name="lname"
type="text"
autofocus
required
placeholder="lname"
size="25" />
</td>
</tr>
<tr>
<td>First Name: </td>
<td><input name="fname"
type="text"
size="25"
required
placeholder="fname" />
</td>
</tr>
<tr>
<td>Email: </td>
<td><input name="email"
type="email"
size="40"
required
placeholder="....#hotmail.com" />
</td>
</tr>
<td>Gender: </td>
<td><select name="gender">
<option selected disabled style='display:none;'>
Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
</table>
</fieldset>
</section>
<section id="experience">
<fieldset>
<table>
<tr>
<td>
<label for="experience">Years of Experience: </label>
<input name="experience" type="number" />
</td>
</tr>
<tr>
<td>
<label for="date">Date</label>
<input name="date" type="date" />
</td>
<tr>
<td>
<label for="comp">Compensation: </label><br>
<input name="comp" type="radio" id="Salary" value="Salary Selected">Salary
<input name="comp" type="radio" id="SalaryWB" value="Salary with bonus Selected">Salary with Bonus
<input name="comp" type="radio" id="Commission" value="Commission Selected">Commission
</td>
</tr>
<tr>
<td>
<label for="region">Region: </label><br>
<input name="region" type="checkbox" id="East" value="East Selected">East
<input name="region" type="checkbox" id="West" value="West Selected">West
<input name="region" type="checkbox" id="North" value="North Selected">North
<input name="region" type="checkbox" id="South" value="South Selected">South
</td>
</tr>
</table>
</fieldset>
</section>
<section id="other">
<fieldset>
<table>
<tr>
<td>
<label for="reference">References<br>0   1   2    3    4    5<br></label>
<input name="reference" id="reference"
type="range"
value="0"
min="0"
max="5"
step="1" />
</td>
</tr>
<tr>
<td>
<label for="comments">Additional Comments: <br></label>
<textarea
name="comments"
rows="5"
cols="20"
placeholder="Please include any other pertinent information here"></textarea> </td>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</section>
</form>
<section id="personalInfo"></section>
<section id="experienceSubmit"></section>
<section id="otherSubmit"></section>
</body>
The way you are using to get the value of the checkboxes and radio buttons is wrong. You can use this piece of code to get the checked value of the radio buttons or checkboxes.
Radio Buttons
var radios = document.getElementsByName('comp');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
// do whatever you want with the checked radio
alert(radios[i].value);
// only one radio can be logically checked, don't check the rest
break;
}
}
Checkboxes
var checkedValues = [];
var inputElements = document.getElementsByName('region');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValues.push(inputElements[i].value);
}
}
var str = checkedValues.ToString(); // all the selected regions in a string.
You could loop through the collection and check whether it is checked or not.
This code if for your compensation:
for(var i=0;i<document.feedback.comp.length;i++){
if(document.feedback.comp[i].checked){
alert(document.feedback.comp[i].value)
}
}
This code is for your region:
for(var i=0;i<document.feedback.region.length;i++){
if(document.feedback.region[i].checked){
alert(document.feedback.region[i].value)
}
}
Here is it in your code[ Added on request of user ]:
info = document.getElementById("experienceSubmit");
var compensationValue,regionValue;
//Get compensation value
for(var i=0;i<document.feedback.comp.length;i++){
if(document.feedback.comp[i].checked){
compensationValue = document.feedback.comp[i].value;
}
}
//Get region value
for(var i=0;i<document.feedback.region.length;i++){
if(document.feedback.region[i].checked){
regionValue = document.feedback.region[i].value;
}
}
info.innerHTML = "<strong>Experience and Salary: </strong>" + "<br>" + "Years of experience: " +
document.feedback.experience.value +
"<br>" + "Date of availability: " +
document.feedback.date.value +
"<br>" + "Compensation Chosen: " +
compensationValue +
"<br>" + "Region Selected: " +
regionValue;