how to remove autofocus attrib - javascript

i want to get more input field by onfoucus event
function new_option() {
var tot_opt = parseInt($('#tot_opt').val());
$('#otp' + tot_opt).unbind('onfocus', "new_option");
tot_opt++;
$('#tot_opt').val(tot_opt);
var opt = "<br><input onfocus='new_option()' id='otp" + tot_opt + "' placeholder='Options" + tot_opt + "' type='text' name='options' class='form-control'>"
$('#new_opt').append(opt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th colspan="2">Create Voter Pool</th>
</tr>
<tr>
<th>Question</th>
<th><textarea name="question" class="form-control">
</textarea></th>
</tr>
<tr>
<th>Options</th>
<td>
<input type="text" placeholder="Options1" id="opt1" class="form-control" name="options"><br>
<input type="text" onfocus="new_option()" id="opt2" placeholder="Options2" class="form-control" name="options">
<span id="new_opt"></span>
<input type="hidden" id="tot_opt" value="2">
</td>
</tr>
</table>
i want onfocus attribute only on last input and want to remove onfoucs attribute from remain


Before you add the new input you can remove the onfocus attribute form all the other inputs.
The below will query for inputs with the onfocus attribute and loop through each element removing the attribute. Then I append the last input with the onfocus attribute. This ensures only the last input will be able to add another input.
function new_option() {
var tot_opt = parseInt($('#tot_opt').val());
$('#otp' + tot_opt).unbind('onfocus', "new_option");
tot_opt++;
$('#tot_opt').val(tot_opt);
var opt = "<br><input onfocus='new_option()' id='otp" + tot_opt + "' placeholder='Options" + tot_opt + "' type='text' name='options' class='form-control'>"
// remove onfocus from all previous inputs (that have the onfocus attribute)
document.querySelectorAll("input[onfocus]").forEach(function(element, index) {
element.removeAttribute("onfocus");
});
$('#new_opt').append(opt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th colspan="2">Create Voter Pool</th>
</tr>
<tr>
<th>Question</th>
<th><textarea name="question" class="form-control"></textarea></th>
</tr>
<tr>
<th>Options</th>
<td>
<input type="text" placeholder="Options1" id="opt1" class="form-control" name="options"> <br>
<input type="text" onfocus="new_option()" id="opt2" placeholder="Options2" class="form-control" name="options">
<span id="new_opt"></span>
<input type="hidden" id="tot_opt" value="2">
</td>
</tr>
</table>

Related

How to get input value from each td after attribute readonly applied?

I built a script which is clone every child rows from the parent typing on a checkbox checked here.
It was working until now. I want each child input value to be saved by ajax. But only the last child is echoed.
JS
function cloneAllz(clsName) {
var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
//console.log($input1.attr('id'));//test master input
$input1.on('input', function() {
var $this = $(this);
window.setTimeout(function() {
if ($('input.' + clsName).is(':checked')) {
var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
$child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
console.log($this.attr('id'));
});
$input1.attr('readonly', false);
} else {
$('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
}
}, 0);
});
}
HTML
<table class="table table-bordered table-striped prdEdt">
<tr>
<th>ID</th>
<th>Code
<label class="pull-right label label-default">
<input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Title
<label class="pull-right label label-default">
<input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Cost</th>
</tr>
<tr>
<td>00067</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER KRABI AIRPORT-AO NANG" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
</td>
</tr>
<tr>
<td>00068</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER KRABI AIRPORT-AO NANG " />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
</td>
</tr>
</table>
So the question is : How to echo each row input to save them data via ajax???
function cloneAllz(clsName) {
var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
//console.log($input1.attr('id'));//test master input
$input1.on('input', function() {
var $this = $(this);
window.setTimeout(function() {
if ($('input.' + clsName).is(':checked')) {
var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
$child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
console.log($this.attr('id'));//only first row echoed twice!
});
$input1.attr('readonly', false);
} else {
$('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
}
}, 0);
});
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped prdEdt">
<tr>
<th>ID</th>
<th>Code
<label class="pull-right label label-default">
<input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Title
<label class="pull-right label label-default">
<input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Cost</th>
</tr>
<tr>
<td>00067</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
</td>
</tr>
<tr>
<td>00068</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
</td>
</tr>
</table>

creating new row on button click

I have an html table with one or more row. I have 4 columns in my table in that one is a checkbox. Two buttons are there "AddRowAbove" and "AddRowBelow". When a particular checkbox is checked and click a button a new row should be added based on the button name. My code looks like this not sure how to achieve the result.
function addNewRowAbove() {
alert("actioned !!!");
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) - 1;
alert(rowNumber + " - " + rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
$('#maintable tbody').append(newRow);
}
function addNewRowBelow() {
alert("actioned !!!");
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1;
alert(rowNumber + " - " + rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
$('#maintable tbody').append(newRow);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr>
<td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1" /></td>
<td><input type="text" name="empid"></input>
</td>
<td><input type="text" name="empfname"></input>
</td>
<td><input type="text" name="emplname"></input>
</td>
</tr>
<tr>
<td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2" /></td>
<td><input type="text" name="empid1"></input>
</td>
<td><input type="text" name="empfname1"></input>
</td>
<td><input type="text" name="emplname1"></input>
</td>
</tr>
<tr>
<td></td>
<td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td>
<td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td>
<td></td>
</tr>
</table>
</form>

I added var selectedRow = $( "input:checked" ).parent().parent(); to both of your functions to find the parent row of the checked element, and then used either $(newRow).insertBefore(selectedRow); or $(newRow).insertAfter(selectedRow); depending on the button clicked.
Hopefully this helps.
UPDATE:
In response to comments requesting that the id's of the rows are kept in order even after adding rows dynamically, I've added a SortRowIDs() function which is called at the end of both addNewRowAbove() and addNewRowBelow().
This function grabs all of the <input type="checkbox"/> tags in the <table id="maintable"></table> and then iterates through them using jQuery's .each() method. Each checkbox's parent row is then assigned an Id based on its order in the table. I also added a few comments in the code so that it is easier to follow.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function SortRowIDs() {
// The code below finds all the <tr> elements in the table WITH checkboxes in them.
// This way, we skip the first row containing column headers and the last row containing buttons
// We use the jQuery .each() method to iterate through jQuery-object arrays
$('#maintable').find('tr > td > input[type="checkbox"]').each(function(index) {
// We assign the parent row of the current checkbox to the variable 'currentRow'
let currentRow = $(this).parent().parent();
// Here we give the current row an id based on its position in the table
$(currentRow).attr('id', 'id_' + (index + 1));
// Prints the id's of each row
console.log('Current row\'s id: ' + $(currentRow).attr('id'));
});
// This prints the id attribute of the selected checkbox's parent row, to show that
// the Id's were successfully assigned by the SortRowIDs() function
console.log('');
console.log('Selected row\'s id: ' + $( "input:checked" ).parent().parent().attr('id'));
}
function addNewRowAbove() {
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) - 1;
var newRow = $('<tr/>');
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '" /><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"/></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
var selectedRow = $( "input:checked" ).parent().parent();
$(newRow).insertBefore(selectedRow);
SortRowIDs();
}
function addNewRowBelow() {
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1;
var newRow = $('<tr/>');
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
var selectedRow = $( "input:checked" ).parent().parent();
$(newRow).insertAfter(selectedRow);
SortRowIDs();
}
</script>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr>
<td>
<input type="checkbox" name="radio" id="radio"/>
<input type="hidden" id="rowIndex" value="1" />
</td>
<td>
<input type="text" name="empid" />
</td>
<td>
<input type="text" name="empfname" />
</td>
<td>
<input type="text" name="emplname" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="radio1" id="radio1" />
<input type="hidden" id="rowIndex" value="2" />
</td>
<td>
<input type="text" name="empid1" />
</td>
<td>
<input type="text" name="empfname1" />
</td>
<td>
<input type="text" name="emplname1" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()">
</td>
<td>
<input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()">
</td>
<td></td>
</tr>
</table>
</form>

You can use insertBefore to append new row above buttons (give id="button" to row content buttons). Try with below solution:
function addNewRowAbove(){
alert("actioned !!!");
var rowNumber=document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber)- 1 ;
alert(rowNumber+" - "+rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio'+rowNumberNew+'"></input><input type="hidden" id="rowIndex'+rowNumberNew+'" value="'+rowNumberNew+'"/></td><td><input type="text" name="empid" id="empid'+rowNumberNew+'"></input></td><td><input type="text" name="empfname" id="empfname'+rowNumberNew+'"></input></td><td><input type="text" name="emplname" id="emplname'+rowNumberNew+'"></input></td>');
newRow.insertBefore('#button');
}
function addNewRowBelow(){
alert("actioned !!!");
var rowNumber=document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1 ;
alert(rowNumber+" - "+rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio'+rowNumberNew+'"></input><input type="hidden" id="rowIndex'+rowNumberNew+'" value="'+rowNumberNew+'"/></td><td><input type="text" name="empid" id="empid'+rowNumberNew+'"></input></td><td><input type="text" name="empfname" id="empfname'+rowNumberNew+'"></input></td><td><input type="text" name="emplname" id="emplname'+rowNumberNew+'"></input></td>');
$('#maintable tbody').append(newRow);
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr><td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1"/></td>
<td><input type="text" name="empid"></input></td>
<td><input type="text" name="empfname"></input></td>
<td><input type="text" name="emplname"></input></td>
</tr>
<tr><td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2"/></td>
<td><input type="text" name="empid1"></input></td>
<td><input type="text" name="empfname1"></input></td>
<td><input type="text" name="emplname1"></input></td>
</tr>
<tr id="button"><td></td><td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td><td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td><td></td></tr>
</table>
</form>
</body>
</html>

Text Box Concatenation using Javascript

I'm trying to get the code to work before the 7th textbox is added and once it has been added.
<!DOCTYPE html>
<html>
<head>
<title>Concatenate Words</title>
</head>
<body>
<script type="text/javascript">
function addNew()
{
document.getElementById("newBut").innerHTML = "<input type='text' id='tb7'>";
}
function concatenate()
{
concateText = document.getElementById("tb1").value + " " + document.getElementById("tb2").value + " " + document.getElementById("tb3").value + " " + document.getElementById("tb4").value + " " + document.getElementById("tb5").value + " " + document.getElementById("tb6").value + " " + document.getElementById("tb7").value;
document.getElementById("concateForm").value = concateText;
}
</script>
<h1>Please enter text into the fields below</h1>
<table>
<tr>
<td>
<input type="text" id="tb1">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb2">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb3">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb4">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb5">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb6">
</td>
</tr>
<tr>
<td>
<div id="newBut">
</td>
</tr>
<tr>
<td>
<input type="text" name="textResult" id="concateForm" value="" onkeyup="concatenate()">
</td>
</tr>
<tr>
<td>
<input type="button" name="Add A New Box" value="Add an extra field" onclick="addNew()">
</td>
</tr>
</table>
</body>
The problem that i am having is that the code only works once the 7th text box has been added by clicking the button at the bottom. I was wondering whether it is possible to get the same function to work without the extra box added into the html code.

Because you have a concrete selector of the tb7 box, this will throw an exception when attempting to get the value. This is why you need the 7th to before a result will show. You would be better off making this dynamic by using document.getElementsByClassName and enumerating through the list to perform your concatenation.
As an alternative, this could be made remarkable simple by switching to jQuery and using selectors and the .each() function.
Sample:
function addNew()
{
document.getElementById("newBut").innerHTML = "<input type='text' id='tb7' class='concatInput'>";
}
function concatenate()
{
var elements = document.getElementsByClassName("concatInput");
var concatText = "";
for (i = 0; i < elements.length; i++)
{
concatText += elements[i].value;
}
document.getElementById("concateForm").value = concateText;
}

Give it with a condition to check whether tb7 is available. like
((document.getElementById("tb7"))? " " + document.getElementById("tb7").value:"")
Because tb7 is not there in the DOM before you press add new button
<!DOCTYPE html>
<html>
<head>
<title>Concatenate Words</title>
</head>
<body>
<script type="text/javascript">
function addNew()
{
document.getElementById("newBut").innerHTML = "<input type='text' id='tb7'>";
}
function concatenate()
{
concateText = document.getElementById("tb1").value + " " + document.getElementById("tb2").value + " " + document.getElementById("tb3").value + " " + document.getElementById("tb4").value + " " + document.getElementById("tb5").value + " " + document.getElementById("tb6").value + ((document.getElementById("tb7"))? " " + document.getElementById("tb7").value:"");
document.getElementById("concateForm").value = concateText;
}
</script>
<h1>Please enter text into the fields below</h1>
<table>
<tr>
<td>
<input type="text" id="tb1">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb2">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb3">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb4">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb5">
</td>
</tr>
<tr>
<td>
<input type="text" id="tb6">
</td>
</tr>
<tr>
<td>
<div id="newBut">
</td>
</tr>
<tr>
<td>
<input type="text" name="textResult" id="concateForm" value="" onkeyup="concatenate()">
</td>
</tr>
<tr>
<td>
<input type="button" name="Add A New Box" value="Add an extra field" onclick="addNew()">
</td>
</tr>
</table>
</body>

add class to all textboxes
example:
<input type="text" class="tb" id="tb1">
<input type="text" class="tb" id="tb2">
then
var text = "";
document.querySelectorAll('.tb').forEach(function() {
text = text + " " + $(this).val();
});
alert(text);

So the issue is the element may not be there. So check for its existence beofre referencing the value.
var inp7 = document.getElementById("tb7");
var str = inp7 ? inp7.value : "";

Get data from table row to Javascript

I have table . There are three columns : Name , Price and button "Make Order". I must get data from each row to my Javascript. Each input have id such as productName and productPrice .
Table code:
<table border="2px">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<c:forEach items="${productList}" var="product" varStatus="status">
<tr>
<form>
<td> ${product.getProductName()}</td>
<input type="hidden" id="productName" name="productName" value=${product.getProductName()}>
<td>${product.getPrice()}</td>
<input type="hidden" id="productPrice" name="productPrice" value=${product.getPrice()}>
<td><input type="submit" onclick="makeOrder()" value="Make Order"></td>
</form>
</tr>
</c:forEach>
</table>
And my js:
<script type="text/javascript">
function makeOrder() {
var n=document.getElementById("productName").value;
var p=document.getElementById("productPrice").value;
alert("n="+n);
alert("p="+p);
//var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}
But when I click on my button I always alert first row of my table .
How can I alert other row ?

Use a unique row id for each row and pass that id with makeOrder() function and then find child elements inside that row whose id is passed in function...
Here is working example....
function makeOrder(rowId)
{
var n=document.getElementById(rowId).childNodes[5].value;
var p=document.getElementById(rowId).childNodes[9].value;
alert("n="+n);
alert("p="+p);
//var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}
<table border="2px">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<tr id="row1">
<form>
<td>P1</td>
<input type="hidden" id="productName" name="productName" value="P1">
<td>$5</td>
<input type="hidden" id="productPrice" name="productPrice" value="5">
<td><input type="button" onclick="makeOrder('row1')" value="Make Order"></td>
</form>
</tr>
<tr id="row2">
<form>
<td>P2</td>
<input type="hidden" id="productName" name="productName" value="P2">
<td>$6</td>
<input type="hidden" id="productPrice" name="productPrice" value="6">
<td><input type="button" onclick="makeOrder('row2')" value="Make Order"></td>
</form>
</tr>
</table>

You could call a function that gives all inputs with name productName, see below.
var n=document.getElementsByName("productName").value;
var p=document.getElementsByName("productPrice").value;
for(var i = 0; i < n.length; i++) {
alert("row 1: " + n[i].value + p[i].value);
}
This should return all your rows. Each alert will show the data of 1 row.

disabling textbox for multiple rows dynamically

I create rows dynamically using the event onfocus of d or w field. I got that correct,but the radio button- when i choose dm, d should be disabled and cm, w should be disabled. I am not sure how to do that. Please help me out
<table class="table table-bordered table-hover" id="tvtable">
<thead>
<tr>
<th width="10%" style="text-align: center;">Type</th>
<th width="20%" style="text-align: center;">A</th>
<th width="20%" style="text-align: center;">d</th>
<th width="20%" style="text-align: center;">w</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="wd0" id="rd" value="dr" />Dm
<br/>
<input type="radio" name="wd0" id="rc" value="cr" />Cm</td>
<td>
<select id="m0" class="form-control"></select>
</td>
<td>
<input class="form-control c1 amt" type="number" id="w0" name="amt1" />
</td>
<td>
<input class="form-control c2 amt" type="number" id="d0" name="amt2" />
</td>
</tr>
</tbody>
</table>
$(document).ready(function ()
{
if ($('#rd').prop('checked'))
{
$(".c1").attr("disabled", "disabled");
}
else if($('#rc').prop('checked'))
{
$(".c2").attr("disabled", "disabled");
}
var counter = 0;
$(document).on("focus", ".amt", function (event)
{
counter++;
var list = '<tr><td><input type="radio" name="wd' + counter + '" id="rd" value="dr" />Dm<br/><input type="radio" name="wd' + counter + '" id="rc" value="cr" />Cm</td><td><select id="m' + counter +
'" class="form-control "></select></td><td><input class="form-control c1 amt" type="number" id="w' + counter + '" name="amount" /></td><td><input class="form-control c2 amt" type="number" id="d' + counter + '" name="amount" /></td></tr>';
$('#tvtable').append(list);
});
});
http://jsfiddle.net/A8G5v/

You did not include jQuery in JSfiddle plus syntax errors.
You are appending checkboxes dynamically, so the if()..else() won't work on document.ready.
Add a delegated change event.
$(document).on('change', ':radio', function () {
if ($(this).prop('checked') && $(this).val() == 'dr') {
$(this).parents('tr').find(".c1").attr("disabled", "disabled");
$(this).parents('tr').find(".c2").removeAttr("disabled");
} else{
$(this).parents('tr').find(".c2").attr("disabled", "disabled");
$(this).parents('tr').find(".c1").removeAttr("disabled");
}
});
Note : Your code is generating duplicate IDs which wont work for later append.
Updated Demo

Categories

Resources