We Keep Coding

How to get id of a dynamic input field in javascript

I want to create a dynamic form where I also apply JavaScript to the dynamic elements.
What I want to do right now is figure out which field (stored in array or whatever data structure) in JavaScript has been clicked so that I can apply the script to that particular field.
The HTML looks like this:
<div class="triple">
<div class="sub-triple">
<label>Category</label>
<input type="text" name="category" id="category" placeholder="Classes/Instances" required/>
<ul class="cat-list"></ul>
</div>
<div class="sub-triple">
<label>Relation</label>
<input type="text" name="relation" id="relation" placeholder="Properties" required/>
<ul class="rel-list"></ul>
</div>
<div class="sub-triple">
<label>Value</label>
<input type="text" name="value" id="value" placeholder="Classes/Instances" required/>
<ul class="val-list"></ul>
</div>
</div>
This "triple" div is dynamic and I want to create as many "triples" as the user wants, that also means the input fields of inside the "triple" section increase as well.
I'm confused on how to add javascript to one element of the input. For example I have inputs: category, relation and value and the user wanted 2 or more triples then the input ids could look like category2, relation2 and value2 or something similar to that.
let category = document.getElementById("category");
category.addEventListener("keyup", (e) => {
removeElements();
listDown(category, sortedClasses, ".cat-list")
});
If I lets say clicked on category2 for instance how do I tell that to my javascript since these fields are completely dynamic.
Summary: The user is adding repeat sections of triples (containing 3 input elements), where the id of each input element is generated dynamically. My script above works for the first triple section only as the ids are fixed, as for successive "triple" section the id of the fields get changed. How do I identify (see which element has been clicked) and get these dynamic ids

Try listening to the parent element and then using the event's target to figure out the identity of the input. Since the child elements events will bubble up you'll be able to listen to all children
e.g.
let parentElement = document.querySelector(".triple");
parentElement.addEventListener("click", (e) => {
console.log(e.target.id);
});

You can use the onfocus event
<div class="triple">
<div class="sub-triple">
<label>Category</label>
<input type="text" name="category" id="category" placeholder="Classes/Instances" onfocus="onFocusCategoryInput()" required/>
<ul class="cat-list"></ul>
</div>
<div class="sub-triple">
<label>Relation</label>
<input type="text" name="relation" id="relation" placeholder="Properties" onfocus="onFocusRelationInput()" required/>
<ul class="rel-list"></ul>
</div>
<div class="sub-triple">
<label>Value</label>
<input type="text" name="value" id="value" placeholder="Classes/Instances" onfocus="onFocusValueInput()" required/>
<ul class="val-list"></ul>
</div>
</div>

GTM - Table - Click on a button, and get the text of another selector

