Develop Reference

How do I locate elements in the same row as another in a dynamic table?

I am making a page that contains a table with a button to add a row. It is a table for users to input data, and will eventually be submitted to a database.
Currently, I have a price and a quantity field in each row. When either of them change, I want to calculate the total and write it to another cell.
This is my event handler (wrapped in $(document).ready()):
$(".quantity_input, .price_input").change(function () {
console.log(this.value);
cal_total();
});
This is my current code:
function cal_total() {
if (isNaN(parseFloat(this.value))) {
alert("You must enter a numeric value.");
this.value = "";
return;
}
var cell = this.parentNode;
var row = cell.parentNode;
var total = parseFloat($("#items_table tr").eq(row.index).find("td").eq(3).find("input").first().val()) * parseFloat($("#items_table tr").eq(row.index).find("td").eq(4).find("input").first().val());
if (!isNaN(total)) {
$("#items_table tr").eq(row.index).find("td").eq(5).html(total.toFixed(2));
}
}
And this is what the inputs look like:
<input type='text' class='fancy_form quantity_input' name='quantities[]' size='4' style='text-align:center;border-bottom:none;'>
In addition to my original question, the event is never fired. Can anyone see why?
But more importantly, is this the best way to retrieve the values? I really don't think so but I cant come up with anything more clever.
Thank you!

