CODEWITHSUNDEEP
jquery
yaylitzis
yaylitzis

Reputation: 5554

Get the value of radio button when the user clicks it

In a form I have 2 inputs where the 2nd input is filled automatically when the user fills the 1st one and then post them to server.

<div class="form-group">
  <div class="col-lg-2">
    <select name="id" class="form-control" id="select" required> 
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
  </div>

 <div class="col-md-2 col-sm-3">                      
      <input type="text" class="form-control" id="inputName" name="car" required>
 </div>
</div>

and the script

var names = ${mylist} // I load here the list
$('#select').on('change keyup', function(e) {

  var i = this.selectedIndex;
  var txt = i ? names[i - 1] : '';
  var status=1;
  $('#inputName').val(txt);

  //Point1
  //here I post the i, txt, status to the server

});

It works fine. Now I added a radio input

<div class="form-group">
  <div class="col-lg-4 >
    <div class="radio">
        <label> <input type="radio" name="status" value="1" required> 1</label>
        <label> <input type="radio" name="status" value="2" required> 2 </label>  
        <label> <input type="radio" name="status" value="3" required> 3 </label>  
    </div>
  </div>
</div>

and I want to send the value of status (instead of status=1) when the user clicks the radio button. I added this in //point1:

$("input:radio[name=status]").click(function() {
    status = $(this).val(); 
});

but it doesn't work..

Upvotes: 1

Views: 83

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

Your click handler is correct and will give you value of clicked radio button. It may happened that DOM is not ready when handler code executes. To ensure DOM is ready, put your script inside $(function(){..}); or $(document).ready(function(){....});

Note - You markup is incorrect for <div class="col-lg-4 >, put quotes after class value.

$(function(){
    $("input:radio[name=status]").click(function() {
       status = $(this).val(); 
       alert(status);
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-lg-4" ><!-- correct html by puttin quotes after class value-->
    <div class="radio">
        <label> <input type="radio" name="status" value="1" required> 1</label>
        <label> <input type="radio" name="status" value="2" required> 2 </label>  
        <label> <input type="radio" name="status" value="3" required> 3 </label>  
    </div>
  </div>
</div>

Upvotes: 1

Satpal
Satpal

Reputation: 133453

You should use :checked selector to get the value of checkbox element which is selected, also use change event

$("input:radio[name=status]").change(function() {
    status = $("input:radio[name=status]:checked").val(); 
});


$("input:radio[name=status]").click(function() {
  var status = $("input:radio[name=status]:checked").val();
  snippet.log(status)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div class="form-group">
  <div class="col-lg-4">
    <div class="radio">
      <label>
        <input type="radio" name="status" value="1" required>1</label>
      <label>
        <input type="radio" name="status" value="2" required>2</label>
      <label>
        <input type="radio" name="status" value="3" required>3</label>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions