CODEWITHSUNDEEP
javascriptjqueryarrays
jonmrich
jonmrich

Reputation: 4323

Get values from multiple inputs without re-writing the same code

var attributeVariables = ['thing1', 'thing2'];

$.each(attributeVariables, function(index, val) {
   attributeVariables[index] = $('input[name='+attributeVariables[index]+']:checked').val();
});

console.log(thing1+" , "+thing2)

In the console, this yields undefined , undefined

However, if I run these, I get the proper value for thing1 and thing2

thing1 = $('input[name=thing1]:checked').val(); 
thing2 = $('input[name=thing2]:checked').val();

I have a bunch of other variables that a structured the same to get their value. I'm trying to avoid writing the lines above 50 times. I know there's a better way and I thought I had it with my first statement. Can someone tell me why this isn't working?

UPDATE: All I'm trying to do is update these already existing variables (thing1, thing2) based on the logic in my each...not store everything in an array.

UPDATE 2: Restated another way...I'm not married to doing this any specific way. Here's what I need: I have about 30 radio selectors, each tied to a different variable. Rather than write this out 30 times for 30 different variables (thing2 = $('input[name=thing2]:checked').val();), I figured there was a shortcut. I'd make a list of all the variables I want updated (based on the radio states) and run a single each

Upvotes: 0

Views: 72

Answers (2)

codtex
codtex

Reputation: 6548

As stated at the comments you are not console.log()-ing the right thing. Otherwise your code is almost fine. I think you can use directly val in the each instead attributeVariables[index].

Then you can perform an conditional check because val() of not checked checkboxes returns undefined

var attributeVariables = ['thing1', 'thing2'];

$.each(attributeVariables, function(index, val) {
  attributeVariables[index] = {
    name: val,
    checked: $('input[name=' + val + ']:checked').val() ? true : false
  };
});

console.log(attributeVariables);
console.log('--------------------------------');
console.log('Radio Buttons Test Results');

var radios = ['thing3', 'thing4', 'thing5', 'thing6'];
$.each(radios, function(idx, name) {
  var radioValues = [];
  $.each($('input[name=' + name + ']'), function(i, radio) {
    radioValues.push({index: i, checked: radio.checked});
  });
  
  radios[idx] = {
    name: name,
    radioValues: radioValues
  };
});

console.log(radios);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="thing1" checked>
<input type="checkbox" name="thing2">
<br/>
<input type="radio" name="thing3">
<input type="radio" name="thing3" checked>
<input type="radio" name="thing3">
<br/>
<input type="radio" name="thing4">
<input type="radio" name="thing4">
<input type="radio" name="thing4" checked>
<br/>
<input type="radio" name="thing5" checked>
<br/>
<input type="radio" name="thing6">

Upvotes: 1

stansheld
stansheld

Reputation: 11

try this. it might works...

var inputsObject = {};
$("input:checked").each(function() {
    inputsObject[$(this).attr("name")] = $(this).val()
})
console.log(inputsObject)

in inputsObject u will have pairs (name => value) if they exist.

Upvotes: 1

Related Questions