1

I kinda new to jQuery so I get a little trouble. How do I code to get the value of a radio button by its id? The solution propose from any other similar questions kinda confuses me. Below are the codes:

$(document).on("click", "#Update", function() {
  let id = $(this).data('id');
  let tank_name = $(this).data('tank_name');
  let title = $(this).data('title');
  let tank_maintain = $(this).data('tank_maintain');
  let work_status = $(this).data('work_status');

  $("#t_maintenanceID").val(id);
  $("#tank_name").val(tank_name);
  $("#title_maintenance").val(title);
  $("#tank_maintain").val(tank_maintain);
  $("work_status:checked").val(work_status);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="form-group">
  <div class="row">
    <label class="col-form-label col-sm-2 pt-0">Priority:</label>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="work_status" id="work_status" value="High">
        <label class="form-check-label" for="work_status">
                  High
                </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="work_status" id="work_status" value="Medium">
        <label class="form-check-label" for="work_status">
                  Medium
                </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="work_status" id="work_status" value="Low">
        <label class="form-check-label" for="work_status">
                  Low
                </label>
      </div>
    </div>
  </div>
</fieldset>
Aalexander
  • 4,987
  • 3
  • 11
  • 34
carrotgal
  • 21
  • 4

4 Answers4

0

You should not use duplicated element id. HTML attribute id is unique value.

$('input[name=work_status]:checked').val() will helps you.

Hoto Cocoa
  • 489
  • 3
  • 12
0

Use:

 $('input[name=work_status]:checked').val()

Be careful, you are using the same id for all the radio buttons, id must be unique for each dom element.

Damiano Mazzara
  • 61
  • 4
0

IDs need to be unique

You can use the name and wrap the label (see the changes I made to the HTML)

If you need to get the checked value in another event than the click on the radio itself, use

$("[name=work_status]:checked").val()

Like this

$(function() {
  $(document).on("click", "[name=work_status]", function() {
    let id = $(this).val()
    console.log(id)
  });
  $("#Update").on("click", function() {
    const workStatus = $("[name=work_status]:checked").val();
    console.log(workStatus)
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="form-group">
  <div class="row">
    <label class="col-form-label col-sm-2 pt-0">Priority:</label>
    <div class="col-sm-10">
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="work_status"  value="High"> High
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="work_status"  value="Medium"> Medium
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="work_status" value="Low"> Low
        </label>
      </div>
    </div>
  </div>
  <button id="Update" type="button">Click</button>
</fieldset>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

First , Make sure each element has a unique id , that will allow you to target specifically the element you want.

then you can use this : $("input[name=work_status]:checked").val()

khawla Ilahi
  • 1