Jquery & Variable ID Names

Question

I am trying to avoid having the same code for different ids. Something like submitter1, submitter2, etc. In the same process, having the variable also used to get the input box id of differentlocation1, differentlocation2, etc. Can someone help me out with the code below?

$(document).ready(function() {

    $('#submitter<--Variable Here-->').click(function(event) {
        event.preventDefault();
        var newlocation = $("input[name=differentlocation"<--Same Variable Here-->"']");
        alert(newlocation); //testing purposes
        //$('#location').val(newlocation).change(); //Changes location input box
        //$("#submit").click(); //submits new location

    });
});

This code works using static ids, but like I said I would like to adjust it to use variable ids as well.

Thanks.

Why can't you use a class name to associate elements with the shared behaviour? — Andy Rose, Oct 31 '11 at 09:49

Andy E · Accepted Answer · 2011-10-31T10:22:42.583

4

You can use the attribute starts with selector:

$('button[id^="submitter"]').click(...);

Inside the click function, you can get the id using simple string methods:

var uuid = this.id.slice(9),
    newlocation = $('input[name="differentlocation'+uuid+'"]');

Working demo: http://jsfiddle.net/wy8X9/

edited Oct 31 '11 at 10:22

answered Oct 31 '11 at 09:48

Andy E

338,112
86
474
445

@ Andy E Does this look right: `$('button[id^="submitter"]').click(function(event)` The id submitter is a button – Go3Team Oct 31 '11 at 10:10
I also have `var uuid = this.id.slice(9); alert(uuid);` It doesn't throw an alert. Any suggestions? – Go3Team Oct 31 '11 at 10:17
@Go3Team: I'd double-check your code. I posted an example link in my answer, that might help you. – Andy E Oct 31 '11 at 10:23

score 1 · Answer 2 · answered Oct 31 '11 at 09:51

The proper solution is using a class instead of an ID since multiple elements can have the same class. To reference the input with the same variable part, you can then use (a part of) the ID or even better, a data field (data-whatever="..." in HTML, $(elem).data('whatever') in JS)

score 1 · Answer 3 · answered Oct 31 '11 at 09:51

1

Set IDs as data-id and point them like this

<tag class="submitter" data-id="n">

$('.submitter').click(function(){
  id = $(this).attr('data-id');
var newlocation = $("input[name=differentlocation"+id+"']");
})

answered Oct 31 '11 at 09:51

Moe Sweet

3,683
2
34
46

I'm using hidden input type so I have: `var newlocation = $("hidden[name=differentlocation"+id+"']");` If I do `alert(newlocation);` The alert window says `object Object` - any thoughts? – Go3Team Oct 31 '11 at 15:00
$("hidden[name=differentlocation"+id+"']").val() – Moe Sweet Nov 01 '11 at 01:33

score 1 · Answer 4 · answered Oct 31 '11 at 09:57

When doing something that you want to share, I would recommend that you associate the even based on a common class name.

You can read this.id to get the ID of the event target and manipulate there.

$('.submitter').click(function(e) {
    e.preventDefault();
    var numId = this.id.replace(/[^0-9]+/, ''),
        newlocationId = "input[name=differentlocation" + numId+ "']";

    alert(newlocationId);
});

Example: http://jsfiddle.net/qud32/

Alternatively, you can use the "attribute starts with" selector as Andy suggests.

Jquery & Variable ID Names

4 Answers4

Linked