Как получить значение из поля формы, реализованного в виде bootstrap-toggle, и отправить его на сервер?

Question

[tj57]

Есть input в виде bootstrap-toggle, предназначенный для выбора пола:

<input type="checkbox" name="sex" id="toggle-gender" data-onstyle="primary" data-on="Male" data-off="Female" data-toggle="toggle">

$(function() {
    $('#toggle-gender').bootstrapToggle({
      on: 'Male',
      off: 'Female'
    });
  })

Как получить значение с этого инпута, чтобы отправить его на сервер ? Попробовал так, не работает:

$('#toggle-gender').change(function() {
  if ($(this).prop("checked" == true) {
    $('#toggle-gender').value = 'Male';
  } else {
    $('#toggle-gender').value = "Female";
  }
})

И нужно ли вносить изменения в обработчик формы?

<?php

if (isset($_POST["firstname"]) && isset($_POST["lastname"]) && isset($_POST["sex"]) && isset($_POST["phone"]) && isset($_POST["email"]) ) {

    $result = array(
    	'firstname' => $_POST["firstname"],
    	'lastname' => $_POST["lastname"],
      'sex' => $_POST["sex"],
      'phone' => $_POST["phone"],
      'email' => $_POST["email"]
    );

    echo json_encode($result);
}

?>

Answer 1

[vasiiil]

Если я правильно понял вопрос, то можно решить так:

if (isset($_POST["firstname"]) && isset($_POST["lastname"]) && isset($_POST["phone"]) && isset($_POST["email"]) ) {

    $result = array(
    	'firstname' => $_POST["firstname"],
    	'lastname' => $_POST["lastname"],
      'sex' => !empty($_POST["sex"]) ? <признак мужского пола> : <признак женского пола>,
      'phone' => $_POST["phone"],
      'email' => $_POST["email"]
    );

    echo json_encode($result);
}

?>

Comments

[tj57]

<признак мужского пола>

не совсем понятно, что сюда писать именно

[vasiiil]

Из чек боксов формы на сервер отправляется значение, которое в атрибуте value у инпута. Но оно отправляется только в том случае, если чекбокс отмечен. В вашем случае это мужской пол. Если чекбокс не отмечен, то на сервер это поле вообще не отправляется при стандартной отправке формы

[tj57]

vasiiil, я решил проблему с помощью jquery-скрипта, но не полностью, потому что как раз значение не отправляется, если поле unchecked. Отправляется только вариант Male, потому что в этом случае поле checked. Как это решить, не подскажете? Я попробовал добавить скрытый input и форма отправляется без ошибки, но значение пола просто остается пустым.

Это добавленный скрипт:

$(function() {
    $('#toggle-gender').bootstrapToggle({
      on: 'Male',
      off: 'Female'
    });
  })

  $('#toggle-gender').change(function() {
    var isChecked = $(this).is(":checked");
    var the_value = isChecked ? 'Male' : 'Female';
    $(this).val(the_value);
  
  })

  if ($('#toggle-gender').is(":checked") == false) {
    $('#toggle-gender').val('Female');
  }

[vasiiil]

Все правильно. Чекбокс не отправляется на сервер, если он не отмечен или снят. Вам надо либо переопределить на стороне клиента отправку формы, либо мой первый предложенный вариант на стороне сервера.
Sex => !empty($_POST[‘sex’]) ? ‘Male’ : ‘Female’
Так как если ваш чекбок отмечен, то это будет мужской пол, иначе - на сервер ничего касательно пола не отправляется и это женский пол

[tj57]

vasiiil, в том и вопрос, как правильно переопределить отправку формы на стороне клиента ?

[vasiiil]

tj57, а чем вам не понравился ваш же вариант с hidden инпутом? просто на сервере надо принимать пост-параметр не sex, а ваш hidden инпут