jQuery problem with finding value of multidimensional arrays

I have a form with the following inputs:

<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">

When the form submits, I want to make sure the user has entered every one of these inputs. Here is the jQuery I'm using:

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

But the form is still submitted if there's input values for products[1] but not input values for products[2]. Does anybody know where I'm going wrong?

---

you are missing the $ instead of

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

do

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

your code should be like

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

here is the fiddle http://jsfiddle.net/3nigma/NewsM/

Update

im not sure about your scenario but before the submit you should validate the fields if you have the following 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/>

on click validate all the input fields of type 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

});
});

here is the fiddle http://jsfiddle.net/3nigma/NewsM/1/

---

$.fn.val is only going to get you the value of the first item in the collection.

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

Description: Get the current value of the first element in the set of matched elements.

Since you have multiple elements with the "rrp" class. When you call

$('.rrp').val()

You are only going to get the value for the first element, in your case products[1][rrp].

If you want to check every item with that class, you have to loop through every collection and check the values individually.

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

Even better would be

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;
}

---

This works for me

<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>

---

You could do (using attrubtes starts with selector and saving you a lot of typing):

$("form#answerReport").submit(function(){
  $('input[name^="products"]').each(function(){
  if ($(this).val() == ''){
      $(".error.hide").text("Please fill in the product information").show();
          return false;
   });
});