Getting an input element value inside TR table - javascript

I have an html table called #DimensionAttributes whose columns are as follows:
<td><input type="text" name="txtLEName" value="#attribute.Key" /></td>
I intentionally wanted to maintain the name of the input element static. There can be multiple rows bound to this table. How do I loop through each row and find out the input elements value using the ID. The reason I wanted to use ID is because there can be multiple columns that would come soon in this table. Please help

Use selector, perhaps:
$("input[name='txtLEName']")

Well, first all, an ID must be unique, instead used class. Or if you eagerly wanted to use ID, try selecting by this :
Suppose you have this two element with same ID name :
<td><input type="text" name="txtLEName" value="#attribute.Key" id="hello"/></td>
<td><input type="text" name="txtLEName" value="#attribute.Key" id="hello"/></td>
Then your selector should be :
$('[id="hello"]')
Or another way, if you want to increment the ID name like :
<td><input type="text" name="txtLEName" value="#attribute.Key" id="hello1"/></td>
<td><input type="text" name="txtLEName" value="#attribute.Key" id="hello2"/></td>
As you dont know how many of element since the element created dynamically, then you can select it using this :
$('[id^="hello"]') // find the element ID name start with `hello`

If you want to loop thru each row, why not write something like this:
$("#DimensionAttributes tr input[name='txtLEName']").each(function(){
//Your code here:
//$(this).val()
});

var $rows = $('#table').find("tr:not(:eq(0))");
$rows.each(function () {
var $tds = $(this).find('td');
var val = $tds.find(':text').val();
console.log(val);
})
Assuming you have 1 input text each row you can select the table id find the tr and iterate and find td with input and get the value
DEMO

Related

How can I hide this table row based on the value of an input field 4 levels down