I am not a developer but I am trying to get hand in hand with Google Tag Manager.
I am working for some people that they want to track a button click on a search result.
So, you'd get the 10 products, with the name, description and a Sample button.
I can track the button on GTM (that's the easy bit), but I need to assign the button click to each product name.
This is the bit of HTML that I want to work on:
<tr>
<td>
<p class="category">
Product
</p>
<a href="/sector/product/123456789"><img class="search_image" src="https://example.com/medium/123456789.jpg" alt="Name of the Product" onerror="this.src='system/images/company_logo_block.jpg'" />
</a>
</td>
<td>
<h3>Name of the product</h3>
<p>Benefits of the product explained</p>
<p>Material <b>Plastic</b></p>
<div class="button_container">
<div class="action_container">
<div class="action_trigger">
<input type="hidden" id="code_123456789" name="code" value="123456789" />
<label class="visible" for="quantity_123456789">Quantity</label><br />
<input class="search_result_quantity numeric_only" id="quantity_123456789" name="quantity" type="number" value="1"
onkeydown="return isValidInput(this, 5, event);"/>
<label for="add_to_basket_123456789">Add to basket</label>
<input class="add_sample search_result_action" id="add_to_basket_123456789" name="add_to_basket" type="submit" value="Add to basket" />
</div>
<div class="action_response">
<img src="/sector/system/images/loading.gif" alt="Loading" />
</div>
<div class="action_result">
<img src="/sector/system/images/tick.jpg" alt="Success" /><span>Added.</span>View basket
</div>
<label for="get_sample">Get a Sample</label><input class="add_sample search_result_action" name="Sample_product" type="button" value="Sample Product" onclick="window.location='http://www.samplepage.com/123456789';"/>
<div class="clearer"></div>
</div>
</div>
<br/>
<p123456789</p>
<p>
Online
| 24/09/2015
</p>
<p><strong>Price: £26.99 +VAT</strong></p>
</td>
</tr>
So, when a user clicks on the button "Sample Product", I would like to grab the name of the product, which sits on the top <tr> with the tag h3.
For each product, there is a <tr> where all the information sits
On the console, I can get the "nodes" with document.querySelectorAll ("tr td h3)[0] - or [1] or [2] according to the name of the product I want.
I now can't get a function that, onClick a Button, will return me the <h3> text of that <tr> selector. Is this even possible?
Thanks so much for your help.
George

Ok. After long hours of trial and error, I came up with a solution that works.
I'll leave it here in case it might help someone.
function() {
var els = document.querySelectorAll('[value="Sample Product"]');
for (var i = 0; i < els.length; i += 1) {
if (els[i] === {{Click Element}}) {
var elsname = document.querySelectorAll('tr td h3')[i].innerText
return elsname; }
}
return elsname;
}

Complex selecting of specific inputs generated by for-loop

I'm trying to select some specific inputs in a list of inputs generated by a for-loop, inside some divs also generated by for-loop. That means that the selecting process is a bit messy and difficult, because the ids are dynamic.
So, here is a sample of what I have, every id is generated by a for-loop:
<div id="block0">
<input id="special0-0" class="block"></input>
<input id="special0-1" class="block"></input>
<input id="special0-2" class="block"></input>
<input id="special0-3" class="block"></input>
</div>
<div id="block1">
<input id="special1-0" class="block"></input>
<input id="special1-1" class="block"></input>
<input id="special1-2" class="block"></input>
<input id="special1-3" class="block"></input>
</div>
<div id="item0">
<input id="special0-0"></input>
<input id="special0-1"></input>
<input id="special0-2"></input>
<input id="special0-3"></input>
</div>
<div id="item1">
<input id="special1-0"></input>
<input id="special1-1"></input>
<input id="special1-2"></input>
<input id="special1-3"></input>
</div>
I want to select the inputs with id="special0-2 AND id="special1-2" BUT NOT the ones which have class="block".
I've tried several possibilities, including these two that should work to me:
var item2 = $("div[id|='item'] > input[id$='-2']");
var item2 = $("input[id|='special'][id$='-2'][class!='block']");
The problem is, for each option, console.log(item2) returns 0 and I can't apply the javascript changes I planned on them after. Thanks for your ideas :)
JSFiddle

This might be it:
$('[id^="item"]').children('[id$="-2"]:not(.block)'); // full
$('[id^="item"] > [id$="-2"]:not(.block)'); // short
First select the divs with the id's that start with 'item', in those find those with the id ending with '-2'.
I suggest you give the root items a class. If you always want the 3rd one, combined it would be:
$('.classname').children('div:nth-child(3)'); // full
$('.classname > div:nth-child(3)'); // short

Remove the first 2 <li> content, except what you have inside the tag <label>

How do I remove the content of the first 2 <li>, except what you have inside the tag <label> of the second <li>.
My structure is like this:
<ul>
<li>
Text <label>1#</label> <input type="text" value="" />
</li>
<li>
Text <label>2#</label> <input type="text" value="" />
</li>
<li>
Text <label>3#</label> <input type="text" value="" />
</li>
<li>
Text <label>4#</label> <input type="text" value="" />
</li>
<li>
Text <label>5#</label> <input type="text" value="" />
</li>
<li>
Text <label>6#</label> <input type="text" value="" />
</li>
<li>
Text <label>7#</label> <input type="text" value="" />
</li>
</ul>
And would have to remove the codes and stay that way:
<ul>
<li>
<label>2#</label>
</li>
<li>
Text <label>3#</label> <input type="text" value="" />
</li>
<li>
Text <label>4#</label> <input type="text" value="" />
</li>
<li>
Text <label>5#</label> <input type="text" value="" />
</li>
<li>
Text <label>6#</label> <input type="text" value="" />
</li>
<li>
Text <label>7#</label> <input type="text" value="" />
</li>
</ul>
DEMO CODE
(My English sucks, I hope you understood my question, and it has been clear for everyone.)

This removes the first list item completely, then all nodes except labels from the second list item.
Demo
$('ul li:nth-child(1)').remove();
$('ul li:nth-child(1)').contents().filter(function(){
return !$(this).is('label');
}).remove();

This could be your solution:
$('ul li label').each(function() {
$(this).parent().empty().append($(this));
});
Fiddle:http://jsfiddle.net/FGJLg/

Here's a possibility (just a quick lesson on JQuery here, but I would go for the 3rd option, see below) :
$('ul li:nth-child(1)').remove();
$('ul li:nth-child(1)').remove(); // child(1) ALSO, BECAUSE #2 HAS NOW BECOME #1 !
// OR MODULAR :
for (i=1; i < 3; i++)
{
$('ul li:nth-child('+i+')').remove(); // OBVIOUSLY #3 AND #4 ARE REMOVED AS WELL.
}
// YOU CAN CAPTURE AND STORE THE LABEL CONTENT, ERASE THE CONTENT OF THE LI, AND PUT BACK THE LABEL :
for (i=1; i < 3; i++)
{
var label_content = $('ul li:nth-child('+i+') label').html(); // GETTER
$('ul li:nth-child('+i+')').html(''); // SETTER (set to empty)
$('ul li:nth-child('+i+')').html('<label>'+label_content+'</label>'); // REINJECT THE LABEL
}
Working Fiddle here : http://jsfiddle.net/U5K5q/1/
But it looks like you just want to "hide" (display:none) your inputs... If it is the case, you may as well do :
for (i=1; i < 3; i++)
{
$('ul li:nth-child('+i+') input').css('display':'none');
$('ul li:nth-child('+i+') input').attr('disabled'); // JUST TO MAKE SURE THIS INPUT IS NOT GOING SUBMITTED
}
Or, 3rd option, cleaner :
for (i=1; i < 3; i++)
{
$('ul li:nth-child('+i+') input').remove(); // OBVIOUSLY #3 AND #4 ARE REMOVED AS WELL.
}

JQuery to switch option order on a form

I have a form that I need to switch the order of the options in. I need to do it conditionally (not every time) after the page has loaded and it makes sense to use jquery for this task.
Here's the HTML as it initially renders:
<ol class="choices-group">
<li class="choice">
<label for="first">
<input id="first" type="radio" value="25.0">$25</input>
</label>
</li>
<li class="choice">
<label for="second">
<input id="second" type="radio" value="50.0">$50</input>
</label>
</li>
<li class="choice">
<label for="third">
<input id="third" type="radio" value="100.0">$100</input>
</label>
</li>
</ol>
I want the jquery to reverse the order of the elements so it looks like this:
<ol class="choices-group">
<li class="choice">
<label for="third">
<input id="third" type="radio" value="100.0">$100</input>
</label>
</li>
<li class="choice">
<label for="second">
<input id="second" type="radio" value="50.0">$50</input>
</label>
</li>
<li class="choice">
<label for="first">
<input id="first" type="radio" value="25.0">$25</input>
</label>
</li>
</ol>
In this example there were three options, but it may be any number between 1 and 7.
Can anyone see a good way to do this?

This should do it:
$(".choices-group").html($(".choice").get().reverse());
See a working example:
http://jsfiddle.net/epignosisx/bX3Kf/

This should be fairly simply. I would use Javascript object to help manage it where the key-part (property name) is the value used to evaluate the condition and the value is the reference to the DOM. Then you just append them back into ol in correct order.
var temp = {};
$.each('ol li', function(k, v){
var $this = $(v);
temp[$this.attr('someAttribute')] = $this;
});
/*some sorting logic and appending them back*/
This way, you can reorder them however you want and not just reversing the order.

I would do an $.each() to get the elements in the ol, reverse the order then use the $.html() to rewrite the ol
Please see the jquery manual here for an example of this.

Using jquery:
$('.choices-group li').each(function(){
$(this).parent().prepend(this);
});​​​​​​
See jsFiddle
But faster would be to use pure javascript method as:
ObjetNode.insertBefore(NewNode,NodePosition);