Проблема сбора значения флажка с использованием AJAX и PHP

Question

Я работаю над формой, которая имеет флажок ввода. Форма имеет поле ввода флажка, посредством которого я изменяю значение динамически в зависимости от того, установлен флажок или нет. Когда пользователь нажимает на флажок, значение должно измениться на 1 ,,, когда не нажата, значение должно быть нулевым. Я собираю значение через AJAX и отправляю его в бэкэнд (сборка в PHP Laravel). Когда я dd () получаю значение, я получаю нулевое значение флажка, помогите, пожалуйста,

Макет, содержащий поле с флажком

 <div class="check-now {{ $errors->has('spouse') ? ' has-error' : '' }}" style="width: 100%;">
        <h1 class="cover-travel">I am travelling with</h1>
        <label class="spouse-me">
            <h1 class="pumba">Spouse</h1>
            <input type="checkbox" id="spouse" value="" class="spouse"  onClick="checkMark()">
        </label>
        @if ($errors->has('spouse'))
            <span class="help-block">
                <strong>{{ $errors->first('spouse') }}</strong>
            </span>
        @endif
    </div>

Функция, которая изменяет значение флажка

 function checkMark() {
      var checkBox = document.getElementById("spouse");
      var text = document.getElementById("spouseDetail");

      // If the checkbox is checked, display the output text
      if (checkBox.checked == true){
        checkBox.value = '1';
      } else {
        checkBox.value = 'O';
      }
    }

AJAX для отправки данных в бэкэнд

// Get the form via its id
    var form = $('#travel_form');

    $( "form" ).submit(function( event ) {
        event.preventDefault();
        //alert('clicked');


        //Fetch the value of spouse
        var spouse = $('#spouse').val();

        //Log in console tab am getting an empty value
        console.log(spouse);

        //Add in a JS object
        var type = {
            'spouse' : spouse 
        }

        $.ajax({
            type: "POST",
            url: "getplans",
            data:JSON.stringify(type),
            contentType: 'application/json',
            dataType: "json",
            success: function(response){
                window.location.href="getp" ;
            },
            //Alert errors from backend
            error: function(data) {
                var errors = '';
                for(datos in data.responseJSON){
                    errors += data.responseJSON[datos] + '\n';
                }
                alert(errors);
            }
        });
    });

Контроллер, обрабатывающий вызов AJAX

 public
    function validatePlanEntries(Request $request)
    {   
        //dd($request->all());
    }

Answer 1

Вы можете немного упростить свой код. Если вы просто хотите передать состояние флажка, вам нужно только:

Вместо вашей checkMark() функции просто отметьте ее в обратном вызове submit.

// This will set the value 1 if it is checked and 0 if it isn't.
var checkBox = document.getElementById("spouse");
var type = {
    'spouse' : checkBox.checked ? 1 : 0 
}

// Don't stringify the object, just pass it as is. jQuery will take care if it.
$.ajax({
    ...
    data: type,
    ...