I'm working on this table that has checkboxes for each row. Basically, I want all of the email input fields to be disabled once page loads. If the users clicks on the checkbox that belongs to a row then the email input field for that row should be enabled so the user can type in an email. Finally, if the user clicks on the Select all checkbox all of the input fields should be enabled/disabled. For some reason I can only disabled the first, second and last input field once page loads. My Select All checkbox is not working properly either :(. Can anyone tell me what I'm doing wrong please? Thanks in advance!
var users = $("tr")
.filter(function () {
return $(this).find('.inputEmail').val() !== "" && $(this).find(".input_checkbox").is(':checked');
})
.map(function () {
var $row = $(this);
return {
firstName: $row.find('.fullName').text(),
number: $row.find('.usersPhoneNumber').text(),
email: $row.find('.inputEmail').val()
}
})
.get();
console.log('Array containing all users with an email:');
console.log(users);
Here's my code - LIVE DEMO:
$(document).ready(function() {
$("#checkAll").change(function() {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() {
enable_disable_input(this);
var nameValue = $(this).attr("name");
var inputFieldNameValue = $.trim(nameValue);
var inputFieldString = "customer-name-inputField";
var inputFieldId = inputFieldNameValue + inputFieldString;
if ($(this).is(":checked")) {
enable_disable_input(this);
$("#" + inputFieldId).prop('placeholder', "Enter email address");
} else {
$("#" + inputFieldId).prop('placeholder', "");
enable_disable_input(this);
}
});
});
function enable_disable_input(checkbox) {
var input_id = checkbox.id.replace('-checkbox', '-inputField');
$("#" + input_id).prop('disabled', !checkbox.checked);
}
$(".input_checkbox").change(function() {
var nameValue = $(this).attr("name");
var inputFieldNameValue = $.trim(nameValue);
var inputFieldString = "customer-name-inputField";
var inputFieldId = inputFieldNameValue + inputFieldString;
if ($(this).is(":checked")) {
enable_disable_input(this);
$("#" + inputFieldId).prop('placeholder', "Enter email address");
} else {
$("#" + inputFieldId).prop('placeholder', "");
enable_disable_input(this);
}
});
$(".input_checkbox").each(function() {
enable_disable_input(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div style="width:1140px;">
<br/>
<table>
<div>
<tr>
<td align="center" valign="bottom">Select All
<br/>
<input type="checkbox" id="checkAll" value="" />
</td>
<td width="5"></td>
<td width="200" valign="bottom">Name</td>
<td align="center" class="table-col-phone" style="padding-left:20px;">Phone # / Extension</td>
<td width="50"></td>
<td valign="bottom" style="padding-left: 90px;">Email</td>
</tr>
<tr>
<td style="font-weight: bold;">Group1</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Ben Morris</td>
<td align="left" class="usersPhoneNumber">3033422109</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Mike Jeff</td>
<td align="left" class="usersPhoneNumber">3037777777</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Group2</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Ana McLwius</td>
<td align="left" class="usersPhoneNumber">3039899231</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Zumia Brown</td>
<td align="left" class="usersPhoneNumber">3033213453</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Group3</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Bryan Smith</td>
<td align="left" class="usersPhoneNumber">3033222098</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Junior White</td>
<td align="left" class="usersPhoneNumber">3030098342</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="2customer-name-checkbox" name="2 " value="">
</td>
<td class="fullName">Peter McDonald</td>
<td align="left" class="usersPhoneNumber">3037777777</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="2" id="2customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
</div>
</table>
<button id="submitButton" type="button" class="sign-in-button" style="text-align: center;margin-left: 428px;" value="Submit" />Submit</button>
</div>
You should search email input based on the current element. You are having duplicate ids.
try this:
$(this).closest('tr').find('input[type;"text"]').attr("disabled", !this.checkbox);
Updated Fiddle
Note I have taken leisure to update your code. Hope it helps!
Getting Data
You can try something like this:
Note I have updated Group label rows and have added class in it.
Updated Fiddle
$("#submitButton").on("click", function() {
var result = {};
var group_id = "";
$("table tr").each(function(index, row) {
var $row = $(row)
group_id = $row.hasClass("section-label") ? $row.find("td:first").text() : group_id;
if (group_id && $row.find(".input_checkbox").is(':checked') && $row.find('.inputEmail').val().trim() !== "") {
result[group_id] = result[group_id] || [];
result[group_id].push({
firstName: $row.find('.fullName').text(),
number: $row.find('.usersPhoneNumber').text(),
email: $row.find('.inputEmail').val()
});
}
});
console.log(result)
})
Obviously because of the duplicated ids.
try this:
function enable_disable_input(checkbox) {
$(checkbox).parents('tr').find('input[type="email"]').prop('disabled', !checkbox.checked);
}
Your code seems a little messy, something like this would work and it's more readable
$(document).ready(function () {
$("#checkAll").change(function () {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function () {
var input = $(this).parent().parent().find("input[type='email']");
if ($(this).is(":checked")) {
$(input).prop('disabled', false);
$(input).prop('placeholder', "Enter email address");
}
else {
$(input).prop('placeholder', "");
$(input).prop('disabled', true);
}
});
});
$(".input_checkbox").change(function () {
var input = $(this).parent().parent().find("input[type='email']");
if ($(this).is(":checked")) {
$(input).prop('disabled', false);
$(input).prop('placeholder', "Enter email address");
}
else {
$(input).prop('placeholder', "");
$(input).prop('disabled', true);
}
});
$('.inputEmail').each(function(){
$(this).prop('disabled', true);
})
});
full working example
Also, you should remove the duplicated ID's.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
i tried to submit my form with that java script. But it didn't work as it should be,it doesn't get the value from the script. it's only work for the alert coding in my html body, but it didn't read the function check(), is my form have some problem?
<form name="myForm" method="post" onsubmit="return check()">
<table width="100%">
<tr>
<div id="space">
YOUR DETAILS
</div><!-- space -->
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>First Name</td>
<td width="720">
<input type="text" name="fname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Last Name</td>
<td width="720">
<input type="text" name="lname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Email</td>
<td width="720">
<input type="email" name="email">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Telephone</td>
<td width="720">
<input type="tel" name="telephone">
</td>
</tr>
<tr>
<td width="186">Fax</td>
<td width="720">
<input type="tel" name="fax">
</td>
</tr>
<tr>
<td width="186">Company</td>
<td width="720">
<input type="text" name="company">
</td>
</tr>
<tr>
<td width="186">Company ID</td>
<td width="720">
<input type="text" name="cid">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Address 1</td>
<td width="720">
<input type="text" name="add1">
</td>
</tr>
<tr>
<td width="186">Address 2</td>
<td width="720">
<input type="text" name="add2">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>City</td>
<td width="720">
<input type="text" name="city" >
</td>
</tr>
<tr>
<td width="186">Poscode</td>
<td width="720">
<input type="text" name="poscode" >
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Country</td>
<td width="720">
<select name="country">
<option value="malaysia">Malaysia</option>
<option value="australia">Australia</option>
<option value="japan">Japan</option>
<option value="newzealand">New Zealand</option>
</select>
</td>
</tr>
</table>
<br><br>
<input type="button" onclick="check()" name="submit" value="Submit" class="sbutton" />
<button name="subcancel" class="sbutton" value="Cancel" >CANCEL</button>
</form>
This is my javascript function
function check(){
alert('hi');
var isi1=document.forms["myForm"]["fname"].value;
var isi2=document.forms["myForm"]["lname"].value;
var isi3=document.forms["myForm"]["email"].value;
var isi4=document.forms["myForm"]["tel"].value;
var isi5=document.forms["myForm"]["add1"].value;
var isi6=document.forms["myForm"]["city"].value;
var isi7=document.forms["myForm"]["country"].value;
if (isi1 == "") {
alert("Please complete all your detail with '*' symbol!");
return false;
}
else if(isi2 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi3 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi4 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi5 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi6 ==""){
alert("Please complete your detail!");
return false;
}
else{
alert("Hi "+isi1+" "+isi2+"!! You are succesfully registered to our bookstore!!");
return true;
}
}
Check the working code below:
function check() {
alert('hi');
var isi1 = document.forms["myForm"]["fname"].value;
var isi2 = document.forms["myForm"]["lname"].value;
var isi3 = document.forms["myForm"]["email"].value;
var isi4 = document.forms["myForm"]["telephone"].value;
var isi5 = document.forms["myForm"]["add1"].value;
var isi6 = document.forms["myForm"]["city"].value;
var isi7 = document.forms["myForm"]["country"].value;
if (isi1 == "") {
alert("Please complete all your detail with '*' symbol!");
return false;
}
else if (isi2 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi3 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi4 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi5 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi6 == "") {
alert("Please complete your detail!");
return false;
}
else {
alert("Hi " + isi1 + " " + isi2 + "!! You are succesfully registered to our bookstore!!");
return true;
}
}
<form name="myForm" method="post" onsubmit="return check()">
<table width="100%">
<tr>
<div id="space">
YOUR DETAILS
</div><!-- space -->
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>First Name</td>
<td width="720">
<input type="text" name="fname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Last Name</td>
<td width="720">
<input type="text" name="lname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Email</td>
<td width="720">
<input type="email" name="email">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Telephone</td>
<td width="720">
<input type="tel" name="telephone">
</td>
</tr>
<tr>
<td width="186">Fax</td>
<td width="720">
<input type="tel" name="fax">
</td>
</tr>
<tr>
<td width="186">Company</td>
<td width="720">
<input type="text" name="company">
</td>
</tr>
<tr>
<td width="186">Company ID</td>
<td width="720">
<input type="text" name="cid">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Address 1</td>
<td width="720">
<input type="text" name="add1">
</td>
</tr>
<tr>
<td width="186">Address 2</td>
<td width="720">
<input type="text" name="add2">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>City</td>
<td width="720">
<input type="text" name="city">
</td>
</tr>
<tr>
<td width="186">Poscode</td>
<td width="720">
<input type="text" name="poscode">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Country</td>
<td width="720">
<select name="country">
<option value="malaysia">Malaysia</option>
<option value="australia">Australia</option>
<option value="japan">Japan</option>
<option value="newzealand">New Zealand</option>
</select>
</td>
</tr>
</table>
<br><br>
<input type="button" onclick="check()" name="submit" value="Submit" class="sbutton" />
<button name="subcancel" class="sbutton" value="Cancel">CANCEL</button>
</form>
My requirement is once I click on checkbox and save/update textbox should be disabled and when I uncheck and save/update textbox should be enabled. During check latest_file value should be 1 and during uncheck its value should be 0. Here is my code which I tried:
function disableFileName() {
var latestFile = $("#latestFile").is(":checked");
if (latestFile) {
$("#fileName").attr("disabled", "disabled");
} else {
$("#fileName").removeAttr("disabled");
}
}
<table>
<tr>
<td>Process the latest file from the feed location </td>
<td>
<s:checkbox property="latestFile" styleId="latestFile" value="1" onclick="disableFileName();" tabindex="5" />
</td>
</tr>
<tr>
<td>File Name</td>
<td nowrap="true">
<s:text property="fileName" styleClass="textbox" styleId="fileName" style="{width:150}" tabindex="6" />
</td>
</tr>
</table>
javascript at Question returns expected result where disableFileName, #latestFile, #fileName are defined. To toggle value of #latestFile you can use $("#latestFile").val(1); at if, $("#latestFile").val(1); at else
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function disableFileName() {
var latestFile = $("#latestFile").is(":checked");
if (latestFile) {
$("#latestFile").val(1);
$("#fileName").attr("disabled", "disabled");
} else {
$("#latestFile").val(0);
$("#fileName").removeAttr("disabled");
}
console.log($("#latestFile").val());
}
</script>
<table>
<tr>
<td>Process the latest file from the feed location</td>
<td>
<input type="checkbox" property="latestFile" id="latestFile" value="1" onclick="disableFileName();" tabindex="5" />
</td>
</tr>
<tr>
<td>File Name</td>
<td nowrap="true">
<input type="text" property="fileName" class="textbox" id="fileName" style="width:150" tabindex="6" />
</td>
</tr>
</table>
Try using prop instead of attr to disable the checkbox as shown below:
$("#fileName").prop("disabled", "true");
HTML:
<table>
<tr>
<td>Process the latest file from the feed location </td>
<td>
<input type="checkbox" id="latestFile" value="1" onclick="disableFileName();" tabindex="5" />
</td>
</tr>
<tr>
<td>File Name</td>
<td nowrap="true">
<input type="textbox" name="fileName" styleClass="textbox" id="fileName" style="width:150" tabindex="6" />
</td>
</tr>
</table>
Javascript:
function disableFileName() {
var latestFile = $("#latestFile").is(":checked");
if (latestFile) {
$("#fileName").prop("disabled", "true");
$("#latestFile").attr("value", "1");
} else {
$("#fileName").removeAttr("disabled");
$("#latestFile").attr("value", "0");
}
}
Here is the demo: JSFiddle Demo
My below code skips the last row of the html table on button click if all the values are filled in the text box's but now i have a situation where i wan to skip the first row only as in my case there will be heading on first row and print all data expect first row.
With Heading demo doent work as there is text on first row
Demo With out heading skips last row working
HTML
<table border="1" id="Positions_names">
<tbody>
<tr>
<td align="center">text heading
</td>
<td>
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
</tr>
<tr>
<td align="center">b
<input type="hidden" value="b">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
<tr>
<td align="center">c
<input type="hidden" value="c">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
<tr>
<td align="center">d
<input type="hidden" value="d">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
</tbody>
</table>
<input type="submit" onclick="save_election_req_details();" id="submit_positions">
js:
$('#submit_positions').click(function () {
var x = document.getElementById("Positions_names").rows.length;
if(x=="1")
{
alert("Select Some Details to Contunue");
}
else {
var html = '';
var arr = [];
var valid = true;
$('#Positions_names tr').each(function (index, me) {
if (index < $('#Positions_names tr').length - 1 && valid) {
var inputs = $('input', me);
inputs.each(function (index, me) {
if ($(me).val().length == 0) valid = false;
});
var selects = $('select', me);
selects.each(function (index, me) {
if ($(me)[0].selectedIndex == 0) valid = false;
});
if (valid){
arr.push('("' + inputs[0].value + '","' + inputs[1].value +'")');
}
}
});
if (valid) {
html = 'INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ' + arr.join(',') + ';';
alert(html);
} else
{
alert("Fill the Price or Select the Created Product");
}
}
});
Maybe like this? FIDDLE
I just added another condition in your if-clause.
Before:
if (index < $('#Positions_names tr').length - 1 && valid) {
After:
if (index < $('#Positions_names tr').length && valid && index >= 1) {
Alternatively:
if (index >= 1 && valid) {
try this
$('#Positions_names tr:gt(0)').each(function (index, me) {
$('tbody tr').each(function(){
$(this).find('td:eq(5)').text('$145');
});
In above example you can skip header row by putting it into thead. I have given code to loop through the Table Body
jsFiddle
Some Refrences, may Help you.
each()
find()
:eq() Selector
text()
Depending on how you want to do things. Here is a more succinct way of doing your JavaScript. It uses pseudo elements for first and last. Also you can use <thead> tags to do headers. This eliminates the need to skip the first row.
$('form').submit(function(e) {
//prevents the form from submitting
e.preventDefault();
//pushes the strings into arrays to be joined by commas later
var chunck = [];
//foreach tr in tbody
$('tbody tr')
//do not select first or last child tr
.not(':last-child,:first-child')
//find the inputs an foreach
.find('input').each(function() {
//get the name and the value
var name = $(this).attr("name");
var value = $(this).val();
//if the value is not empty then push it to the string
if (value.length > 0) {
chunck.push("('" + name + "','" + value + "')");
}
})
//chunck.join() puts commas between array elements
var string = 'INSERT INTO (name,value) VALUES ' + chunck.join();
alert(string);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1">
<thead>
<tr>
<th>Head</th>
<th>Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>
<input name='a' />
</td>
</tr>
<tr>
<td>b</td>
<td>
<input name='b' />
</td>
</tr>
<tr>
<td>c</td>
<td>
<input name='c' />
</td>
</tr>
<tr>
<td>d</td>
<td>
<input name='d' />
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>
I have a table and with in tds i had a text box
<table class="table ratemanagement customtabl-bordered " id="rate_table">
<tbody>
<tr>
<th><input type="checkbox" onclick="select_all()" class="check_all"></th>
<th>From Days*</th>
<th>To Days*</th>
<th>Rent*</th>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
</tbody>
</table>
i want to read the values from text box i tried
var values = {};
$('.v input').each(function () {
values[$(this).attr('name')] = $(this).val();
});
and
$('input[name="fromdays"],[name="todays"],[name="rent"]').each(function () {
var fromdays = $(this).val();
alert(fromdays);
});
I want to store the values in independent variables how do i do that ex all fromdays to firstvariable, all todays to second variable
how do i do that
Thanks
var values = [];
$('.v input').each(function () {
values.push($(this).attr('name') = $(this).val());
});
You can store the values in three different arrays by checking the name attribute of the input fields
var fromdays=new Array();
var todays=new Array();
var rent=new Array();
$('#rate_table input[type="text"]').each(function () {
if($(this).attr('name')=="fromdays")
fromdays.push($(this).val())
if($(this).attr('name')=="todays")
todays.push($(this).val())
if($(this).attr('name')=="rent")
rent.push($(this).val())
});
JsFiddle
On button click, iterate over the inputs and push their values in to the respective array:
$(document).on('click', '#getVar', function() {
var fromVar = [];
var toVar = [];
$('input[name=fromdays]').each(function() {
fromVar.push($(this).val());
});
$('input[name=todays]').each(function() {
toVar.push($(this).val());
});
alert('from: ' + fromVar + ' - to: ' + toVar);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table ratemanagement customtabl-bordered " id="rate_table">
<tbody>
<tr>
<th><input type="checkbox" onclick="select_all()" class="check_all"></th>
<th>From Days*</th>
<th>To Days*</th>
<th>Rent*</th>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
</tbody>
</table>
<button id="getVar">get variables</button>
All,
I have table which I am cloning on clicking on button and after cloning table I need to do few calculation in the cloned table as well as in parent table. My problem is that I am not able to do calculation on each appended(clone) table. I mean I wrote a on blur function to do calculation with textbox value but when I am cloning table since class name is same for all textbox, in parent and cloned table my result showing in all textbox instead of corresponding part of the table. Here is my table and my jquery code which I am following.
<html>
<body>
<table>
<tbody>
<tr><td>
<table width="95%" border="0" cellspacing="5" cellpadding="5" style="margin-left:10px;" id="product">
<thead><tr>
<td class="mandatory"> * Product Name </td>
<td class="label"> Qty.in Stock</td>
<td class="mandatory">* Qty </td>
<td class="mandatory">* Unit Price</td>
<td class="mandatory">* List Price</td>
<td class="mandatory">* Total</td>
</tr>
</thead>
<tbody class="product_details" id="tbody_product">
<tr class="tr_product_details">
<td>
<input type="text" name="txtproductName[]" id="product-name" />
<a href="">
<img width="17" height="16" src="images/Products_small.gif"> </a>
<input type="hidden" name="productid[]" id="productid" />
</td>
<td>
<input type="text" name="txtqtyStock[]" id="productstock" />
</td>
<td>
<input type="text" name="txtQty" id="product-quatity" class="product-qty" value="3" />
</td>
<td>
<input type="text" name="txtUnitPrice[]" id="product-price" />
</td>
<td>
<input type="text" name="txtListPrice[]" id="product-list-price" class="product-list-price"
/>
</td>
<td><div style="margin-left:120px;">
<input type="text" name="txtTotal[]" size="10" class="total-price" />
</div>
</td>
</tr>
<tr>
<td colspan="5"> <img width="17" height="16" src="images/spacer.gif">Product Description </td>
</tr>
<tr>
<td colspan="5"><textarea style="width:65%" maxlength="250" rows="3" cols="30" name="txtProductDescription[]" id="textarea-product-description"></textarea>
</td>
<td colspan="1" class="tbl">
<table >
<tr>
<td>Discount: </td>
<td> <input type="text" name="txtProductDiscount[]" size="10" class="product-discount" /></td>
</tr>
<tr>
<td class="label">Total After Discount: </td>
<td> <input type="text" name="txtAfterDiscount[]" size="10" class="total-after-discount" /></td>
</tr>
<tr>
<td> Tax: </td>
<td><input type="text" name="txtProductTax[]" size="10" />
</td>
</tr>
<tr>
<td class="label"> Net Total: </td>
<td><input type="text" name="txtNetTotal[]" size="10" class="net-total" /> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" style="margin-left:20px;">
<tr>
<td><input type="button" id="btnaddProduct" value="Add Product" class="button"/> </td>
</tr>
</table>
</body>
</html>
And my script which I am using :
<script type="text/javascript">
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr+" .product-qty").bind("blur change",function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
// alert( $(this).children().children().attr("class"));
// $(this).children().children().attr("class");
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function() {
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
return false;
});
});
</script>
$("#"+qty_attr+" .product-qty")
Comes out empty (no element selected) because you already added .product-qty in parent_qty_id to qty_attr.
$("#"+qty_attr)
Works.
There were alot of other errors in your code which made the blur/change routine run twice etc. I've sanitized it some into this:
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr).blur(function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function(e) {
e.preventDefault();
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
});
});
Further tweaking is probably needed.