you have to pass paremeter to calc_total to define input or tr
try this code
$(".quantity_input, .price_input").change(function () {
$(".quantity_input, .price_input").change(function () {
cal_total(this);
});
});
function cal_total(elem){
var row=$(elem).closest("tr")
var quantity=row.find(".quantity_input").val()-0
var price=row.find(".price_input").val()-0
var total=quantity * price
row.find(".totl_input").val(total)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
</table>

Show and hide input fields using 4 radio buttons using HTML and Javascript

I am a complete beginner with Javascript.
I have 4 radio buttons:
House
Flat / Apartment
Bungalow
Commercial
And 2 input fields:
Rooms:
Bedrooms:
on click of House, Flat, Bungalow, I want to hide Rooms and show the input field Bedrooms on click of commercial I want to hide Bedrooms and show Rooms.
Please see my code below:
HTML CODE:
<table id="CurrentProperty">
<tr>
<td colspan="3">
<label>Type of Property:</label>
<br/>
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" checked="checked" />House
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Flat / Appartment
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Bungalow
<input type="radio" id="showRooms" value="rooms" name="fromType" />Commercial</td>
</tr>
<tr class="showCta">
<td colspan="3">
<label>Rooms:</label>
<input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
</td>
</tr>
<tr class="showTr">
<td colspan="3">
<label>Bedrooms:</label>
<input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
</td>
</tr>
</table>
JAVASCRIPT:
$(window).load(function () {
$('#showBedrooms').on('click', function () {
$('.showCta').hide();
});
});
$(window).load(function () {
$('#showRooms').on('click', function () {
$('.showCta').show();
});
});

JS should be something like
function update (el) {
var $rooms = $('tr.showCta');
var $bedrooms = $('tr.showTr');
if (el.checked && el.value === 'bedrooms') {
$rooms.hide();
$bedrooms.show();
} else {
$rooms.show();
$bedrooms.hide();
}
}
$(function () {
//get initial state.
update($('input:checked')[0]);
$('input[name="fromType"]').change(function () {
update(this);
});
});
jsFiddle http://jsfiddle.net/bj4Lx7ms/

JAVASCRIPT:
$( document ).ready(function () {
$('#showBedrooms').on('click', function () {
$('.showCta').hide();
});
$('#showRooms').on('click', function () {
$('.showCta').show();
});
});
After the document loaded and set the onclick handlder
And I think you should set
<tr class="showCta">
to
<tr class="showCta" style="display:none;">

in your case, user change from jquery. Bind an event handler to the "change" JavaScript event, or trigger that event on an element (your radiobuttons). With $(this).val() you can get the value from the value attribute, to check is the value bedrooms. Then call the methode show or hide like in this example:
$(document).ready(function () {
$('input:radio[name="fromType"]').change(function(){
if($(this).val() == 'bedrooms'){
$('.showCta').hide();
$('.showTr').show();
}else if ($(this).val() == 'rooms'){
$('.showCta').show();
$('.showTr').hide();
}
});
});
And hide the showCta tr as default with:
<tr class="showCta" style="display:none">
Here my JsFiddle-example

$(window).load(function () { /* You don't need to call twice this function, just wrap all your function in it */
function hideRooms() {
$("#rooms").hide(0);
$("#bedrooms").fadeIn(250);
}
function hideBedrooms() {
$("#bedrooms").hide(0);
$("#rooms").fadeIn(250);
}
$("#label").text("House selected");
hideRooms(); /* Hidding at start of website */
$("#showBedrooms_house").change(function() {
$("#label").text("House selected");
if (this.checked) {
hideRooms();
}
});
$("#showBedrooms_flatAppart").change(function() {
$("#label").text("Flat / Appartment selecrted");
if (this.checked) {
hideRooms();
}
});
$("#showBedrooms_bungalow").change(function() {
$("#label").text("Bungalow selected");
if (this.checked) {
hideRooms();
}
});
$("#showRooms_commercial").change(function() {
$("#label").text("Commercial selected");
if (this.checked) {
hideBedrooms();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="CurrentProperty">
<tr>
<td colspan="3">
<label>Type of Property:</label>
<br/>
<input type="radio" id="showBedrooms_house" value="bedrooms" name="fromType" checked="checked" />House
<input type="radio" id="showBedrooms_flatAppart" value="bedrooms" name="fromType" />Flat / Appartment
<input type="radio" id="showBedrooms_bungalow" value="bedrooms" name="fromType" />Bungalow
<input type="radio" id="showRooms_commercial" value="rooms" name="fromType" />Commercial</td>
</tr>
<tr class="showCta" id = "rooms">
<td colspan="3">
<label>Rooms:</label>
<input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
</td>
</tr>
<tr class="showTr" id = "bedrooms">
<td colspan="3">
<label>Bedrooms:</label>
<input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
</td>
</tr>
<tr>
<td style ="color : blue">
<label id ="label"></label>
</td>
</tr>
</table>

finding hidden field value above a checked checkbox

I am attempting to return the hidden input field value above a checked checkbox. As it is at the moment I am finding a value of undefined.
This is what I have tried.
var checkedTopics = document.getElementsByName("chkRelatedTopics");
for (var i = 0; i < checkedTopics.length; i++) {
if (checkedTopics[i].checked) {
var uniqueKeyTopic = $(this).parent().
find("input[name=hidTopicsDomain]").val();
console.log(uniqueKeyTopic);
}
}
this is the markup
{{each Items}}
<tr>
<td>
<input type='hidden'
name='hidTopicsDomain' value='${DomainObjectKey}'/>
<input type='checkbox'
name='chkRelatedTopics' value='${subject}'/>
</td>
<td><label id='labRelatedTopicDisplay'>${subject}</label>
</tr>
{{/each}}
How can I retrieve this hidden input field value?
Thanks

Try this:
$('input[type=checkbox]:checked').each(function(){
$(this).prev('input[name=hidTopicsDomain]').val();
});
or if you want to control checked and unchecked then use this:
$('input[type=checkbox]').each(function(){
if($(this).is(':checked')){
//perform something if checked
}
else{
//perform something if not checked.
}
});

You can't use this in the for loop, use .each() and use siblings to find the input
var checkedTopics = document.getElementsByName("chkRelatedTopics");
$(checkedTopics).each(function(){
if (this.checked) {
var uniqueKeyTopic = $(this).siblings("input[name=hidTopicsDomain]").val();
console.log(uniqueKeyTopic);
}
});

Check below if this helps.
http://jsfiddle.net/sandeep605085/28peQ/2/
html:
<table>
<tr>
<td>
<input type='hidden' name='hidTopicsDomain' value='HiddenFieldValue1'/>
<input type='checkbox' checked name='chkRelatedTopics' value='checkbox1'/>
</td>
<td>
<label id='labRelatedTopicDisplay'>label1</label>
</td>
</tr>
<tr>
<td>
<input type='hidden' name='hidTopicsDomain' value='HiddenFieldValue2' />
<input type='checkbox' checked name='chkRelatedTopics' value='checkbox2'/>
</td>
<td>
<label id='labRelatedTopicDisplay'>label2</label>
</td>
</tr>
<tr>
<td>
<input type='hidden' name='hidTopicsDomain' value='HiddenFieldValue3'/>
<input type='checkbox' name='chkRelatedTopics' value='checkbox3' />
</td>
<td>
<label id='labRelatedTopicDisplay'>label3</label>
</td>
</tr>
<tr>
<td>
<input type='button' id='buttonclick' value='Click to Test' />
</td>
</tr>
</table>
js:
$('#buttonclick').click(function(){
var checkedTopics = $('input[name="chkRelatedTopics"]');
checkedTopics.each(function(){
if ($(this).is(':checked')) {
var uniqueKeyTopic = $(this).prev().val();
alert(uniqueKeyTopic);
}
});
});
Thanks.

AJAX: add new row to table or remove using AJAX

This is the logic:
I input something to form, and the form is AJAX live search. after I found value, I click on add button and it creates new row in existing table / tbody.
<table class="standard">
<thead>
<tr>
<td colspan="2">
Start Input barcode / Product Name
</td>
<td colspan="4">
<input type="text" size="90" value="" placeholder="Barcode / Product Name">
</td>
<td>
<button class="tambah"><i class="icon-plus"></i> Add</button>
</td>
</tr>
<tr>
<td>
No.
</td>
<td>
Kode Barang
</td>
<td>
Nama Barang
</td>
<td>
Qty
</td>
<td>
Harga
</td>
<td>
Disc %
</td>
<td>
Total
</td>
</tr>
</thead>
<tbody>
<!-- when button add is click that will add <tr></tr> here -->
</tbody>
</table>
can i do that? if so, how?
Fiddle Example: http://jsfiddle.net/anggagewor/cauPH/

You can find the pseudo code below.
$('#button_id').on('click', function(e) {
$.ajax({
url : yourUrl,
type : 'GET',
dataType : 'json',
success : function(data) {
$('#table_id tbody').append("<tr><td>" + data.column1 + "</td><td>" + data.column2 + "</td><td>" + data.column3 + "</td></tr>");
},
error : function() {
console.log('error');
}
});
});

Try this
var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;
$('#addScnt').click(function() {
scntDiv.append('<tr><td><select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select></td><td><select name="accounts" id="accounts"><option value="">SELECT</option><option value="One">One</option><option value="Two">Two</option></select></td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td>Remove</td></tr>');
i++;
return false;
});
//Remove button
$(document).on('click', '#remScnt', function() {
if (i > 2) {
$(this).closest('tr').remove();
i--;
}
return false;
});​
Here's a working example, including remove row functionality: DEMO.

$("<tr><td>.....content...<td><a class='remove'>remove</a>").appendTo("#tableid tbody").find('.remove').click(function () {
$(this).parent().parent().remove();
});

In your ajax response you can do this
$("#myTable > tbody").append('<tr><td>my data</td><td>more data</td></tr>');
'#myTable' will be replaced by your table id or class and <td>my data</td><td>more data</td> will be replaced by your content

Find textbox value and attribute if wrapped in span

I have a listview that contains a dropdown, 3 textboxes, 1 textbox wrapped in a span to toggle visiblility and 2 buttons.
I'm having trouble accessing the value and a value of an attribute of the textbox wrapped in the span. It probably has to do with how I'm trying to access it. Any help is appreciated.
Here is the listview:
<asp:ListView runat="server" ID="ListView1">
<LayoutTemplate>
<table id="tablesorter" style="border: solid 1px black; width: 55%;">
<thead>
<tr>
<th>
Country
</th>
<th>
Info.
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
<tfoot>
</tfoot>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<select id="Existing" data="<%# Eval("Type").ToString()%>"
class="Existing" style="width: 90px">
<option value="0">USA</option>
<option value="1">CAN</option>
<option value="2">MEX</option>
</td>
<td>
<input size="4" data="" type="text" id="city" value="<%# Eval("City")%>" />
<input size="4" data="" type="text" id="state" value="<%# Eval("State")%>" />
<input size="4" data="" type="text" id="Phone" value="<%# Eval("PhoneNbr")%>" />
<span class="ZipBox" id="ZipBox" style="visibility: hidden">
<input maxlength="5" data="" class="zip" size="5" type="text" id="zip" value="<%# Eval("ZIP")%>" />
</span>
</td>
<td>
<2 buttons here>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Here is my Javascript where I'm accessing the values of all the textboxes and such on button click...
$(.updatebuttonclick)
.click(function() {
var parent = $(this).parent().prev();
var tr = $(this).closest('tr');
var TypeNode = tr.find("select.Existing").first();
var cityNode = parent.children(".city").first();
var stateNode = parent.children(".state").first();
var phoneNode = parent.children(".phone").first();
var zipNode = parent.children(".zip").first();
var newcity = cityNode.val();
var originalcity = cityNode.attr('data');
var newstate = stateNode.val();
var originalstate = stateNode.attr('data');
var newphone = phoneNode.val();
var originalphone = phoneNode.attr('data');
//check for business type for extension
if (newcity == "2") {
var newzip = zipNode.val();
var originalzip = zipNode.attr('data');
}
});

Is it as easy as setting IDs to the text boxes and accessing them via:
document.getElementById('yourtextboxid').value
or
document.yourformname.yourtextboxname.value
or
$('#yourtextboxid').val()

Just access the zipNode by ID:
var zipNode = parent.find("#zip");

You can use find function to find element deeply in the DOM
var zipNode = parent.find(".zip");