JQuery не работает правильно в форме с DIVS

0

У меня есть форма, которая форматируется с использованием 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:&nbsp;&nbsp;
    <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 -->
                    &nbsp;&nbsp;&nbsp;&nbsp;1<input id="hole01" type="text" name="h1" class="input1"/>
                    &nbsp;&nbsp;2<input id="hole02"  type="text" name="h2" class="input1"/>
                    &nbsp;&nbsp;3<input id="hole03"  type="text" name="h3" class="input1"/>
                    &nbsp;&nbsp;4<input id="hole04"  type="text" name="h4" class="input1"/>
                    &nbsp;&nbsp;5<input id="hole05"  type="text" name="h5" class="input1"/>
                    &nbsp;&nbsp;6<input id="hole06"  type="text" name="h6" class="input1"/>
                    &nbsp;&nbsp;7<input id="hole07"  type="text" name="h7" class="input1"/>
                    &nbsp;&nbsp;8<input id="hole08"  type="text" name="h8" class="input1"/>
                    &nbsp;&nbsp;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>
  • 1
    селектор > выбирает детей. Это явно не то, что вы хотите, так как дети вашей формы - это div.
Теги:

3 ответа

2

Элементы ввода не являются дочерними элементами формы, они являются потомками, поэтому вместо дочернего селектора используйте селектор потомков

$(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();
            }
    });
});

Демо: скрипка

Поделиться
  • 0
    Спасибо - у меня 7 детей (больше меня обманывают), и все они потомки, не так ли? Если бы я только знал разницу! Дело в том, что я не понимаю, что кнопка «Отправить» является «входом».
0

Поскольку вы добавили 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();
            }
    });
});
Поделиться
0

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(){});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню