Develop Reference

jquery .length providing individual counts in the log, not the total [duplicate]

I have 3 buttons with same ID. I need to get each button's value when it's being clicked.
<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>
Here is my current jQuery script:
$("#xyz").click(function(){
var xyz = $(this).val();
alert(xyz);
});
But it works only for the first button, clicking on the other buttons are being ignored.

I have 3 buttons with same id ...
You have invalid HTML. You can't have more than one element in a page with the same id attribute value.
Quoting the spec:
7.5.2 Element identifiers: the id and class attributes
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
Solution: change from id to class:
<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>
And the jQuery code:
$(".xyz").click(function(){
alert(this.value);
// No need for jQuery :$(this).val() to get the value of the input.
});
But it works only for the first button
jQuery #id selector docs:
Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.
If you look at the jQuery source you can see when you call $ with an id selecor-($("#id")), jQuery calls the native javascript document.getElementById function:
// HANDLE: $("#id")
} else {
elem = document.getElementById( match[2] );
}
Though, in the spec of document.getElementById they didn't mention it must return the first value, this is how most of (maybe all?) the browsers implemented it.
DEMO

ID means "Identifier" and is valid only once per document. Since your HTML is wrong at this point, some browsers pick the first, some the last occuring element with that ID.
Change ids for names would be a good step.
Then use $('button[name="xyz"]').click(function(){

From my experience, if you use $('button#xyz') selector instead it will work. That's a hack, but it's still invalid HTML.

Although changing the id's to a class is better, you can get all the elements with the same id using the attribute equals selector:
$('[id="xyz"]')
Or this to get only buttons with id xyz:
$('button[id="xyz"]')
Or divs with id xyz:
$('div[id="xyz"]')
etc.
Alternatively you could use the "Attribute Contains Selector" to get all elements with ids that contain "xyz":
$('[id*="xyz"]')
Of course, this means all elements with id that partially contain "xyz" will get selected by this.

this also worked if you have multiple element with same id.
$("button#xyz").click(function(){
var xyz = $(this).val();
alert(xyz);
});
you can check HERE

If you have same id in a container you can use on() to access each element for every event
$("#containers").on("click","#xyz",function(){
alert($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containers">
<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>
</div>
and info about on() is here

You can't have the same id because id is unique in page HTML. Change it to class or other attribute name.
$('attributename').click(function(){ alert($(this).attr(attributename))});

How do you remove a element by id? [duplicate]

This question already has answers here:
How to remove an HTML element using Javascript?
(11 answers)
Closed 2 years ago.
Hi I am trying to get a few buttons to work but all the other things I found didnt work here it is
document.getElementById("Element").remove();
isnt working
<button class="btn btn-danger" onclick="reset()">Reset</button>
Error:
script.js:30 Uncaught TypeError: Cannot read property 'remove' of null
at reset (script.js:30)
at HTMLButtonElement.onclick (index.html:14)
Im sorry if this is formatted weird but I am new to this.

Try this
<button id="reset-button" class="btn btn-danger" onclick="reset()">Reset</button>
And you can remove the button via
document.getElementById("reset-button").remove();

The element you want to remove needs to have id="Element".
For example if you want to remove a div it would look like:
<div id="Element"> Div to remove </div>
then your script:
function reset() {
document.getElementById("Element").remove();
}
will work for the button:
<button class="btn btn-danger" onclick="reset()">Reset</button>

I didn't get what you are trying to do, I am assuming you are trying to remove the button.
you are trying to get button by element id but there is no id attribute in the button tag,
it should look like something like below
document.getElementById("id_name").remove();
<button id="id_name" class="btn btn-danger" onclick="reset()">Reset</button>

Just give the id name to your button with the same name you're giving in remove.
document.getElementById("Element").remove();
<button id="Element" class="btn btn-danger" onclick="reset()">Reset</button>

Add number as parameter to function after I get button from DOM?

I use this row to get from DOM button:
var btn = parent.parent.document.getElementById('btnZoom')
I get from DOM this element:
<button type="button" id="btnZoom" onclick="parent.ExecuteCommand()" class="button_air-medium">
<img id="zoomMode" class="miniToolbarContant" src="...">
</button>
After I get the element from the DOM I need to add to ExecuteCommand function some number as parameter.
For example number 55:
<button type="button" id="btnZoom" onclick="parent.ExecuteCommand(55)" class="button_air-medium">
<img id="zoomMode" class="miniToolbarContant" src="...">
</button>
My question is how do I add number as parameter ExecuteCommand function afetr I get button from DOM?

Two ways to do that. One would be to set the number value as a separate data attribute on the HTML tag, and then have your parent.ExecuteCommand() command read it from there, via this:
var btn = parent.parent.document.getElementById('btnZoom');
btn.setAttribute('data-number', 55);
The other would be to add the onclick event handler in Javascript instead of using an attribute on the HTML tag:
<button type="button" id="btnZoom" class="button_air-medium">
var btn = parent.parent.document.getElementById('btnZoom');
btn.addEventListener('click', () => parent.ExecuteCommand(55));

Remember that onclick is an attribute and you can modify the value when you get the DOM element. Just like this:
var btn = parent.parent.document.getElementById('btnZoom');
btn.setAttribute("onclick","parent.ExecuteCommand(55)");

How can I get dynamically input field id in jquery on button click and save to another button.

I am totally fresher in JavaScript and jQuery can anyone help me or suggest regarding this task how can I do this.
I have a task, I want want get dynamic id of input field on button click, I have 100 dynamic input field
<input id="ProgressBar_1" type="text" name="dProgressBar_1" class="form-control bulk-pricing-streetProgressBar">
<input id="ProgressBar_2" type="text" name="dProgressBar_2" class="form-control bulk-pricing-streetProgressBar">
these are my id's, I want to get these id's on button click there code I have mention below.
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id=" "></button>
Finally I want store these getting id's in another button.
<button id="" class="btn btn-danger handleIncorrectNoBtn" type="button">Remove House</button>
Finally I Want to perform some task on this button.

Ill give you a couple of hints, though i find it very hard to fully understand what you are trying to achieve here. Maybe rewrite your question, provide some specifics and be more clear if possible.
[From what i understand]
your first part is a button that when clicked will retrieve the ids of input fields?
lets say this is your button:
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id="myButton"></button>
the click code would look similar to (i'm kind of pseudo coding this af you have provided no example or demo i can use to test, my apologies if this is not correct):
function {
var ids = [];
$('#myButton').on('click', function() {
ids = [];
$("input .classOnAllInputIdsYouWantToGet").each(function(e){
ids.push(e.attr("id"));
});
// store in a variable here or continue using the ids variable
// created above - this can be used anywhere within this function
});
function myOtherFunctionINeedIds(){
// Use ids here
}
}
im not sure if this is what you are after, if not please update or amend your question and i will change my answer to try get exactly what you are after.
good luck.

Button value is empty when use jquery selector

i am trying to select value for the selected button like the following :
html code :
<div class="span3">
<div>DEBIT/CREDIT</div>
<div class="btn-group" data-toggle="buttons-radio" id="investadjust-debitcredit-button">
<button name="debitCredit" type="button" id="credit-button" class="btn active" value="CREDIT" >CREDIT</button>
<button name="debitCredit" type="button" id="debi-button" class="btn" value="DEBIT" >DEBIT</button>
</div>
</div>
javascript code :
$("#investadjust-debitcredit-button>.active").val()
but i get only empty when i printed the above line after selecting one button.
what could be the reason.

you need to place your code in
$(document).ready(function(){
// your jquery code
});

As neo said you need to place your code in document ready function and use the class name of the button without spaces or you can add underscore between the words as well like this:
<button name="debitCredit" type="button" id="credit-button" class="btn_active" value="CREDIT" >CREDIT</button>
So, the code goes like:
$(document).ready(function(){
alert("value "+$("#investadjust-debitcredit-button>.btn_active").val());
});
Good Luck!