The easiest way to find the number in question would be if - say the form had the same number attached to its id. If you have a reference to the form, then using a regular expression function you could know what the name and id of the select would be. This depends upon knowing a little more about the structure of these forms than you've told. But given this sort of structure or one that follows it as far as id's and names go and no other way to submit each form than via its submit button:
HTML Code:
<form action="#" id="form-1">
<div class="sizeselect">
<span style="font-size:11px;">Sizes Available:</span><br />
<select id="menu-1" name="idsize_1">
<option value="0">--Size--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
In other words, this demo works:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
(function(){
var re = /^form-(\d+)$/;
function validateForm(form){
var qualifier;
if((qualifier = re.exec(form.id))){
qualifier = form.elements['idsize_' + qualifier[1]];
} else {return true;}
if(qualifier.selectedIndex === 0){
alert("Please select an Item.");
qualifier.focus();
return false;
}
return true;
}
document.onclick = function(e){
e = e || event;
var t = e.target || e.srcElement, form, returnValue = true;
if(t.type && t.type.toLowerCase() === 'submit' && (form = t.form)){
returnValue = validateForm(form);
}
if(!returnValue){
if(e.preventDefault){e.preventDefault();}
}
e.returnValue = returnValue;
return returnValue;
}
})();
</script>
</head>
<body>
<form action="#" id="form-1">
<div class="sizeselect">
<span style="font-size:11px;">Sizes Available:</span><br />
<select id="menu-1" name="idsize_1">
<option value="0">--Size--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
<form action="#" id="form-2">
<div class="sizeselect">
<span style="font-size:11px;">Sizes Available:</span><br />
<select id="menu-2" name="idsize_2">
<option value="0">--Size--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>
You can have as many of these forms as you like numbered 0 or 1 or whatever to whatever. They don't even need to be in sequence. They can even arrive on the page after it's loaded, though your scenario doesn't seem to require that. There can be other forms on the page with id's that don't follow the id="form-###" convention and/or others that do but that don't have such a select element in them. Those forms (if any) will be unaffected, or could be worked into an alternate validation tailored to them.
One tricky part is the form id as processed by the regular expression highlighted above. I'm assuming:
where ### is a number as the id of each form you want to process. If the id is different, let me know and I will adjust the re for you if need be. But it breaks down like so:
Code:
var re = /^form-(\d+)$/;
The green part is the form's id without the number suffix. The red part is the number suffix. The ^ and $ signify the beginning and end of the id string respectively such that it won't match:
because a comes first, but will match:
where 2001 is 0 or any unsigned integer.
That and perhaps other tweaks to the script might be required if other aspects of the targeted forms deviate too much from the basic structure I've outlined. They can be more complex, but as I say must otherwise follow the naming and iding conventions shown.
If you want more help, let me know the problem as you see it and give me a link to the page so I can see the actual served source of the forms.
Problems Validating Multiple Forms on one page with JS, need wildcard for any number.
Reply With Quote
Originally Posted by richarduie
Bookmarks