Two buttons with same id and class, only one found to be working

Question

I am working with jira and there are two buttons with the same id and class. Both are submit button, one at top and one below and when i use the below jquery only the first one is captured while clicking. Intention is to make comments testfield mandatory.

Only the top one is working..

<script>
AJS.toInit(function () {
   AJS.$("#next").click(function(e){
    var comment=AJS.$("#jira #page #content .aui-page-panel .aui-page-panel-inner .aui-page-panel-content #bulkedit .form-body .aui .comment-input #comment").val();
    if(comment==""){
    AJS.$(".bulk-affects").append("<br/><div id='resErrror' style='color:red;margin-left:30px'>Comment is mandatory</div>");
       return false;
       }

   });

   });
</script>

Please help me out with to capture both the next button to work for this script

Does this answer your question? [JavaScript and getElementById for multiple elements with the same ID](https://stackoverflow.com/questions/3607291/javascript-and-getelementbyid-for-multiple-elements-with-the-same-id). Also [Dealing with Two Elements with same ID in JavaScript](https://stackoverflow.com/questions/42941158/dealing-with-two-elements-with-same-id-in-javascript/42941208) — Umair Khan, Aug 24 '20 at 08:51

score 2 · Accepted Answer · answered Aug 24 '20 at 08:38

2

ID's should be unique, so you should only use a particular ID once on a page. Actually when you try to call the element using id code only calls the first element. Classes may be used repeatedly

answered Aug 24 '20 at 08:38

Anjaneya varma

76
9

Unfortunately it is not our page and we are writing a custom js. If two butttons exist for the same purpose, with the same id, is there anyway this js\jquery can be made to affect both? – Sijo Kurien Aug 24 '20 at 08:47
1

No, elements with same ID, the only first element will work, you try giving the same className then it will work. – Anjaneya varma Aug 24 '20 at 08:52
Yes `$("[id=" + id + "]")` – freedomn-m Aug 24 '20 at 08:54
It worked while using class. I had tried it before but the form class also needed to be given. Thank you all – Sijo Kurien Aug 24 '20 at 09:28

score 1 · Answer 2 · answered Aug 24 '20 at 09:10

1

querySelectorAll will find all ID's

const allButtons = document.querySelectorAll('#next');
for (let button of allButtons) {
  $(button).click((e) => {
    // Do your magic here
  })
}

answered Aug 24 '20 at 09:10

Anton

2,669
1
7
15

score 0 · Answer 3 · answered Aug 24 '20 at 09:37

0

Remember: A webpage element has certain inalienable rights; having a unique ID is one of them. Prevent html element identity theft by ensuring that every element on your webpage that needs an ID has a unique one.

But Classes can be repeated.

answered Aug 24 '20 at 09:37

Vinayak

80
8

Two buttons with same id and class, only one found to be working

3 Answers3