By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,401 Members | 814 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,401 IT Pros & Developers. It's quick & easy.

Change ID of element using JavaScript

KeredDrahcir
100+
P: 426
I'm working on some HTML code written by someone else. I can't change it and he's carelessly created two different elements with same ID. I need to access one of them using JavaScript but getElementById won't work. They are both encased inside division with different classes. Is there any way to access one in JavaScript without causing a conflict?
Expand|Select|Wrap|Line Numbers
  1. <div class="header">
  2. <div class="search">
  3.     <form name="form_seach" action="my page" method="post">
  4.         <input type="text" id="search_key" name="search_key" value="" style="width:110px;" /> 
  5.         <input type="submit" name="submit_search" id="submit_search" value="Search"/>
  6.     </form>
  7. </div>
  8. </div>
Expand|Select|Wrap|Line Numbers
  1. <div class="aite_search">
  2.     <form name="site_seach" action="my page" method="post">
  3.         <input type="text" placeholder="Search..." id="search_key" name="search_key" value=""  />
  4.         <input type="submit" name="submit_search" id="submit_search" value="Search"/>
  5.     </form>
  6. </div>
Jan 21 '14 #1

✓ answered by Dormilich

getElementById() wont work no matter what youll try.

Id suspect that you could get them via CSS paths in document.querySelector().

Share this Question
Share on Google+
9 Replies


Dormilich
Expert Mod 5K+
P: 8,639
getElementById() wont work no matter what youll try.

Id suspect that you could get them via CSS paths in document.querySelector().
Jan 21 '14 #2

KeredDrahcir
100+
P: 426
Thanks for that. That works perfectly. Just what I needed.
By the way, is there any way to change the name of an ID using JavaScript?
Jan 21 '14 #3

Dormilich
Expert Mod 5K+
P: 8,639
By the way, is there any way to change the name of an ID using JavaScript?
sure, in JavaScript you can change anything that is not explicitly read-only.
Jan 21 '14 #4

KeredDrahcir
100+
P: 426
Would be able to point me towards the command I'd need to use or point me to a resource where I could find the command?
Thanks.
Jan 21 '14 #5

Dormilich
Expert Mod 5K+
P: 8,639
the command would be, er, assignment? (really it’s just like a="b")

good resource: Mozilla Developer Network (or just google mdn + search phrase)
Jan 21 '14 #6

KeredDrahcir
100+
P: 426
Okay thanks. Would this affect just the ID?
Expand|Select|Wrap|Line Numbers
  1. document.querySelector('div.site_search #submit_search')='search_submit';
Jan 21 '14 #7

Dormilich
Expert Mod 5K+
P: 8,639
no, that would cause an error (you cannot assign a string to a Node).

I thought it would be obvious that you need to assign the id property of the node.

well, you definitely need to read this (http://www.html5rocks.com/en/tutoria...wbrowserswork/) and then you need to read about DOM and Objects in JavaScript, because these are the absolute basics you’ll always need.
Jan 21 '14 #8

KeredDrahcir
100+
P: 426
Yes. I thought that wouldn't work. As you can probably guess I need to change the ID so that both objects would have a different ID. I was using the Search as an example since I've already posted the code.

What I'm thinking about now is that the person who wrote the code also had two input fields, one of the contact form and one on a newsletter signup form both with the E-mail field having the same ID.
This causes conflict when using equalTo to validate the Confirm E-mail field. I was hoping to change the ID of the field on the Newsletter Sign Up but I need to access it by some other means to make sure I change the ID of the correct element.

I'll have a read of the link you've included but do you think this is going to be possible? I am willing to use small amount of php if nessesary.
Jan 21 '14 #9

Dormilich
Expert Mod 5K+
P: 8,639
Yes. I thought that wouldn't work. As you can probably guess I need to change the ID so that both objects would have a different ID.
this brings up the question, how do you change—in general—a property of a DOM object?
Jan 21 '14 #10

Post your reply

Sign in to post your reply or Sign up for a free account.