Как сделать, чтобы jquery serialize игнорировал поле ввода в div, которое переключается между hide и show

У меня есть форма, где один из элементов управления (внутри div) не имеет отображения ни одного. Когда пользователь проверяет определенную радиокнопку, отображается скрытый элемент div, который содержит элемент ввода, позволяющий ему ввести некоторые данные.

Когда я протестировал его с помощью PHP (используя функцию isset ()), я понял, что входная переменная установлена, даже если ее родитель (div с id деталей) не отображается.

Однако я хочу, чтобы serialize отправлял переменную на сервер только при отображении div, содержащего поле ввода. Если я, однако, не отображаю элемент ввода напрямую, он работает так, как я хочу. Но я хочу, чтобы он был в div, потому что некоторые элементы управления, такие как метки и многие другие возможные поля ввода, также должны быть скрыты. Одним из быстрых решений будет дать всем элементам управления или элементам в div класс и переключать их отображение с помощью переключателей, но я предпочитаю, чтобы класс был в div, оборачивая их всех.

HTML:

<form id="form">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="firstname" class="form-control" name="firstname" autofocus placeholder="First Name">
</div>
<div class="form-group">
<label for="surname">Surname</label>
<input type="surname" class="form-control" name="surname" placeholder="Surname">
</div>

<label>1. Do you program?: &nbsp;</label>
<label class="radio-inline">
<input type="radio" name="one" value="Yes"> Yes
</label>

<label class="radio-inline">
<input type="radio" name="one" value="No" checked> No
</label>

<div class="form-group" id="details" style="display:none;">
<label class="control-label">State your Languages</label>
<input type="text" name="language" class="form-control" autofocus>
</div>

<div class="form-group">
<button id="submit" class="btn btn-primary">Submit</button>
</div>
</form>

JavaScript

$(function(){
$('#form input[name=one]').change(function(event) {
$('#details').toggle();
});

$('#submit').on('click', function(event) {
event.preventDefault();
var form = $('#form');

$.ajax({
url: 'process.php',
type: 'POST',
dataType: 'html',
data: form.serialize()
})
.done(function(html) {
console.log(html);
})
.fail(function() {
console.log("error");
})

});
});

PHP

if(isset($_POST['language'])) {
echo 'Language is set';
} else {
echo 'Not set';
}

PHP сообщает ‘Language set’, даже если для div, содержащего ввод с именем языка, отображается значение none;

0

Решение

отключен входные элементы игнорируются $.serialize()

 <input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

Временно включить их.

var myform = $('#myform');

// Find disabled inputs, and remove the "disabled" attribute
var disabled = myform.find(':input:disabled').removeAttr('disabled');

// serialize the form
var serialized = myform.serialize();

// re-disabled the set of inputs that you previously enabled
disabled.attr('disabled','disabled');

ИЛИ ЖЕ

Вы можете вставить поля ввода без атрибута «name»:

<input type="text" id="in-between" />

Или вы можете просто удалить их после отправки формы (в jquery):

$("form").submit(function() {

$(this).children('#in-between').remove();

});
0

Другие решения

Вместо того, чтобы пойти на сложный обходной путь в JavaScript, вы можете сделать это простым способом PHP. Проверьте, если переключатель Yes выбран, и если он выбран, вы можете выполнить другую обработку на основе этого.

if(isset($_POST['one']) && $_POST['one'] === 'Yes') {
if(!empty($_POST['language'])) {
echo $_POST['language'];
} else {
echo "Language is given empty!";
}
} else {
echo 'Language is not selected!';
}

Приведенный выше код PHP — это простой обходной путь. Вы могли бы пойти на это. Если вы хотите сделать это только в самом JavaScript, я бы направил вас к ответу Билал. У него есть некоторые обходные пути с JavaScript.

РЕДАКТИРОВАТЬ

Я придумал свой собственный простой обходной путь в JavaScript. Надеюсь, это поможет вам.

<script>
$(function() {
var details = $('#details');
$('#details').remove();

$('#form input[name=one]').click(function() {
if(this.value === 'Yes') {
details.insertBefore($('#form div.form-group:last-of-type'));
details.show();
} else {
$('#details').remove();
}
});
});
</script>
  1. Хранение ссылки на div id details в переменной перед удалением details Div от DOM.
  2. На основании значения, выбранного в переключателе, details div будет добавлен в DOM и отображен или удален из DOM в случае No выбран.

Надеюсь, поможет!

0

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector