[FIXED] How to send AJAX value as 1 when checkbox is checked and 0 when it is not checked?

Issue

I have a checkbox it's change text when checked (check is text = on, uncheck is text = off and this value are 0 and 1) I want get value 0 or 1 (check get 1 uncheck get 0) by ajax but I confuse in my code

$("#onoff").click(function() {
  if ($(this).is(':checked')) {
    $("#hidden_onoff").text("ON");
  } else {
    $("#hidden_onoff").text("OFF");
  }
});

$('#onoff').change(function() {
  if ($(this).prop('checked')) {
    $('#hidden_onoff').val('1');
  } else {
    $('#hidden_onoff').val('0');
  }
});

$.ajax({
  url: "/on_off",
  method: "POST",
  data: {
    onoff: $("#hidden_onoff").val(),
  },
  success: function(data) {}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="on_off">
  <div class="container">
    <div class="form-check form-check-inline">
      <input id="onoff" type="checkbox" checked="checked" />
      <label class="checkbox-inline" id="hidden_onoff">ON</label>
    </div>
  </div>
</form>

Solution

You're setting the value of <label id="hidden_onoff"> rather than <input id="onoff">:

$('#hidden_onoff').val('1');

However, since you're using AJAX, it doesn't seem that you need to change the input's value anyway. You can define a variable based on whether the input is checked, and send that variable's value to the server.

Also, it doesn't seem that you need both click and change handlers. You can use the change event alone. If your intent is to change the input when its text is clicked, I suggest wrapping both the input and text elements in a <label>.

... you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit (label @ MDN)

Finally, it looks like you're executing the AJAX upon page load rather than upon input change. I recommend executing the AJAX from inside your event handler.

Here's a demonstration:

// select the input and label elements and store them as constants
const $onoff = $('#onoff');
const $label = $('#onoff_label');

// bind a change event handler to the input
$onoff.on('change', function() {

  // define value and label (1 and ON, or 0 and OFF)
  let cbox_value = $onoff.is(':checked') ? 1 : 0;
  let cbox_label = cbox_value ? 'ON' : 'OFF';

  // set label text (ON or OFF)
  $label.text(cbox_label);

  // send value via AJAX (0 or 1)
  $.ajax({
    url: "https://reqres.in/api/users",
    method: "POST",
    data: {
      onoff: cbox_value
    },
    success: function(data) {
      // show the result from server
      console.log(data.onoff);
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
  <input id="onoff" type="checkbox" checked="checked">
  <span id="onoff_label">ON</span>
</label>

Answered By - showdev

Answer Checked By - David Marino (PHPFixing Volunteer)