Селектор jQuery выбирает только первый элемент - PullRequest
Новая
       8

Селектор jQuery выбирает только первый элемент

2 голосов
/ 20 марта 2011

У меня небольшой вопрос об использовании jquery. У меня есть следующий код: 

<html> 
<head>

    <script src="jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("form").submit(function(){
       if(!$(':text').val()){
        $("span").text("sdfgsd").show();

        };return false;
      })
      });
    </script>
</head>
<body>
    <form action=""  id="ff" >
       <span></span>
        <input type="text" name="test" /> <br />
        <input type="text" name="test3" /> <br />
        <input type="checkbox" name="test2" /> <br />
        <input type="submit" value="push it" />
    </form>

</body>

проблема в том, что селектор активируется только для первого текстового поля. если вы введете значение в первое текстовое поле, триггер не активируется. ни текст, ни ввод не работают должным образом.

у кого-нибудь есть идеи ??

спасибо заранее, Дениср

Ответы [ 5 ]

4 голосов
/ 20 марта 2011

Функция val() в селекторе jQuery, соответствующем нескольким элементам, возвращает значение первого сопоставленного элемента.Вам нужно перебрать все элементы и проверить значение каждого из них. 

$(document).ready(function(){
  $("form").submit(function(){
     var inputsHaveValues = true;
     $(':text').each( function() {
         if (!$(this).val()) {
            inputsHaveValues = false;
            break;
         }
     });

     if (!inputsHaveValues) {
         $("span").text("sdfgsd").show();
         return false;
     }
  })
});
3 голосов
/ 20 марта 2011

val является деструктивным методом (вы не можете связать его с ним), и поэтому при применении к объекту, содержащему много элементов, должен возвращать значение, для которого он будет выполнять первый.

Вам следует обратиться к методу each, чтобы просмотреть все ваши текстовые поля. 

$('input:text').each(function(index, elm) {
  if(!$(this).val()){
    $("span").text("sdfgsd").show();
  };
});

Вы можете использовать индекс для определения конкретного span, в котором отображается сообщение об ошибке.

2 голосов
/ 20 марта 2011

Я бы посоветовал вам сделать что-то подобное: 

<html> 
<head>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#ff").submit(function(e) {
                $('.text-input').each(function() {
                    if ($(this).val() == '') {
                        $("#msg").text("sdfgsd");
                        e.preventDefault();
                        return false;
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form method="post" action=""  id="ff">
        <span id="msg"></span>
        <input type="text" class="text-input" name="test" /> <br />
        <input type="text" class="text-input" name="test3" /> <br />
        <input type="checkbox" name="test2" /> <br />
        <input type="submit" value="push it" />
    </form>
</body>
</html>
  • Старайтесь использовать как можно больше атрибутов id или class для доступа к элементам, потому что это более эффективно именее подвержен ошибкам
  • Используйте e.preventDefault() для предотвращения отправки формы
  • Используйте return false;, чтобы сразу выйти из цикла each
0 голосов
/ 20 марта 2011 
$(document).ready(function(){
    $("#ff").submit(function(event){
        $('input[type="text"]').each(function () {
            if(!$(this).val()){
               $("span").text("Foobar");
            }
        });
       event.preventDefault();
    })
});
  1. Прежде всего, пожалуйста, используйте event.preventDefault(); намного лучше, чем return false;.
  2. Используйте идентификатор - $(#ff) - только момент $('form').
  3. Используйте input[type="text"] мгновение только :text
  4. Используйте .each () - как говорили некоторые люди выше меня
0 голосов
/ 20 марта 2011

Попробуйте определить класс, применяемый к каждому тексту, определить идентификатор формы или использовать каждый jquery. Также проверьте наличие ошибок JavaScript.

http://api.jquery.com/jQuery.each/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...