If select field name is an array- error!

[smashing]

I have a select (drop-down-menu) field in a form , and its name looks like this:

<select name="id[1]"> etc.

I'm trying to disallow a particular choice (the default one of "please choose" that I gave a value of 20) but I'm getting a Javasaript error:
"id.1.value is not an object"

The following is my code:

<script LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from older browsers
function validForm(cart_quantity) {
if (cart_quantity.id[1].value =="20") {
alert("Please choose your item color")
cart_quantity.id[1].focus()
return false
}
return true
}
// End hiding script --></script>


Where did I go wrong?

 

[cLFlaVA]

Why are you naming it with []?

You can try this:

var s = document.forms['formname'].elements['id'][1];
if (s.options[s.selectedIndex].value == '20') {
    alert("Please choose your item color");
    s.focus();
    return false;
}

return true;

Alternatively, you can just check to see if s.selectedIndex == 0; which means the very first option is selected.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]

 

[smashing]

Thanks cLFlaVA,
tried your suggestion but not working for me.

Code now reads:

function validForm(cart_quantity) {
var s = document.forms['cart_quantity'].elements['id'][1];
if (s.options[s.selectedIndex].value == '20') {
alert("Please choose your item color");
s.focus();
return false;
}
return true;
}


javascript error:

options is not an object

 

[trollacious]

Using illegal characters in element and ID names is always risky. Since the square brackets are reserved characters for Javascript, you'll most likely have problems every time you use them and expect JS code to handle events with them. The best thing is to not use those characters, but if you must then you should probably use VBScript as your scripting language (which is IE only).

You might try:

var s = document.forms['cart_quantity'].elements['id[1]'];

but the best thing is to remove the reserved characters.


Lee

 

[smashing]

Thanks. I have to use them as this is part of a huge OsCommerce-driven site. And you know how tricky it is to tweak around OsCommerce....

I thought Javascript has no problem with those brackets when it comes to checkboxes, why would it go crazy if the field is a select?

 

[cLFlaVA]

so you're saying they're checkboxes?
that wasn't made clear from your original question. selectedIndex and options are properties/collections of select boxes (dropdowns).

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]

 

[cLFlaVA]

oh, now i see what you're saying.

you shouldn't use the brackets, as lee said. naming three checkboxes "test" will allow you to reference them in javascript with the square brackets because the three "test" fields become an array of elements.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]

 

[smashing]

ahh i see..
But lee is definitely onto something here , because i tried his example:
.elements['id[1]']; instead of .elements['id'[1]]; and Javascript is not throwing any more errors at me anymore. Problem is though, the validation isn't happening at all!

Current script:

function validForm(cart_quantity) {
//var s = document.forms['cart_quantity'].elements['id'][1];
var s = document.forms['cart_quantity'].elements['id[1]'];
if (s.options[s.selectedIndex]== 0) {
alert("Please choose your item color");
s.focus();
return false;
}
return true;
}


...and like I said - even if the first option is selected it'll let the form go through without alerting anything. I'm getting there..... any suggestions at this point?

 

[tsuji]

smashing wrote:
>even if the first option is selected it'll let the form go through without alerting anything

From this, I can only deduce that the latest version check s.selectedIndex rather than s.options[n].value, as in the previous versions. Hence, it is this.
[tt]
if ([red]s.selectedIndex[/red] == 0) {
alert("Please choose your item color");
s.focus();
return false;
}
[/tt]
- tsuji

 

[smashing]

Thanks tsuji

Alas its still doing the same. Javascript is not complaining - no errors at all - so it looks like it understands and recognizes my var:

var s = document.forms['cart_quantity'].elements['id[1]'];

...and it doesn't complain "s is not an object" anymore
But if I try any of these:

if (s.value =="21") {

(which is the first option value) or like this:

if (s.selectedIndex== 0) {

nothing happens! No validation takes place! Any help would be greatly appreciated.

 

[trollacious]

Like we've said, get rid of the square brackets. You'll find a LOT of posts in the Javascript forum about problems with that.

Lee

 

[smashing]

I have no choice... like i specified before it's part of a huge OsCommerce site and is very very dificult to change around (I would have to revise the whole system of how OsCommerce reads products in a basket and their attributes - something that is beyond my scope.
But if there are no errors anymore, then at least we're headed in the right direction right?

 

[trollacious]

http://tek-tips.com/viewthread.cfm?qid=885824

Check out the quote from the w3c from BillyRayPreachersSon on this page.

Lee

 

[smashing]

Well, for the record, I finally got it to work. This is how it should be;

var s = document.cart_quantity["id[1]"].selectedIndex;

if (s== 0) {
alert("Please choose your item color");

Thanks to all