Develop Reference

the "closest()" method in jquery wont work

so i have this html code and jquery code. And when i press a tablerows "produkter" button whith the class name "fa-products", i want to find the hidden field input that is on the same tablerow as the button you choose to click(every tablerow have a hidden field input and a "produkter button"). Then i want to save the value of the hidden field in a variable thats all can anyone help me? when i "console.log(discountId);" it responds undefiend
<div class="eastSide row top-buffer col-xs-8" style="overflow:scroll; height:250px;">
<table style="width:100%">
<tr>
<th>Code</th>
<th>Aktiv</th>
<th>Skapad</th>
<th></th>
</tr>
#foreach (var discount in Model.DiscountList)
{
<tr>
<td><input name="codeTextBox" id="codeTextBox" value="#discount.Code" maxlength="18" /></td>
<td><input type="checkbox" id="activeCheckBox" name="activeCheckBox" checked="#discount.Active" /></td>
<td><input type="datetime" value="#discount.CreatedDate" readonly /></td>
<td>
<input type="button" value="Radera" class="fa fa-remove" data-url="#Url.Action("DeleteDiscountCode","Discount",new { id= discount.Id})" />
<input type="button" value="Uppdatera" class="fa fa-update" data-url="#Url.Action("UpdateDiscount","Discount")" />
<input type="button" value="Produkter" class="fa fa-products" id="#discount.Id" data-url="#Url.Action("chooseProductsForDiscountCode","Discount")" />
</td>
<td><input id="id" type="hidden" value="#discount.Id" /></td>
</tr>
}
</table>
</div>
<script>
$(".fa-products").on("click", function (e) {
var discountId = $(event.target).closest('input[type="hidden"]').val();
console.log(discountId);
});
</script>

It will not work, because the hidden input is not the parent of the registered element.
Probably this will solve your issue: $(event.target).closest('tr').find('input[type="hidden"]').val();

You need to do search for common parent element via closest and then find input inside of the result:
$(".fa-products").on("click", function (e) {
var discountId = $(event.target).closest('tr').find('input[type="hidden"]').val();
console.log(discountId);
});

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>

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");

Dynamic html table with jQuery

