put name and value of form into an array of objects [name: value]

Question

I'm making a multi question survey and I'm trying to save name and value of my form into an object. I am able to put the name and value variables into an alert but I would like to see all the values in one hit, like an array with objects. JS code prints out [object Object] into the alert on the page:

$("button[type='submit']").click(function() {
  //get name and value of each question and put into object
  $("input[type='radio']:checked").each(function() {
    var name = $(this).attr("name");
    var value = $(this).attr("value");
    var obj = {
      name: value
    };
    alert(obj);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio">
              <input type="radio" name="A1" value="1" required>
              <span class="radio__control-indicator"></span>1</label>
<label class="radio">
              <input type="radio" name="A1" value="2" required>
              <span class="radio__control-indicator"></span>2</label>

<label class="radio">
              <input type="radio" name="A2" value="1" required>
              <span class="radio__control-indicator"></span>1</label>
<label class="radio">
              <input type="radio" name="A2" value="2" required>
              <span class="radio__control-indicator"></span>2</label>
<button class="button button--primary right" type="submit">Submit Questionaire</button>

Answer 1

Firstly note that this is exactly why you shouldn't use alert() for debugging; it coerces data types. Use console.log(obj) instead. Secondly you should use val() to get the value from form controls.

The major issue with your code is that you cannot use that syntax while providing a variable as the key of the object. You will need to use bracket notation instead, like this:

$("button[type='submit']").click(function() {
  $("input[type='radio']:checked").each(function() {
    var obj = {};
    obj[$(this).attr("name")] = $(this).val();
    console.log(obj);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label class="radio">
  <input type="radio" name="A1" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A1" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>

<label class="radio">
  <input type="radio" name="A2" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A2" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>
<button class="button button--primary right" type="submit">Submit Questionaire</button>

Also note that if you're intending to create an array of these objects, then map() would be a better solution:

$("button[type='submit']").click(function() {
  var arr = $("input[type='radio']:checked").map(function() {
    var obj = {};
    obj[$(this).attr("name")] = $(this).val();
    return obj;
  }).get();
  console.log(arr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label class="radio">
  <input type="radio" name="A1" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A1" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>

<label class="radio">
  <input type="radio" name="A2" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A2" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>
<button class="button button--primary right" type="submit">Submit Questionaire</button>