У меня есть форма, которая форматируется с использованием divs для размещения различных входных данных. Я хочу скрыть кнопку отправки, пока все входы не будут заполнены пользователем. Я использую jquery для достижения этого, и он отлично работает в неформатированной форме. Когда я помещаю поля ввода внутри div, jquery больше не работает. Может ли кто-нибудь предположить, почему это должно происходить, пожалуйста?
Вот мой код:
<script src="includes/jquery-2.0.3.min.js">
</script>
<script>
$(document).ready(function(){
$("#submit_button").hide();
$('form > input').keyup(function(){
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#submit_button").hide();
} else {
$("#submit_button").show();
}
});
});
</script>
</head>
<body>
<div id="form">
<!-- The Results Entry Form - redirects to update page-->
<form action="ryder_front_update.php" method="post">
<div id="title">
<!-- Enter the name of the course for the form -->
EMG Ryder Cup - *FRONT* - Better-Ball RESULT
</div>
<!-- Enter the name of file of players if necessary -->
<div id="player">Select Player:
<span><select id="player_name" name="player" class="input" size="1" /></span>
<option value="null">Select player username</option>
<option value="247thDustoff">247thDustoff</option>
<option value="54david">54david</option>
<option value="alantudor7554">alantudor7554</option>
<option value="caucus">caucus</option>
<option value="crosshatch">crosshatch</option>
<option value="dollertree">dollertree</option>
<option value="Eviscera">Eviscera</option>
<option value="flubdubber">flubdubber</option>
<option value="FuzzyJones">FuzzyJones</option>
<option value="jchong">jchong</option>
<option value="jrinkc">jrinkc</option>
<option value="kerison">kerison</option>
<option value="Racenut14">Racenut14</option>
<option value="rikbeekman">rikbeekman</option>
<option value="robin1962">robin1962</option>
<option value="stevegeorge57">stevegeorge57</option>
</select>
</div>
<div id="holes">Hole scores: <!-- If I remove the "holes" div tags the jquery works perfectly -->
1<input id="hole01" type="text" name="h1" class="input1"/>
2<input id="hole02" type="text" name="h2" class="input1"/>
3<input id="hole03" type="text" name="h3" class="input1"/>
4<input id="hole04" type="text" name="h4" class="input1"/>
5<input id="hole05" type="text" name="h5" class="input1"/>
6<input id="hole06" type="text" name="h6" class="input1"/>
7<input id="hole07" type="text" name="h7" class="input1"/>
8<input id="hole08" type="text" name="h8" class="input1"/>
9<input id="hole09" type="text" name="h9" class="input1"/>
</div> <!-- If the above inputs are in the div the jquery code does not work-->
<div id="submit">
<input type="submit" id="submit_button" width="52" value="Submit" height="19" border="0" />
</div>
</form>
</div>
</body>
</html>
Элементы ввода не являются дочерними элементами формы, они являются потомками, поэтому вместо дочернего селектора используйте селектор потомков
$(document).ready(function(){
$("#submit_button").hide();
$('form input').keyup(function(){
var empty = false;
$('form input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#submit_button").hide();
} else {
$("#submit_button").show();
}
});
});
Демо: скрипка
Поскольку вы добавили div в элемент формы, теги input
становятся descendant
не children
Пытаться,
$(document).ready(function(){
$("#submit_button").hide();
$('form input').keyup(function(){
var empty = false;
$('form input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#submit_button").hide();
} else {
$("#submit_button").show();
}
});
});
parent > child
(Child Selector) получает все мгновенные дочерние элементы, в то время как parent child
(селектор потомков) будет искать весь элемент в иерархии
Пример:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
$("ul > li").addClass("newClass");
добавляет класс "newClass" к 1 2 и 3, тогда как:
$("ul li").addClass("newClass");
добавьте класс "newClass" к каждому элементу списка (1, 2, 3, 2.1, 2.2).
поэтому постарайтесь:
$('form input').keyup(function(){});
>
выбирает детей. Это явно не то, что вы хотите, так как дети вашей формы - это div.