jQuery not firing on submit of a form

I am doing a check on form submit to see if textbox is empty but for some reason my jQuery code is not firing. here is my test page

http://dev.mommyjewelry.com/family-love-charms/family-love-charm-circle.html

if you scroll down and click on add to shopping bag, it should check to see if the Family Love Charm 1 Text is empty and if it is it should show a alert box. here is my code. One thing I am doing is that if you select more than one charm from the drop down how many charms, there will be more than one text box is displayed and the code below checks that all the family love charm text boxes are not empty.

<script type="text/javascript">
	$(document).ready(function(){
	  $("#product_form").submit(function(e) {
var number_of_charms = $("#charm").attr("selectedIndex") + 1;
var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
if(number_of_charms > fields_not_empty) {
$(".error").show();
alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
e.preventDefault();
}
});
	});
	</script>

Open in new window


Thanks and appreciate it
LVL 2
niceoneishereAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,

really hard to debug when everything is minimized :-)

Two comments:
- The attr method does not work - please use the ".prop" instead (which returns the correct value)
- The check on empty fields does not work properly

Fix for the first issue:
<script type="text/javascript">
	$(document).ready(function(){
	  $("#product_form").submit(function(e) {
var number_of_charms = $("#charm").prop("selectedIndex") + 1;
var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
if(number_of_charms > fields_not_empty) {
$(".error").show();
alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
e.preventDefault();
}
});
	});
	</script>

Open in new window


Sorry, short in time to deliver a fix for the second issue.

HTH
Rainer
0
niceoneishereAuthor Commented:
Hi Thanks for replying,

I did a lot of debugging and I narrowed it down that even though the textbox is empty the code that checks for textbox is empty or not is always returning that the textbox is not empty. What I mean is the length is showing 1 instead of 0 . I put a alert box and if you click on add to shopping bag you will see that the alert box shows as 1. I even tried to display the value of the textbox but by default it shows nothing as you can see in the alert box but still says the length is 1

var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
var field_value = $(":text[name^=Product_Attribute]:visible[value]").val(); 
alert("Length is "  + fields_not_empty + " and value of textbox is " + field_value);
e.preventDefault();

Open in new window

0
sajayj2009Commented:
	$(document).ready(function(){ $("#product_form").submit(function(e) {
		var number_of_charms = $("#charm").prop("selectedIndex") + 1;
		var fields_not_empty = $("input[name^=Product_Attributes]:visible[value]").length;
		var field_value = $(":text[name^=Product_Attributes]:visible[value]").val();
		e.preventDefault();
		$(".text-value .textfield:visible").each(function(i) {
			var fields_empty = $(this).val();
			if(fields_empty=='') {
				alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
				$(this).next(".error").show();
			} else {
				$(this).next(".error").hide();
			}
		});
		/*if(number_of_charms >= fields_not_empty) {
			$(".error").show();
			alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
			e.preventDefault();
		}*/
		});
	});

Open in new window

0
niceoneishereAuthor Commented:
Thanks for replying but this does not work. I am just stumped why my code won't work
0
Rainer JeschorCommented:
Hi,
you are just counting the visible fields, but not the empty ones.

You have to check each fields value (and make a trim on it) like:
<script type="text/javascript">
	$(document).ready(function(){
		$("#product_form").submit(function(e) {
			var hasEmptyInput = false;
			var number_of_charms = $("#charm").prop("selectedIndex") + 1;
			$(":text[name^=Product_Attribute]:visible[value]").each(function() {
				if($.trim($(this).val()) == '') {
					hasEmptyInput = true;
				}
			});
			
			if (hasEmptyInput) {
				$(".error").show();
				alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
				e.preventDefault();
				return false;
			}
		});
	});
</script>

Open in new window


HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.