Validate multiple selection forms, single page 2

[GuidoZ]

Hello all! I've been plugging away at this for longer then I'd like to admit and seem to have hit a barrier. It's a simple problem really, that is, it SHOULD be. I'm down to a few options (after hours of Google searches and trial-and-error), however I know there has to be a better way. I'm not really expereinced in Javascript, but understand the basics. Always willing to learn more.

Here's the scoop: I have multiple select forms (drop-down boxes) on a page. Each form is just that - a single select menu and a submit button. It goes to a CGI script that redirects the user to a different page depending on what they pick from the menu. (Part of a crude shopping cart system actually, the drop-down select menu is for size selection. Each different size of each product sends them to a different http link.)

All I'd like to do is have an alert box pop up and say "Please choose a size!" if they fail to before clicking the submit (add to cart) image. (It might make a difference I've read, so wanted to get that in there - the submit button is an image.) I've gotten the code I wrote to work on multiple levels, but never fully the way I think it should. I can use it easily to validate a SINGLE select form, but once I added multiple forms, I realized I needed to change it up a bit. So now I have multiple forms with multiple names, and a javascript function for each form. Being there can be up to 40 forms on a single page, it seems to get mess in the HEAD tag, being I will then have 40 functions, all doing the same thing. =/ This is my first problem... the second one I was having is trying to link the (working) code from an external .JS file.

There's the background info, here's the code in the HEAD tag:

<script language=&quot;javascript&quot;>
function validate1()
{
	if (size1.section.options[0].selected)
	{
		alert('Please choose a size before adding this item to your cart!');
		event.returnValue=false;
	}
}

function validate2()
{
	if (size2.section.options[0].selected)
	{
		alert('Please choose a size before adding this item to your cart!');
		event.returnValue=false;
	}
}

function validate3()
{
	if (size3.section.options[0].selected)
	{
		alert('Please choose a size before adding this item to your cart!');
		event.returnValue=false;
	}
}
</script>

... and it continue like that, changing the validate# and size# to however many forms I have on the page. (Up to 40 on some pages.) This in itself works, however i feel there has to be a better way, such as an array (The javascript n00b in me hinders me from knowing that?). I figure I should be able to use one function/array for all forms, but I couldn't figure out how.

The form is validated by a simple "onSubmit=validate#();" where # is different on each, calling one of those functions described above. My first question - IS THERE A BETTER WAY? =)

Second problem/question... if there isn't a better way, I'd like to link to all this code thru an external .JS file to save on page load. Seems sin\mple enough. I've read the format is to pop open a notepad document, copy all the actual code (minus script tags and such), then save it as a .JS file (like validate.js) and link it like:

<script language=&quot;JavaScript&quot; src=&quot;validate.js&quot; type=&quot;text/javascript&quot;></script>

The exact same code, but up to 99 functions, are included. I wanted to simple use this across all pages, linking to same same script. It simply doesn't work, even though it does if I put the code in the header. Linking to this JS file in the header just does nothing. Second question - AM I DOING SOMETHING WRONG? =)

I greatly appreciate any and all help on this. If I'm missing some info you need, by all means ask. Been frustrating me for some time, as I rarely run into a snag which a few hours and Google can't solve. TIA everyone, Happy Holiday's.

---------
~ GuidoZ

 

[tweenerz]

Hi GuidoZ,

First ... Whenever you have 2 or more functions that are 99% the same except for a value or two, they should always be consolidated into one. They way to do this is to pass the select box object to the function:

function validateDropdown(dropdown)
{
if (dropdown.section.options[0].selected)
{
alert('Please choose a size before adding this item to your cart!');
event.returnValue=false;
}
}

Then you can loop thru all of them. This can be accomplished a variety of ways. You could just create a for loop and iterate the same number of drop downs:

for (var i=1;i<40;i++){
var d = eval('document.form.size'+i);
validateDropdown(d);
}

Secondly, I don't see a need, judging from what you wrote, for having so many forms. There is usually a better way. Maybe you can elaborate a little bit on why you need seperate forms and I could probably find a better solution.

Mike

 

[tweenerz]

Sorry, I was confusing size1,size2,size3 ... with the names of the selct boxes. I see now that they are actually the form names. So the modified version:

function validateDropdown(dropdown)
{
if (dropdown.options[0].selected)
{
alert('Please choose a size before adding this item to your cart!');
event.returnValue=false;
}
}


AND

