JQuery проблема с поиском значения многомерных массивов - PullRequest
Новая
       9

JQuery проблема с поиском значения многомерных массивов

0 голосов
/ 29 июля 2011

У меня есть форма со следующими входами: 

<input type="text" name="products[1][rrp]" class="rrp">
<input type="text" name="products[1][sale_price]" class="sale-price">
<input type="text" name="products[1][beg_inv]" class="beg-inv">
<input type="text" name="products[1][end-inv]" class="rrp">
<input type="text" name="products[1][sold]" class="sale-price">
<input type="text" name="products[1][sampled]" class="beg-inv">
<input type="text" name="products[2][rrp]" class="rrp">
<input type="text" name="products[2][sale_price]" class="sale-price">
<input type="text" name="products[2][beg_inv]" class="beg-inv">
<input type="text" name="products[2][end-inv]" class="rrp">
<input type="text" name="products[2][sold]" class="sale-price">
<input type="text" name="products[2][sampled]" class="beg-inv">

Когда форма отправляется, я хочу убедиться, что пользователь ввел каждый из этих входов. Вот jQuery, который я использую: 

  $("form#answerReport").submit(function(){
    if($(".rrp").val()=='' || $(".sale-price").val()=='' || $(".beg-inv").val()=='' || $(".end-inv").val()=='' || $(".sold").val()=='' || $(".sampled").val()==''){
      $(".error.hide").text("Please fill in the product information").show();
      return false;
    }  
  });

Но форма все еще отправляется, если есть входные значения для продуктов [1], но нет входных значений для продуктов [2]. Кто-нибудь знает, где я иду не так?

Ответы [ 4 ]

2 голосов
/ 29 июля 2011

$. Fn.val только даст вам значение первого элемента в коллекции.

http://api.jquery.com/val/

Описание: Получить текущее значение первого элемента в наборе соответствующих элементов.

Поскольку у вас есть несколько элементов с классом "rrp". Когда вы звоните 

$('.rrp').val()

Вы получите значение только для первого элемента, в вашем случае products [1] [rrp].

Если вы хотите проверить каждый элемент с этим классом, вы должны пройтись по каждой коллекции и проверить значения по отдельности. 

var rrpValid = true;
$('.rrp').each(function(){
    if ($(this).val() == '') {
        rrpValid = false;
        $(".error.hide").text("Please fill in the product information").removeClass('hide');
    }
});
// check to see if there are any false values for rrp, sale-price, etc, 
// and return false if there are

UPDATE

Еще лучше было бы 

var validValues = true;
$('.rrp,.sale-price,.beg-inv,.end-inv,.sold,.sampled').each(function() {
    if ($(this).val() == '') {
        validValues = false;
        return false; // break loop
    }
});
if (!validValues) {
    $(".error.hide").text("Please fill in the product information").removeClass('hide');
    return false;
}
2 голосов
/ 29 июля 2011

вам не хватает $ вместо 

(".rrp").val()==''

do 

$(".rrp").val()==''

ваш код должен быть похож на 

$("form#answerReport").submit(function(){
    if($(".rrp").val()=='' || $(".sale-price").val()=='' || $(".beg-inv").val()=='' || $(".end-inv").val()=='' || $(".sold").val()=='' || $(".sampled").val()==''){
      $(".error.hide").text("Please fill in the product information").show();
      return false;
    }  
  });

вот скрипка http://jsfiddle.net/3nigma/NewsM/

Обновление

Я не уверен в вашем сценарии, но перед отправкой вы должны проверить поля, если у вас есть следующий html 

<input type="text" name="products[1][rrp]" class="rrp"/>
<input type="text" name="products[1][sale_price]" class="sale-price"/>
<input type="text" name="products[1][beg_inv]" class="beg-inv"/>
<input type="text" name="products[1][end-inv]" class="rrp"/>
<input type="text" name="products[1][sold]" class="sale-price"/>
<input type="text" name="products[2][end-inv]" class="rrp">
<input type="text" name="products[1][sampled]" class="beg-inv"/>
<input type="button" id="submit" value="submit"/><br/>

на click проверить все поля ввода типа text

$("#submit").click(function(){
    $("input:text").each(function(){

     if(!($(this).val()))
      {
       alert("validation err");
       return false;
      }
    else
        alert("safe to submit");
        return false;
        //$("form#answerReport").submit(); <-- submit the form here

});
});

вот скрипка http://jsfiddle.net/3nigma/NewsM/1/

1 голос
/ 29 июля 2011

Вы могли бы сделать (использование attrubtes начинается с селектора и экономит вам много времени на ввод): 

$("form#answerReport").submit(function(){
  $('input[name^="products"]').each(function(){
  if ($(this).val() == ''){
      $(".error.hide").text("Please fill in the product information").show();
          return false;
   });
});
1 голос
/ 29 июля 2011

Это работает для меня 

<html>
<head>
<script src="jquery-1.6.2.min.js"></script>
</head>

<body>
<form method="post" action="google.xml" id="answerReport">
<input type="text" name="products[1][rrp]" class="rrp">
    <input type="text" name="products[1][sale_price]" class="sale-price">
    <input type="text" name="products[1][beg_inv]" class="beg-inv">
    <input type="text" name="products[1][end-inv]" class="rrp">
    <input type="text" name="products[1][sold]" class="sale-price">
    <input type="text" name="products[1][sampled]" class="beg-inv">
    <input type="submit" />
    </form>
    <script language="javascript">
      $("form#answerReport").submit(function(){
        if($(".rrp").val()=='' || $(".sale-price").val()=='' || $(".beg-inv").val()=='' || $(".end-inv").val()=='' || $(".sold").val()=='' || $(".sampled").val()==''){
          $(".error.hide").text("Please fill in the product information").show();
          return false;
        }  
      });
</script>
</body>

</html>
...