Accessing elements of class="input-append" - javascript

I'm using class="input-append" in <tr> so each row contains different inputs, and i have a button to append new inputs row,
<tr class="input-append">
<td>
<span>Person {{$index+1}}</span>
</td>
<td align="center">
Time From: <input type="text" ng-model="person.name"> Age: <input type="text" ng-model="person.age">
</td>
</tr>
for example:
ID,Name,Age , when i click the button a new row will be added. how i can access the inputs in javascript ?!! for example i want to access the Age in the second row.
regards.

Use document.getElementsByClassName() and QuerySelector
trs = document.getElementsByClassName("input-append");
personName = trs[1].querySelector("input[ng-model='person.name']").value;
personAge = trs[1].querySelector("input[ng-model='person.age']").value;
and your html
<table>
<tr class="input-append" >
<td>
<span>Person {{$index+1}}</span></td>
<td align="center">Time From: <input type="text" ng-model="person.name"> Age: <input type="text" ng-model="person.age">
</td>
</td>
</tr>
<tr class="input-append" >
<td>
<span>Person {{$index+1}}</span></td>
<td align="center">Time From: <input type="text" ng-model="person.name" value="testName"> Age: <input type="text" ng-model="person.age" value="testAge">
</td>
</td>
</tr>
</table>
See demo: http://jsbin.com/xemehoxono/edit?html,js,output

Related

javascript: Auto calculate price upon entering quantity in input box

In my program I am trying to auto calculate total price when user enter quantity in input box. For that I performed below script. but due to some error my script doesn't working as per expectation and when I enter quantity, total price doesn't get updated. Can anyone tell me what's wrong in my code. I want to perform this script without jquery.
code:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form action="" method="POST" name="myForm" id="myForm">
<table bgcolor="pink" align="center" border="2px">
<tbody>
<tr>
<th> Category </th>
<th> Description </th>
<th> Unit Price </th>
<th> Quantity </th>
<th> Total Price</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td> Paneer </td>
<td name="priceQ1"> $10 </td>
<td> <input type="text" size="4" id="q1" name="qty1" onkeyup="calculate()"> </td>
<td> <input type="text" id="total1" name="total1"> </td>
</tr>
<tr>
<td> Rice </td>
<td name="priceQ2"> $30 </td>
<td> <input type="text" size="4" id="q2" name="qty2" onkeyup="calculate()"> </td>
<td> <input type="text" id="total2" name="total2"> </td>
</tr>
<tr align="right">
<td colspan="4"> Subtotal $ </td>
<td> <input type="text" id="sub_total" name="sub_total"> </td>
</tr>
<tr>
<td rowspan="2">2</td>
<td> Chicken Palak </td>
<td name="priceQ3"> $20 </td>
<td> <input type="text" size="4" id="q3" name="qty3" onkeyup="calculate()"> </td>
<td> <input type="text" id="total3" name="total3"> </td>
</tr>
<tr>
<td> Aloo Tikki </td>
<td name="priceQ4 "> $14 </td>
<td> <input type="text" size="4" id="q4" name="qty4" onkeyup="calculate()"> </td>
<td> <input type="text" id="total4" name="total4"> </td>
</tr>
<tr align="right">
<td colspan="4"> Subtotal $ </td>
<td> <input type="text" id="sub_total2" name="sub_total2"> </td>
</tr>
</tbody>
</table>
<p align="center">
<input type="submit" value="Submit">
<input type="reset">
</p>
</form>
<script>
function calculate() {
var f = document.forms['myForm'];
for(var i=0;i<4;i++){
var qty = document.getElementByName('qty'+i);
document.getElementById('total'+i).value = newValue;
}
}
</script>
</body>
</html>
There is no document.getElementsById, you should name your different quantities and total price fields with distinct names and traverse thru them using document.getElementById('qty'+i);

How to modify cloned field form value and id inside table row?

