Get Radio Input Value On Button Click Javascript

Question

I Have an HTML Form. There Are 4 Questions. 3 Questions Radio, 1 Questions Text.

There Is A Production That Will Go To the Next Step When All The Buttons Are Clicked. But the Values Selected on the Radio Button Do Not Come to Me. The Form is Working With Webhook and Needs to Send Data to Integromat.

How Can I See the Values Clicked on the Radio Buttons?

When I Click on the Radio Buttons, I Can See the Next Question, But I Can't See the Values Coming from the Radio Buttons. Thank you.

Javascript:

$(document).ready(function() {
    'use strict';

  $('input[type=radio], input[type=checkbox]').on('click', function(e) {
    e.preventDefault(); 
    $(this).parents('.test-step').next().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })

  $('.test-step .prev-btn').on('click', function(e) {
    e.preventDefault();
    $(this).parents('.test-step').prev().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })

})

HTML:

              <div class="col-sm-6">
                <div class="form-group">
                  <input type="radio" name="calisan-sayisi" onclick="getVals(this, '1-2');" value="1 - 2" class="form-control" id="1 - 2">
                  <label for="1 - 2">1 - 2</label>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="radio" name="calisan-sayisi" value="3 - 4" class="form-control" id="3 - 4">
                  <label for="3 - 4">3 - 4</label>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="radio" name="calisan-sayisi" value="5 - 19" class="form-control" id="5 - 19">
                  <label for="5 - 19">5 - 19</label>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="radio" name="calisan-sayisi" value="20 - 49" class="form-control" id="20 - 49">
                  <label for="20 - 49">20 - 49</label>
                </div>
              </div>
              <div class="col-sm-12">
                <div class="form-group">
                  <input type="radio" name="calisan-sayisi" value="50 +" class="form-control" id="50 +">
                  <label for="50 +">50 +</label>
                </div>
              </div>

dave · Accepted Answer · 2021-09-17 07:25:04Z

Use $(this).val() inside your click event:

$(document).ready(function() {
    'use strict';

  $('input[type=radio], input[type=checkbox]').on('click', function(e) {
    
    console.log($(this).val());
    $(this).parents('.test-step').next().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })

  $('.test-step .prev-btn').on('click', function(e) {
    
    $(this).parents('.test-step').prev().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="col-sm-6">
                <div class="form-group">
                  <input type="radio" name="calisan-sayisi"  value="1 - 2" class="form-control" id="1 - 2">
                  <label for="1 - 2">1 - 2</label>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="radio" name="calisan-sayisi" value="3 - 4" class="form-control" id="3 - 4">
                  <label for="3 - 4">3 - 4</label>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="radio" name="calisan-sayisi" value="5 - 19" class="form-control" id="5 - 19">
                  <label for="5 - 19">5 - 19</label>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="radio" name="calisan-sayisi" value="20 - 49" class="form-control" id="20 - 49">
                  <label for="20 - 49">20 - 49</label>
                </div>
              </div>
              <div class="col-sm-12">
                <div class="form-group">
                  <input type="radio" name="calisan-sayisi" value="50 +" class="form-control" id="50 +">
                  <label for="50 +">50 +</label>
                </div>
              </div>

Collectives™ on Stack Overflow

Get Radio Input Value On Button Click Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related