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;
});
});
精彩评论