У меня есть форма, где один из элементов управления (внутри 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?: </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;
отключен входные элементы игнорируются $.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();
});
Вместо того, чтобы пойти на сложный обходной путь в 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>
details
в переменной перед удалением details
Div от DOM.details
div будет добавлен в DOM и отображен или удален из DOM в случае No
выбран.Надеюсь, поможет!