Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > for each control in form

Reply
Thread Tools

for each control in form

 
 
Rokinroj
Guest
Posts: n/a
 
      10-10-2007
Hello to all,

I have a form that I validate via javascript and have come across a
bit of a problem with the radio buttons.

In my main ValidateForm method after doing the usual checks for
required fields and formating, I call out to a separate function to
validate that all of the radio button controls have been answered (Yes
or No) since I have not defaulted any of them.
My requirement is to provide the radio name and the selected answer on
FormPost so in order to achieve this it is my understanding that the
radio buttons can not all share the same name.
Also the radio buttons are dynamically switched between visible and
not visible based on drop down selections on the form. This is being
done by setting the dropdowns onchange event to call the function
below.

BTW, this all works great to this point. Just trying to provide all
of the details.

<code>
<select name="interest1"
onchange="setForm1Options(document.form1.interest1 .options[document.form1.interest1.selectedIndex].value);"></
select>
</code>

<code>
function setForm1Options(chosenValue)
{
if(chosenValue == '12')
{

document.getElementById('trTableRow1').style.displ ay='inline';
document.getElementById('trTableRow2').style.displ ay='none';
document.getElementById('trTableRow3').style.displ ay='none';
}
}
</code>

And the relevant html is as folows...

<code>
<table>
<tr id="trTableRow1" style="display:none;">
<td>
<div class="formLabel">*Is this fubar?</div>
<input type="radio" name="IsFubar" value="YES" /> Yes
<input type="radio" name="IsFubar" value="NO" /> No
</td>
</tr>
<tr id="trTableRow2" style="display:none;">
<td>
<div class="formLabel">*Was this fubar?</div>
<input type="radio" name="WasFubar" value="YES" /> Yes
<input type="radio" name="WasFubar" value="NO" /> No
</td>
</tr>
<tr id="trTableRow3" style="display:none;">
<td>
<div class="formLabel">*Will this ever be fubar?</div>
<input type="radio" name="WillBeFubar" value="YES" />
Yes
<input type="radio" name="WillBeFubar" value="NO" /> No
</td>
</tr>
</table>
</code>

The form updates beautifully and instantly. This happens on several
for several different "<tr>" tags and fires on several different
dropdowns. So it always unknown what combination of selections will
have created which combinations of radios.

The problem is that since I don't know what radio buttons will be
visible, and they don't share any common names I gather all of the
elements on the form and check the element type via the javascript
below.

<code>
function checkRadios(form)
{
var _allelements = form.elements;
for(var i = 0 ; i < _allelements.length ; ++i)
{
if(_allelements[i].type == "radio")
{
var radiogroup = _allelements[_allelements[i].name];
var itemchecked = false;
for(var j = 0 ; j < radiogroup.length ; ++j)
{
if(radiogroup[j].checked)
{
itemchecked = true;
break;
}
}
if(!itemchecked)
{
alert("Please make a selection");
if(_allelements[i].focus)
_allelements[i].focus();
return false;
}
}
}
return true;
}
</code>

This also works well, unfortunately it works too well, as it in the
example above this would return and validate against 6 radios,
including the ones that the visitor can't even see.

SO...

Although this is very long and detailed explanation of my problem, the
question (not the solution) is simple. Is there a way that I can
validate against only the visible fields? A javascript solution is
optimal, but at this point if it requires a slight redesign of the
form I can live with that too.

Thanks in advance for your help, and my apologies for the long
rambling post.

Thanks
-R

 
Reply With Quote
 
 
 
 
Rokinroj
Guest
Posts: n/a
 
      10-10-2007
I did come up with a solution.

<code>

var _allelements = form.elements;
for(var i = 0 ; i < _allelements.length ; ++i)
{
if(_allelements[i].type == "radio")
{
var radiogroup = _allelements[_allelements[i].name];
for(var j = 0 ; j < radiogroup.length ; ++j)
{
if (radiogroup[j].parentNode.parentNode.style.display !
= 'none')
{
if(radiogroup[j].checked)
{
break;
}
else
{
alert("Please make a selection");
if(_allelements[i].focus)
_allelements[i].focus();
return false;
}
}
}
}
}
return true;

</code>

Hopefully this can help somebody.

-R

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Transform a 2D color image into 2 images of (R1,G1,B) at each pixelof image 1 and (R2,G2,B) at each pixel of image2 for STEREO visualization 88888 Dihedral C++ 10 12-23-2011 02:28 PM
submit 1 form to 2 servers or 2 forms to 2 server (1 form each) on 1 submit abansal.itp@gmail.com Javascript 3 06-23-2007 07:29 AM
Array#each - getting each element and the index Pat Maddox Ruby 6 01-20-2006 04:04 PM
how do i? Full scan of each control in each grid row cell John Blair ASP .Net 1 08-03-2005 11:02 AM
xsl:for-each for each 3 elements problem Tjerk Wolterink XML 3 11-03-2004 05:22 PM



Advertisments