表单提交时无法选择单选按钮

Question

I'm having problems getting the radio button value when the form is submitted. I thought that when the form is submitted it would get the final selection that user made but it appears it doesn't recognize which one is selected.

On initial load: This is inside my form

<div id="question1">
  <label> Do you shop mostly on-line or at physical stores? </label>
    <div class="radioButtons">
      <span>
       Mostly on-line stores
       <input name="question1" value="on-line" type="radio">
      </span>
      <span>
        mostly physical stores
        <input name="question1" value="physical" type="radio">
      </span>
      <span>
        About both equaly
        <input name="question1" value="both" type="radio">
      </span>
   </div>
</div>

in my submit handler

    $(".aboutmeQuestions").on("submit", function(e){
        e.preventDefault();
        var values = {};
        var $inputs = $(".aboutmeQuestions :input").not(":submit");

        $inputs.each(function(){
            values[this.name] = {answer : $(this).val()};
        });
        //I thought the above would get the radio buttons but I think it got the last choice as the selected one no matter what was chosen. so I tried below because I thought that the checked attribute would change automatically.
        $("input[type='radio']").each(function(){
            console.log("this ",this);
            if($(this).attr("checked")){
                values[this.name] = {answer : $(this).val()};
            }

        })

In my EJS:

    <div id="question1">
           <label> <%=aboutUser.question1.question%> </label>
           <div class = "radioButtons">
                <span>Mostly on-line stores <input type="radio" name="<%=aboutUser.question1.name%>" value="on-line" <% if(aboutUser.question1.answer == "on-line"){%> checked  <%}%>> </span>
                <span>mostly physical stores <input type="radio" name="<%=aboutUser.question1.name%>" value="physical" <% if(aboutUser.question1.answer == "physical"){%> checked <%}%>> </span>
                <span> About both equaly <input type="radio" name="<%=aboutUser.question1.name%>" value="both" <% if(aboutUser.question1.answer == "both"){%> checked  <%}%> ></span>
            </div>

    </div>

I tested it out. After clicking on nothing and pressing the submit button I get for values object, question5[answer]: maybe" question1[answer]: "both" that should of been equal to nothing. It is always like that no matter what I click. I don't like that pleas help me fix it. I didn't think I have to use a change method.

Ps I save this data to DB and the inputs should be populated with answers so when I reload the page <span> About both equaly<input name="question1" value="both" checked="" type="radio"> </span> . it shouldn't have been checked since I didn't select anything.

Answer 1

First, remove the checked attribute from all the checkboxes unless there is ONE that you want to be pre-selected and in that case add it to just that ONE.

There is no need to loop through the radio buttons to see which was checked. Just use the :checked pseudo-class. Change this:

    $("input[type='radio']").each(function(){
        console.log("this ",this);
        if($(this).attr("checked")){
            values[this.name] = {answer : $(this).val()};
        }

    })

to this:

   var checkedRad = $("input[type='radio']:checked");
   values[this.name] = {answer : checkRad.value};

or, if you don't need a reference to the checked radio button after getting its value::

   values[this.name] = {answer : $("input[type='radio']:checked")};

 $("input[type=radio]").on("click", function(e){ console.log($("input[type='radio']:checked").val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="question1"> <label> Do you shop mostly on-line or at physical stores? </label> <div class="radioButtons"> <span> Mostly on-line stores <input name="question1" value="on-line" type="radio"> </span> <span> mostly physical stores <input name="question1" value="physical" type="radio"> </span> <span> About both equaly <input name="question1" value="both" type="radio"> </span> </div> </div>