Javascript - use class name to specify which variable to assign value to

Question

I'm trying to be clever with some efficient Javascript but it's causing me headaches and lots of fruitless searching.

I have a set of inputs in a table, each with a given class:

...
<tr>
<td><input name="name" type="text" class="markertitle"/></td>
<td><input name="desc" type="text" class="markerdescription"/></td>
<td><input name="address" type="text" class="markeraddress"/></td>
<td><input name="url" type="text" class="markerurl"/></td>
</tr>
...

I want to take the value of those classes, use it to specify a given variable (which already exists), then assign the value of the input (using +=) to that variable.

This is what I've come up with, but no joy:

    var markertitle = {};
    var markerdescription = {};
    var markeraddress = {};
    var markerurl = {};
    $('#markermatrixadd input').each(function(){
        var field = $(this).attr('class');
        window[field] += $(this).val() + ',';

    });

It's dead simple I'm sure, but I think my brain's a bit fried :(

Watch out for elements with multiple classes or classes without a matching variable. — Stefan
– Stefan, Commented Jan 13, 2012 at 11:53

georg · Accepted Answer · 2012-01-13 11:46:44Z

4

Your vars don't seem to be global. They must be declared outside any function. Besides that, you cannot add anything to an object ({}). Use either strings or arrays:

var markertitle = ""
var markerdescription = ""
etc

function() ....

    $('#markermatrixadd input').each(function(){
        var field = $(this).attr('class');
        window[field] += $(this).val() + ',';

    });

or

var markertitle = []
var markerdescription = []
etc

function() ....

    $('#markermatrixadd input').each(function(){
        var field = $(this).attr('class');
        window[field].push($(this).val())

    });

Better yet, get rid of window and use one single object to store all the data:

var data = {
    markertitle: "",
    markerdescription:  ""
}

function() ....

    $('#markermatrixadd input').each(function(){
        var field = $(this).attr('class');
        data[field] += $(this).val() + ',';

    });

answered Jan 13, 2012 at 11:46

georg

216k57 gold badges324 silver badges401 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

melat0nin Over a year ago

Thanks! I used your third method. Much appreciated! :)

georg Over a year ago

Not at all! Also, pay attention to the @Stefan's comment above.

Collectives™ on Stack Overflow

Javascript - use class name to specify which variable to assign value to

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related