CODEWITHSUNDEEP
jqueryhtmltypescriptradio-buttonundefined
Denis
Denis

Reputation: 15

Radio button value returns undefined

The buttons are visible and working, however when submit is clicked It should assign the value of the checked radio button(for each of the 3groups) to a variable,but the value returned is always undefined.

I expect the output to be the value or an object containing the values due to a group of buttons

severityFormValue.on("click", (e) => {
  const loggedVia = $('input[name=loggedVia]:checked').val()
  const allStable = $('input[name = allStable]:checked').val()
  const EnvDown = $('input[name = EnvDown]:checked').val()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="dropdown">
       <button class="dropbtn" id="CCR_DACEbtn">CCR DACE ▼</button>
       <div id="drowdownCCR_DACEID" class="dropdown-content">
               Submitted by:
               <input type="radio" name="loggedVia" value="phone" checked> phone
               <input type="radio" name="loggedVia" value="email"> email<br>
               All services stable?
               <input type="radio" name="allStable" value="Yes"> Yes 
               <input type="radio" name="allStable" value="No" checked> No 
               <input type="radio" name="allStable" value="N/A"> N/A <br>
               Environment Down?
               <input type="radio" name="EnvDown" value="Yes"> Yes 
               <input type="radio" name="EnvDown" value="No" checked> No 
               <input type="radio" name="EnvDown" value="N/A"> N/A <br>
               <button type="button" id="severityFormSubmit" >Submit</button>
       </div>
   </div>`

Upvotes: 1

Views: 1170

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The name of the second group of radio inputs is AllStable, not allStable, hence the selector won't find them as it's case-sensitive. Fix that and the code you've shown works fine:

var severityFormValue = $('#severityFormSubmit');

severityFormValue.on("click", (e) => {
  const loggedVia = $('input[name="LoggedVia"]:checked').val()
  const allStable = $('input[name="AllStable"]:checked').val();
  const envDown = $('input[name="EnvDown"]:checked').val()

  console.log(loggedVia);
  console.log(allStable);
  console.log(envDown);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn" id="CCR_DACEbtn">CCR DACE ▼</button>
  <div id="drowdownCCR_DACEID" class="dropdown-content">
    Submitted by:
    <input type="radio" name="LoggedVia" value="phone" checked> phone
    <input type="radio" name="LoggedVia" value="email"> email<br> 
    
    All services stable?
    <input type="radio" name="AllStable" value="Yes"> Yes
    <input type="radio" name="AllStable" value="No" checked> No
    <input type="radio" name="AllStable" value="N/A"> N/A <br> 
    
    Environment Down?
    <input type="radio" name="EnvDown" value="Yes"> Yes
    <input type="radio" name="EnvDown" value="No" checked> No
    <input type="radio" name="EnvDown" value="N/A"> N/A <br>
    <button type="button" id="severityFormSubmit">Submit</button>
  </div>
</div>

Also note that I changed the EnvDown variable name to envDown and the loggedVia name attribute to LoggedVia to maintain consistency with their counterpart values.

Upvotes: 3

Related Questions