Add ID to Button in Javascript

Question

I'm currently trying to find a way to add an ID to an html button using a javascript injection. The html is simple and looks like this:

<button type="submit" class="submit btn primary-btn" tabindex="4">Sign in</button>

Now, as you can see, it doesn't have an ID or a name, making it a bit difficult to find using spynner in Python. What javascript could I inject to add an ID to this script? Would having javascript search for that entire string and then replace the entire string with an ID added ot it? Or is there a better way of going about it?

Use jquery to select the element and then use $(selector).attr('id', 'value'); to add an ID — Jon Rubins, Jan 06 '13 at 00:50
Is there only one button on the page with the text `Sign in` or anything that is unique to the button? — Blake Plumb, Jan 06 '13 at 00:51
The correct solution is to make the `button` uniquely identifiable by assigning it an ID at source. — Lightness Races in Orbit, Jan 06 '13 at 14:28

score 4 · Accepted Answer · answered Jan 06 '13 at 02:25

4

To ensure html integrity I would suggest:

$('.submit.btn.primary-btn').eq(0).attr('id', 'foobar');

answered Jan 06 '13 at 02:25

Frederik.L

5,522
2
29
41

no need for that if statement. `$('.submit.btn.primary-btn').eq(0).attr('id', 'foobar');` works fine even when there are no elements. – Chad Jan 06 '13 at 02:28
This one worked the best of me, the eq selector made it so simple. Thank you! :D – Dustin Jan 07 '13 at 08:49
im glad it helped you :-) eq is quite useful when you need to access a specific index within a selector – Frederik.L Jan 07 '13 at 08:56

score 1 · Answer 2 · answered Jan 06 '13 at 00:52

1

$(".submit.btn.primary-btn").attr("id", "foobar");

answered Jan 06 '13 at 00:52

Andrew Hubbs

9,338
9
48
71

3

This will work only if the `button` is the only element with those classes. – Blake Plumb Jan 06 '13 at 00:58
@BlakePlumb: No, it will always "work". It will just affect other elements, too. – Lightness Races in Orbit Jan 06 '13 at 02:25

score 0 · Answer 3 · answered Jan 06 '13 at 02:25

0

If you really want to be sure to affect just that element, do like:

$('button[tabindex="4"]').attr('id', 'value');

By the way, it makes no much sense to add an ID at runtime: if you can refer to the element, you shouldn't need the attribute anymore.

answered Jan 06 '13 at 02:25

moonwave99

21,957
3
43
64

How does this make it "sure"? – Lightness Races in Orbit Jan 06 '13 at 02:26
I was pretty sure that `tabindex` should be unique - well, then it's just "highly likely" : PP – moonwave99 Jan 06 '13 at 02:31
It works as long as there is exactly 4 inputs in the form, could it be safer to filter on the [type="submit"] attribute ? – Frederik.L Jan 06 '13 at 02:39

Add ID to Button in Javascript

3 Answers3