I have 2 fields in my form that I want to clone using jQuery, but the selecting html table structure got me confused on how to change the id and the value of my form field and also the label text. Here's the form field structure
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
You will need to clone the entire element and then update the id's, values, and text in the cloned element before inserting.
function appendClonedFormInput(el,
newId,
newInputId,
newLabelText,
newName,
newValue) {
// Clone and update id
var $cloned = $(el)
.clone()
.attr('id', newId);
// Update label
$cloned.find('label')
.attr('for', newInputId)
.text(newLabelText);
// Update input
$cloned.find('input')
.attr('id', newInputId)
.attr('name', newName)
.val(newValue);
return $cloned.insertAfter(
$('input').last().parents('tr'));
}
appendClonedFormInput('#attribute-name',
'new-attribute-id',
'new-inp-id',
'New Label',
'new_field',
'new value');
appendClonedFormInput('#attribute-custom',
'new-custom-id',
'new-custom-inp-id',
'New Custom',
'new_custom',
'new custom value');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label">
<label for="listing_qty">quantity</label>
</td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
You can clone the HTML element using .clone() jquery function and on the cloned HTML element perform all the jquery operation as we can perform on normal jquery selector.
Please check below working snippet. In snippet I have changed the label name and ids.
$(function(){
var _counter = 1;
$("#cloned_html").on("click",function(){
var $button = $('#attribute-name').clone().prop("id","attribute-name-"+_counter);
$button.find('#listing_qty').prop("id","listing_qty_"+_counter).val("quantity-"+_counter);
$button.find("label").html("Quantity-"+_counter);
var selector = '#attribute-name'
if(_counter>1){
selector = '#attribute-name-'+(_counter-1)
}
$($button).insertAfter(selector);
_counter++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
<button id="cloned_html">Clone</button>
You should separate the final render from the template. Another important part of your feature would be assign an unique number to compose ids and names.
I would suggest you to implement a solution like https://github.com/BorisMoore/jquery-tmpl
Put the template inside a script node with an Id then copy it's content and replace {} occurrences as you need.

Trying to find previous DOM elements and get input value jquery

I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.
$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
alert(update_val_1);
alert(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.
Explicit example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var $firstCell = $parentRow.find('td:first-child');
var $secondCell = $parentRow.find('td:nth-child(2)');
var $firstInput = $firstCell.find('input');
var $secondInput = $secondCell.find('input');
var update_val_1 = $firstInput.val();
var update_val_2 = $secondInput.val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
Simplified example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var update_val_1 = $parentRow.find('td:first-child input').val();
var update_val_2 = $parentRow.find('td:nth-child(2) input').val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
I'm a big fan of the .closest(selector) and .find('selector') methods.
The first one goes up the dom until it finds the first match of the given selector.
The second one goes down the dom and finds all matches.
.eq(index) is like array[index] for jQuery. It takes a collection of jQuery elements and returns the one at the given index.
$('.update_button').on("click",function(){
var inputs = $(this).closest('.gridtable').find('input');
var value1 = inputs.eq(0).val();
var value2 = inputs.eq(1).val();
});

Find hidden input value on same table row as checkbox

I have a Table in which I have checkboxes that onclick on checkboxes I want to know 2 things
ID of the checkbox
ID of the hidden field on same table row
So I do have a hidden field in each row and I want to know what that value is
My checkbox I can see from my Fiddle is GridView1__ctl3_chkOut but then I want jquery to find the value of the hidden field in same table row
I see that GridView1__ctl2_hndTxtId value is 3601 , but I will have many rows ...
Fiddle --> http://jsfiddle.net/bthorn/x9fc28nn/2/
jquery
$('.out').on('change', function () {
$(this).closest('tr').find('.out').not(this).prop('checked', false);
console.log(this.id);
//what is the hidden field value in same row?
});
$('.yesno').on('change', function () {
$(this).closest('tr').find('.yesno').not(this).prop('checked', false);
//what is the hidden field value in same row?
});
console.log shows me the ID
<table>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblVehicle0">413</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblName2">LONG</span>
</td>
<td style="width:100px;"> <span id="GridView1__ctl2_lblEquip2">BKT/TDR/M</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblScheduleb">0600-1430</span>
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblScheduleOrig2">8</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOn"></span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOff"></span>
</td>
<td>
<input id="GridView1__ctl2_chkOut" type="checkbox" name="GridView1:_ctl2:chkOut" checked="checked" class="out">
</td>
<td>
<input id="GridView1__ctl2_chkYes2" type="checkbox" name="GridView1:_ctl2:chkYes2" checked="checked" class="yesno">
</td>
<td>
<input id="GridView1__ctl2_chkNo2" type="checkbox" name="GridView1:_ctl2:chkNo2" class="yesno">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl2:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_AddButton0" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl2:txtStormTimeOn" type="text" value="9-15-2015 12:00" id="GridView1__ctl2_txtStormTimeOn">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl2:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_OffButton" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl2:txtStormTimeOff" type="text" value="9-15-2015 12:28" id="GridView1__ctl2_txtStormTimeOff">
</td>
<td style="width:500px;"> <span id="GridView1__ctl2_lblComments"></span>
</td>
<td style="width:500px;">
<input name="GridView1:_ctl2:txtStormComments" type="text" value="testfasdfsdfasdfsadfasdfsadf" maxlength="200" id="GridView1__ctl2_txtStormComments" style="width:200px;">
</td>
</tr>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl3_lblVehicle0">215</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblName2">MORGAN</span>
</td>
<td style="width:100px;"> <span id="GridView1__ctl3_lblEquip2">BKT/TDR</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblScheduleb">0600-1430</span>
</td>
<td style="width:50px;"> <span id="GridView1__ctl3_lblScheduleOrig2">8</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOn"></span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOff"></span>
</td>
<td>
<input id="GridView1__ctl3_chkOut" type="checkbox" name="GridView1:_ctl3:chkOut" class="out">
</td>
<td>
<input id="GridView1__ctl3_chkYes2" type="checkbox" name="GridView1:_ctl3:chkYes2" class="yesno">
</td>
<td>
<input id="GridView1__ctl3_chkNo2" type="checkbox" name="GridView1:_ctl3:chkNo2" class="yesno">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl3:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_AddButton0" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl3:txtStormTimeOn" type="text" id="GridView1__ctl3_txtStormTimeOn">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl3:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_OffButton" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl3:txtStormTimeOff" type="text" id="GridView1__ctl3_txtStormTimeOff">
</td>
<td style="width:500px;"> <span id="GridView1__ctl3_lblComments"></span>
</td>
<td style="width:500px;">
<input name="GridView1:_ctl3:txtStormComments" type="text" maxlength="200" id="GridView1__ctl3_txtStormComments" style="width:200px;">
</td>
</tr>
</table>
You already got the ID of the checkbox. To get the value of the hidden input field of the row use the following code:
$('.yesno').on('change', function () {
$(this).closest('tr').find('input[type="hidden"]').val()
});
See this JSfiddle demo
You can find information about the selectors at : https://api.jquery.com/category/selectors/
Taking a part of your fiddle, it looks about:
$tr = $(this).closest('tr');
hidden = $tr.find('input[type="hidden"]');
console.log(hidden);
Use the find method as you are already using but with 'input[type=hidden]':
$('.out').on('change', function () {
var $tr = $(this).closest('tr');
$tr.find('.out').not(this).prop('checked', false);
console.log(this.id);
//what is the hidden field value in same row?
var hiddenVal = $tr.find('input[type=hidden]').val();
console.log(hiddenVal);
});
$('.yesno').on('change', function () {
var $tr = $(this).closest('tr');
$tr.find('.yesno').not(this).prop('checked', false);
//what is the hidden field value in same row?
var hiddenVal = $tr.find('input[type=hidden]').val();
console.log(hiddenVal);
});
Fiddle
You already have the id of the checkbox. You can get the id of the hidden input element using:
var hiddenID = $(this).closest('tr').find('input[type=hidden]').prop('id');
And you can get the value of the same field like so:
var hiddenVal = $(this).closest('tr').find('input[type=hidden]').val();

How to get all text from all textboxes with class txt_Answer

<table id="tb_Answers">
<tbody>
<td>
<input class="txt_Answer" placeholder="Enter Answer">
</td>
<td>
<td colspan="4">
</tr>
</tbody>
<tr>
<td>
<input class="txt_Answer" placeholder="Enter Answer">
</td>
<td>
<td>
</tr>
<tr>
<td>
<input class="txt_Answer" placeholder="Enter Answer">
</td>
</tr>
</table>
I got 3 inputs with answers.How to get all this text/answer by class txt_Answer i tried this
$('*[class="txt_Answer"]').val()
but this returns me only the first value not all of thaem
By iterating and creating an array with $.map :
var values = $.map($('input.txt_Answer'), function(el) {return el.value;});
FIDDLE
You should also validate your HTML, as it's not valid
Try this code which is using the each method :
$('.txt_Answer').each(function() {
text = $(this).val()
alert(text)
})

Categories