How to do dynamic html table on JS with jQuery? For example I must have 6 buttons:
Add row to begin table;
Add row to middle;
Add row to end;
Delete first row;
Delete middle row;
Delete last row;
UPD:
That's my JS:
$(document).ready(function(){
$('#addFirstPosition').click(function(){
var $tr = $('<tr><td>3</td><td>3</td></tr>');
//var $myTable = $('#myTable');
//$myTable.append($tr);
$("#myTable > tbody").append($tr);
);
});
And this is my html:
<input id="addFirstPosition" type="button" value="AddFirst" />
<input id="addMiddlePosition" type="button" value="AddMiddle" />
<input id="addLastPosition" type="button" value="AddLast" />
<br />
<input id="deleteFirstPosition" type="button" value="DelFirst" />
<input id="deleteMiddlePosition" type="button" value="DelMiddle" />
<input id="deleteLastPosition" type="button" value="DelLast" />
<br />
<br />
<table id="myTable" border="1px">
<tbody>
<tr>
<td>
1
</td>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
<td>
2
</td>
</tr>
</tbody>
</table>
When I click to button, nothing happens.

going by the format in which u have asked this ques
search for the rows by doing a $(tr);
then use
.append(); for adding to the last
.prepend(); for adding to the first
select an elemnt by doint $(tr).eq(index).after() to add in between
after you have selected the row
which you can do by
var r = $(tr).eq(index)
to delete you can do
r.remove()
no matter where you row is present

There were errors in your js code:
$(document).ready(function() {
$('#addFirstPosition').click(function() {
var $tr = $('<tr><td>3</td><td>3</td></tr>');;
$("#myTable > tbody").append($tr);
});// I WAS MISSING A } BEFORE );
});​
brackets missing or in the wrong places. The code above is corrected and I commented on the mistake.
demo here
but Parv Sharma had some good points in his/her answer.

how to get a value in a list on a checkboxlist control and use it to validate

I have a form in asp.net 3.5 , which has a master page and a child page (content page). The form has several questions, I am using the asp.net checkboxlist for a questions, since multiple options can be selected, if the user selects 'Other' on one of the selections, then they have to enter data into a textbox field.
I made the following client side javascript to validate this but, the code doesnt seem to check wheter the Other option value is selected, I believe it has to do with the way the html is rendered on the page,,,
Can you please suggest how to do this?
Thanks in advance.
Rendered Javascript
//Here I am trying to get the text property of the label rendered for the texbox
// and set my validation arguments
<script language='javascript' type='text/javascript'>
function checkOther2(oSrc, args) {
{
var elementRef =
document.getElementById('ctl00_Content_CheckBoxList1');
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];
if (checkBoxRef.checked == true) {
// You can only get the Text property, which
will be in an HTML label element.
var labelArray =
checkBoxRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedValues.length > 0)
checkedValues += ',';
checkedValues += labelArray[0].innerHTML.text;
if (checkedValues == 'Other') {
args.IsValid = !(args.Value == "")
// test
alert("Hello");
}
}
else {
args.IsValid = true;
}
}
}
}
}
// HTML Rendered
<tr>
<td style="height: 20px">
</td>
</tr>
<tr>
<td style="font-weight: 700">
2.- What did you like most about working here?<strong>
Check all that apply
<span id="ctl00_Content_CheckBoxListValidator1"
style="color:Red;display:none;"></span>
</strong><br /> </td>
</tr>
<tr>
<td>
<table id="ctl00_Content_CheckBoxList1"
class="myradioButton" border="0">
<tr>
<td><input id="ctl00_Content_CheckBoxList1_0" type="checkbox"
name="ctl00$Content$CheckBoxList1$0" /><label
for="ctl00_Content_CheckBoxList1_0">Staff</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_1" type="checkbox"
name="ctl00$Content$CheckBoxList1$1" /><label
for="ctl00_Content_CheckBoxList1_1">Facility</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_2" type="checkbox"
name="ctl00$Content$CheckBoxList1$2" /><label
for="ctl00_Content_CheckBoxList1_2">Pay</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_3" type="checkbox"
name="ctl00$Content$CheckBoxList1$3" /><label
for="ctl00_Content_CheckBoxList1_3">Other</label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
If other, please elaborate:<br />
<input name="ctl00$Content$txt2other"
type="text" id="ctl00_Content_txt2other" class="txtOther" />
<span id="ctl00_Content_CustomValidator3"
style="color:Red;font-weight:700;visibility:hidden;">Please enter a
comment in question #2.</span>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td style="font-weight: 700">
2.- What did you like most about working here?<strong>
Check all that apply
<cc1:CheckBoxListValidator
ID="CheckBoxListValidator1" runat="server"
ControlToValidate="CheckBoxList1" Display="None"
ErrorMessage="Question 2 is
Required"></cc1:CheckBoxListValidator>
</strong><br /> </td>
</tr>
<tr>
<td>
----------- Actual Markup on asp.net form
<asp:CheckBoxList ID="CheckBoxList1"
runat="server" CssClass="myradioButton">
<asp:ListItem Text="Staff"
Value="Staff">Staff</asp:ListItem>
<asp:ListItem Text="Facility"
Value="Facility">Facility</asp:ListItem>
<asp:ListItem Text="Pay"
Value="Pay">Pay</asp:ListItem>
<asp:ListItem Text="Other"
Value="Other">Other</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td>
If other, please elaborate:<br />
<asp:TextBox ID="txt2other" runat="server"
CssClass="txtOther"></asp:TextBox>
<asp:CustomValidator
ID="CustomValidator3" runat="server"
ClientValidationFunction="checkOther2"
ControlToValidate="txt2other"
ErrorMessage="Please enter a comment in
question #2." style="font-weight: 700"
ValidateEmptyText="True"></asp:CustomValidator>
</td>
</tr>

Your JS looks rather complicated. Try a more simple approach...
function isValid(f)
{
var cb = document.getElementById('<%=CheckBoxList1_3.ClientID%>');
if(cb && cb.checked)
{
var tb = document.ElementById('<%=txt2other.ClientID%>');
if(tb && tb.value.length > 0)
{
f.submit();
}
else
{
alert('Please enter a comment in question #2.');
}
}
}
If you have a lot of these, try setting a property on the checkbox like value=other so when you loop through your checkboxes, you can use if(cb.checked && cb.value == 'other')