I have a table with lots of rows
I have a filter to hide these rows based on the content of a child element (an input field) several levels down within the row
The input field within the row is wrapped several times. I can't manage to hide the row based on that inputs value.
Here's how a row looks:
<tr class="acf-row" data-id="row-13">
<td class="acf-field acf-field-date-picker acf-field-5de02ec006a2e" data-name="datum" data-type="date_picker" data-key="field_5de02ec006a2e">
<div class="acf-input">
<div class="acf-date-picker acf-input-wrap" data-date_format="dd.mm.yy" data-first_day="1">
<input type="text" class="input hasDatepicker" value="24.03.2020" id="dp1582735317447">
</div>
</div>
</td>
</tr>
Please note that there are more siblings on each level than I've put in here for readability. But the hierarchy is as displayed here.
Then I've got this input field to define what we want to filter:
<input placeholder="Datum filtern" type="text" id="datefilter" style="padding:5px; width:150px;">
And last but not least the jquery:
$( "#datefilter" ).change(function() {
var filterdate = $("#datefilter").val();
jQuery('.input.hasDatepicker').each(function() {
var currentElement = $(this);
var dateinfield = currentElement.val();
if( dateinfield !== filterdate){
$(this).closest('.acf-row').hide();
}
});
});
Currently it hides all the rows, not just those with a different value. What should happen is that only the rows get hidden where the value of #datefilter is different from the value of .input.hasDatepicker
I tried a few things like trying to use .parent().parent()... but didn't get it to work. Help would be greatly appreciated.
Here's a jsfiddle with the whole table including all siblings:
https://jsfiddle.net/59by3w7o/
UPDATE:
I think I can now say for sure the issue is 2 instances of the input element in each row. Here's a jsfiddle with only that and no noise:
https://jsfiddle.net/8k41xy6u/
How could I solve that? I tried playing with :first but couldn't get it to take the first within each .acf-row and not the very first in the whole document.
From the updated JSFiddle, a table row looks something like:
<tr class="acf-row">
<td>
<div class="acf-input">
<div>
<input class="input hasDatepicker" type="text" value="26.03.2020">
<input class="input hasDatepicker" type="text" value="10:00">
</div>
</div>
</td>
</tr>
And now the problem becomes clear. In the JS, .each() iterates over everything with the classes .input and .hasDatepicker. Both your inputs match that, so it will test both of them. If the value of the either one does not match your filterdate that row will be hidden. But the 2nd input value is a time, and that will never match a date, no matter what the date is - so every row will always be hidden.
There are 2 obvious ways to tackle this - 1) make the inputs distinguishable, so you can target just the date input in your filter comparison, OR 2) somehow target just the first input in the set of 2.
The first option (make them distinguishable) is by far the best, as the second relies on the layout of the HTML. It could happen in future that you'll do a redesign and the inputs won't be in the same order, or even in the same <div>, and then your JS will break. That might even happen without you doing it or even knowing about it if the HTML is autogenerated by some 3rd-party library (eg ACF/Wordpress), and a plugin update changes things. But if you can distinguish the inputs then you can target the right ones no matter where they are on the page.
To make them distinguishable, you could add a class, eg:
<input class="input hasDatepicker date" type="text" value="26.03.2020">
Then update your JS to target only those:
$('.input.hasDatepicker.date').each(function(i) {
If changing the HTML isn't an option, then you'll have to rely on and make use of position. Iterate instead over all div.acf-inputs, and find the first input in each:
$('div.acf-input').each(function(i) {
var dateinfield = $(this).find('input.input.hasDatepicker').first().val();
// ...
Working JSFiddle (of option 2).

Use JQuery to multiply values from dynamically created input fields

I'm using JQuery to dynamically create table rows. Each row contains 3 text fields. As users type into a text field, the table row is cloned and multiple rows are added as required. All that works fine.
Numerical values are entered into the first 2 fields, which are multiplied. The output automatically appears in the 3rd text box. As the input fields are clones, I can't use getElementById to run the function & multiply the values.
I was told to use onchange using parent siblings, but I don't know how to do that. Can someone give me an example?
Here is a sample of my code in JS Fiddle: https://jsfiddle.net/mzctb778/
Since you are adding things dynamically you should use event delegation to listen for change events. Do this by attaching it to the table. So listen for a change on an input. Once you detect the change, get the row by looking up the DOM and select the inputs you need to multiply. Since you can not use ids since they need to be unique, use classes to reference the elements.
$("table").on("change", "input", function () { //use event delegation
var tableRow = $(this).closest("tr"); //from input find row
var one = Number(tableRow.find(".one").val()); //get first textbox
var two = Number(tableRow.find(".two").val()); //get second textbox
var total = one * two; //calculate total
tableRow.find(".three").val(total); //set value
});
$("button.add").on("click", function() {
var tbody = $("table tbody");
tbody.find("tr:eq(0)").clone().appendTo(tbody).find("input").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><input class="one" /></td>
<td><input class="two" /></td>
<td><input class="three" readonly="readonly"/></td>
</tr>
</tbody>
</table>
<button class="add">Add</button>
Add this to your script and it will do the calculations you want:
$("table select").on("change", function(){
var x=$(this).find(":selected").val();
var y=$(this).closest("td").siblings().find(":selected").val();
$(this).closest("td").siblings().find("input").val(x*y);
});
New JS Fiddle

adding n removing row in table with unique id of elements

here's a demo table
<table id="table1">
<tr>
<td><label>name</label><input type="text" id= "name1"/></td>
<td><label>age</label><input type="text" id= "age1"/></td>
<td><input type="button" id= "addRow"style="background-image:url("images/addicon.png");"/></td>
</tr>
and jquery code m trying is
$("#addRow").live("click", function (e, index) {
var val = ("#table1 tr").length();
val++;
$('#table1 tbody > tr:last').after('<tr><td><label>name</label><input type="text" id= "name"'+val+'/></td><td><label>age</label><input type="text" id= "age"'+val+'/></td><td><input type="button" id= "addRow"style="background-image:url("images/addicon.png");"/></td><td><input type=button id="deleteRow" style="background-image:url("images/removeicon.png");"></td>');
});
$("#deleteRow").live("click",function(e,index){
$(this).parent().closest("tr").remove();
});
Now problem comes when somebody add a row 2 times and delete a row
i.e val will be name2, name3
suppose name2 is deleted
then again adding row no. of rows is 2 so val++
result in 3
and new row will have name3 as id, this is creating problem for me.
What actually i want is, I should maintain the row count
1 2 3 ... like this irrespective what row is deleted.
Can anyone help me out with this, I have gone through loads of tutorial but none of them have maintained a uniform rowcount that's y i have put up this question.
You can use input names like name[] to have an array of values in the form. This is easier than using things like name1, name2, etc. If your concern is the labels, you can wrap an input in a label and skip the for, like so:
<label>String: <input></label>
Clicking String: focuses the input.
If you want to stick with what you have, just store val one scope outside of .click and increment it every time. Don't rely on the length.
By the way, you should also switch from .live to .on assuming it's available.

Search through an HTML Table and find text fields with required classes

I'm creating a validation script for a multi-step form, each group is inside a table and I want to check that the containing table has a required field inside it.
I've tried to implement this as below:
(where a = table id
.required = class, but the classes are like class = "something required")
function validForm(a) {
var myVar = $('a').find('.required').val();
alert(myVar);
}
the problem is that this code returns undefined. This is my first time using a .find function and I am having a hard time understanding how to use it.
HTML:
<table id = "default">
<tr><td>Default</td></tr>
<tr><td>Field name</td><td><input type="text" name="first_name" maxlength="35" class="txtfield-cu1 required" title="First Name"></td></tr> <- repeat a couple of times
if a is the table id, you will need to select by $('#a') instead of $('a').
In jQuery selection (and CSS) '#a' selects the tag with id = 'a', whereas a selects the <a> tag.
Edit: if a here stands for a variable that represents the id of the table, then you can use
$(a) to select it.
Edit 2: jsfiddle link
Try $("#a") to select by ID and not by tag name.

Selecting the correct input field using jquery

I'm trying to select the id's of dynamic input fields in my code. When clicking a button, the form will create a form field like this:
<td><input type="text" id="field_a_1"></td>
<td><input type="text" id="field_b_1"></td>
<td><input type="text" id="field_c_1"></td>
When I click on the button again I get this:
<td><input type="text" id="field_a_2"></td>
<td><input type="text" id="field_b_2"></td>
<td><input type="text" id="field_c_2"></td>
What I want to do is select only the field id that I need to pull the value from that particular input and pass it to a variable like this:
var example = $(":input:eq(0)").val();
I know that by adding the :eq(0) after the :input selector it will only grab the id for field_a_1, so how do I set it up so that I can pull just the field that I need to assign it to a variable?
That is what the ID is for. So you can single out a particular element.
$('#field_b_2').val(); // Will return the element with that ID.
The # indicates that you are looking for an element with an ID, as opposed to . which would look for an element (or elements) with a class:
$('.someClass').val(); // Will return elements with that class
Please remember that IDs may not be shared among elements. Only one element may have a particular ID.
Classes, on the other hand, can be shared among as many elements as you need.
If you want only the id of the element you should do:
var example = $(":input:eq(0)").attr("id");
And then you can access the field again later with:
$("#" + example).show(); //or whatever you want to do
your Input Ids keep changing like :
When you click first time it will All: field_a_1 then , field_a_2, etc.
you simply using this to getting the correct values.
$('input[id^=field_]').each(function(){
alert($(this).val());
});

Categories