CODEWITHSUNDEEP
javascriptjqueryhtml
Jack
Jack

Reputation: 513

$( "#id" ).val(); showing incorrect result?

HTML:

<div class="form-group btn-group btn-group-justified" data-toggle="buttons">
  <label class="btn btn-default btn-lg">
    <input type="radio" name="gender" value="Female" id="gender" required><i class="fa fa-female"></i> Female
  </label>
  <label class="btn btn-default btn-lg">
    <input type="radio" name="gender" value="Male" id="gender" required><i class="fa fa-male"></i> Male
  </label>
</div>

If I select the Male option and run val() I don't get Male:

$( "#gender" ).val();
"Female"

Why do I get Female?

Upvotes: 0

Views: 90

Answers (3)

rrk
rrk

Reputation: 15846

Use :checked for this.

$('input[name="gender"]').change(function(){
    alert($('input[name="gender"]:checked').val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-group btn-group btn-group-justified" data-toggle="buttons">
  <label class="btn btn-default btn-lg">
    <input type="radio" name="gender" value="Female" id="gender_female" required><i class="fa fa-female"></i> Female
  </label>
  <label class="btn btn-default btn-lg">
    <input type="radio" name="gender" value="Male" id="gender_male" required><i class="fa fa-male"></i> Male
  </label>
</div>

Upvotes: 3

Sudharsan S
Sudharsan S

Reputation: 15393

your html be

<div class="form-group btn-group btn-group-justified" data-toggle="buttons">
  <label class="btn btn-default btn-lg">
    <input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
  </label>
  <label class="btn btn-default btn-lg">
    <input type="radio" name="gender" value="Male"  required><i class="fa fa-male"></i> Male
  </label>
</div>

jquery

$("input[name=gender]").click(function() {
      alert($(this).val());
});

Fiddle

Upvotes: 1

CodingIntrigue
CodingIntrigue

Reputation: 78535

Because both radio buttons have the same ID (which btw is invalid in HTML). Use an attribute selector alongside the checked pseudo selector instead:

alert($("input[name='gender']:checked").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default btn-lg">
        <input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
      </label>
      <label class="btn btn-default btn-lg">
        <input type="radio" name="gender" value="Male" required checked><i class="fa fa-male"></i> Male
      </label>
    </div>

Upvotes: 3

Related Questions