for (var i=1;i<40;i++){
var d = eval('document.size'+i+'.section);
validateDropdown(d);
}

I think that is right. Again, this is probably a bandaid solution anyhow. I am confident there is a better way.

 

[adam0101]

Since each select box is in its own form, you could name them all the same (if they aren't already). Then you could use the same function for all of them using this: <form onSubmit=&quot;validate(this)&quot;>

The function would look like this:

function validate(f){
if(f.section.selectedIndex==0){
alert('Please choose a size before adding this item to your cart!');
return false;
}
return true;
}

Adam
while(ignorance==true){perpetuate(violence,fear,hatred);life--};

 

[GuidoZ]

Thank you so much for the quick replies! I'll give them a test momentarily. Just some additional notes to answer the questions:

usrbinperl - The reason they are seperate forms (and need to be) is actually rather simple. The page lists a bunch of fabrics for a product. You pick a size under each fabric, then click add to cart. Each fabric has it's own size selection box, so when you select a size and click &quot;add to cart&quot;, it takes you to a different http page, corresponding to the shopping cart database. (Using PaySystems.com) I need all the forms seperate as they are all different fabrics. =) I thought about adding the form, and I now realize it would of been helpful. Sorry for not including it before and creating slight confusion. For what it's worth, here it is now:

<form name=&quot;size&quot; action=&quot;[URL unfurl="true"]http://www.blah.com/cgi-bin/pulldown.cgi&quot;[/URL] method=&quot;post&quot; onSubmit=&quot;validate();&quot;>
<input type=&quot;hidden&quot; name=&quot;base&quot; value=&quot;[URL unfurl="true"]http://www.blah.com/&quot;>[/URL]
<select name=&quot;section&quot; size=&quot;1&quot;>
    <option VALUE=&quot;0&quot;>Choose a Size</option>
    <option VALUE=&quot;[URL unfurl="true"]http://www.blah.com/SM&quot;>Small</option>[/URL]
    <option VALUE=&quot;[URL unfurl="true"]http://www.blah.com/MED&quot;>Medium</option>[/URL]
    <option VALUE=&quot;[URL unfurl="true"]http://www.blah.com/LG&quot;>Large</option>[/URL]
    <option VALUE=&quot;[URL unfurl="true"]http://www.blah.com/XL&quot;>X-Large</option>[/URL]
</select>
<input type=&quot;image&quot; alt=&quot;Add to cart&quot; src=&quot;addcart.gif&quot; border=&quot;0&quot; width=&quot;70&quot; height=&quot;19&quot;>
</form>

For each fabric, the form name (size) increased by one (size1, size2, etc), as well as the validate# in the onSubmit (validate1, validate2, etc). As for your answer - Variables... yes that makes sense. I knew I was missing something in my javascript n00bness.

adam0101 - Originally I had them named all the same, but didn't know how to create the proper javascript to check them. The original javascript I had (with them all named the same) was:

<script language=&quot;javascript&quot;>
function validate()
{
    if (size.section.options[0].selected)
    {
        alert('Please choose a size before adding this item to your cart!');
        event.returnValue=false;
    }
}

It worked beautifully for a single drop-down form. Once I added the same form multiple times on the page, it didn't work since I was missing something. I believe it's the &quot;
f&quot; you are tossing into the mix. =)

I'll give both a try and see which works best for me. It looks like they are both correct (as I was at both spots at one time), and would both work. My original intentions (upon starting this 4 days ago) was to get where adam0101 is at (a single form). Since yesterday, I was trying to get where usrbinperl is at, but missed out on using variables. (Again, javascript n00b... I know enough to keep my status bar nice and pretty. )

This place so rocks, thanks all. Will post up final results soon. =)

~ GuidoZ

 

[GuidoZ]

Ahhhh, I'm so happy right now. =)

They both work (2nd post for you usrbinperl), I think I'm going to use the method adam0101 posted up since it was my original intention. On the flip side, I learned something new (variables!) no matter how simple. So thx also to you usrbinperl for that. (After seeing how you formatted it, and knowing the stuff on this end, I was able to pick up how to do a basic variable rather quickly.) Awesome.

Rated both of ya with star, again, thanks so much for the help. =)

P.S. One thing I wasn't fond of (using adam0101's method) is the way it would refresh the page after clicking &quot;ok&quot; to the &quot;select a size&quot; prompt. I solved this by modifying it slightly. Here's the full header code I'm using:

<script language=&quot;JavaScript&quot;>
<!--
function validate(f){
  if(f.section.selectedIndex==0){
	alert('Please choose a size before adding this item to your cart!');
	event.returnValue=false;
    }
}
//-->
</script>

As you can see, I just went back to my original code, but added the &quot;f&quot; function you taught me. =D Just wanted to make sure this wouldn't break something (it does work). I also removed the &quot;return true&quot;. Is this a big no-no in the javascript/programming world? I realize the purpose (vaguely) of return true/false, and it seems removing it here will be ok. (It keeps it from refreshing the page if they forget to choose a size.) Not a pressing question (it does what it needs to do still) but if you feel like learning me a tiddle bit more, feel free.

~ GuidoZ

 

[adam0101]

Oops, the reason it was refreshing the page is because the form tag should have looked like this:
<form onSubmit=&quot;return validate(this)&quot;>

Either way will work, just based on your preference.

Adam
while(ignorance==true){perpetuate(violence,fear,hatred);life--};

 

[GuidoZ]

Thanks again - I'll change it back since it looks like more &quot;complete&quot; code to do it with your original post. You've been a huge help. =D

~ GuidoZ