CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
awoh
awoh

Reputation: 69

How do I record answers from multiple different radio buttons in a survey using jQuery?

EDIT: Thanks Cole Faraday for answering my question.

I am trying to make a form with multiple radio buttons, which will record the selected radio button for each different question once a submit button is pressed.

What is the best way to do this with jQuery? I don't need to use my current set-up. If there is a better way to do it with different radio buttons or just a different input method, I'm open to those suggestions as well. Thanks

<form id="myForm">
    <div class="row justify-content-center" id="mainContainer" style="background-color: #c6d7f2">
      <div class="col-md-8" style="margin: 0 auto; background-color: white">
<h2 class="subtitle">Flavors</h2>

        <div class="col-md-8" style="background-color: #c9c9c9; margin: 0 auto;">
          <div class=text-right>
            <div style="float: left;">
              Spicy:
            </div>
            <label class="custom-control custom-radio">
              <input id="radio1" name="spicy" type="radio" class="custom-control-input" value=0>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">0</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio2" name="spicy" type="radio" class="custom-control-input" value=1>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">1</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio3" name="spicy" type="radio" class="custom-control-input" value=2>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">2</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio4" name="spicy" type="radio" class="custom-control-input" value=3>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">3</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio5" name="spicy" type="radio" class="custom-control-input" value=4>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">4</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio6" name="spicy" type="radio" class="custom-control-input" value=5>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">5</span>
            </label>
          </div>
        </div>

        <div class="col-md-8" style="margin: 0 auto;">
          <div class="text-right">
            <div style="float: left;">
              Sour:
            </div>
            <label class="custom-control custom-radio">
              <input id="radio1" name="sour" type="radio" class="custom-control-input" value=0>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">0</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio2" name="sour" type="radio" class="custom-control-input" value=1>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">1</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio3" name="sour" type="radio" class="custom-control-input" value=2>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">2</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio4" name="sour" type="radio" class="custom-control-input" value=3>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">3</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio5" name="sour" type="radio" class="custom-control-input" value=4>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">4</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio6" name="sour" type="radio" class="custom-control-input" value=5>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">5</span>
            </label>
          </div>
        </div>
<div id="submitButtonContainer">
          <button type="submit" class="btn btn-primary" id="submitButton">Submit</button>
        </div>
      </form>

Upvotes: 0

Views: 385

Answers (1)

Cole Faraday
Cole Faraday

Reputation: 180

I think what you are looking for is .serializeArray(). To store the information in a key value pair object do this:

function submitForm(){
  var formObj = {};
    var inputs = $("#myForm").serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
  alert(formObj["spicy"]);
  alert(formObj["sour"]);
}

And change your form tag so that it calls the javascript function on submit

<form id="myForm" onsubmit="submitForm()">
  <!-- Normal form html elements -->
</form>

If you want to keep the information as a JSON object you can make it far simpler and just change the javascript to this

function submitForm(){
    var inputs = $("#myForm").serializeArray();
}

Upvotes: 1

Related Questions