Google Answers Logo
View Question
 
Q: Validation of a combo of radio button and text field ( Answered 5 out of 5 stars,   0 Comments )
Question  
Subject: Validation of a combo of radio button and text field
Category: Computers > Programming
Asked by: ledelboy-ga
List Price: $10.00		 Posted: 30 Apr 2004 21:12 PDT
Expires: 30 May 2004 21:12 PDT
Question ID: 339237 
At the end of my form I have two radio buttons: Yes and No. When the
user selects NO, will be linked on submit to NO.HTML When the user
selects YES, she will be linked to YES.HTML.
Now comes the hard part:
If she chooses YES she must also fill a Text Field QUANTITY with the
number of units she wants.
What I need is a little piece of javascript that forbids the user to
select NO and input a number in QUANTITY, and that forces her to input
a number in QUANTITY if she chooses yes.
Answer  
Subject: Re: Validation of a combo of radio button and text field
Answered By: mmastrac-ga on 01 May 2004 08:40 PDT
Rated:5 out of 5 stars		  
Hi ledelboy!

The following HTML will accomplish what you are looking for.  It
places an "onClick" handler on the radio buttons to run the
verification routines.  Each verification routine checks for either
the presence or absence of a value in the "quantity" field.

If you require any additional verification checks, let me know.

The following code has been tested in Mozilla Firefox 0.8 and IE 6.0.

--- 8< ---

<html>
<body>
                                                                                
<script>
<!--
function unselectAll()
{
    // Uncheck both YES and NO
    document.getElementById( 'rbYes' ).checked = false;
    document.getElementById( 'rbNo' ).checked = false;
}
            
function verifyYes()
{
    var txtQuantity = document.getElementById( 'txtQuantity' );
                                                                                
    if (txtQuantity.value == null || txtQuantity.value.length == 0)
    {
        alert( "Please enter a value for quantity." );
        unselectAll();
    }
    else
    {
        document.getElementById( 'frmSubmit' ).action = 'yes.html';
        document.getElementById( 'frmSubmit' ).submit();
    }
}
                                                                                
function verifyNo()
{
    var txtQuantity = document.getElementById( 'txtQuantity' );
                                                                                
    if (txtQuantity.value == null || txtQuantity.value.length == 0)
    {
        document.getElementById( 'frmSubmit' ).action = 'no.html';
        document.getElementById( 'frmSubmit' ).submit();
    }
    else
    {
        alert( "Please do not enter a value for quantity." );
        unselectAll();
    }
}
-->
</script>
<form id="frmSubmit" method="GET">
Quantity: <input id="txtQuantity" type="text" name="QUANTITY"> <br>
Yes: <input id="rbYes" onClick="verifyYes()"
     type="radio" name="CHOICE" value="YES"> <br>
No: <input id="rbNo" onClick="verifyNo()"
     type="radio" name="CHOICE" value="NO"> <br>
</form>
                                                                                
<script>
<!--
    // Unselect YES and NO
    unselectAll();
-->
</script>
                                                                                
</body>
</html>
                                                                               
--- 8< ---
Clarification of Answer by mmastrac-ga on 01 May 2004 08:51 PDT 
Hello again, ledelboy-ga.  Please note that the code above will
auto-submit the form on clicking yes or no.

After reading your question again, it appears that you might want the
actual target location of the form to change on submit, rather than
submitting immediately.  I've answered the question with my updated
intepretation here - please let me know if you would like to change
the behaviour.

If you wish to change the target of the form, rather than submitting
immediately, please use the script in this clarification, rather than
the one above.  This script uses a regular button that triggers the
form submission to handle the validation.  The onSubmit handler on the
form catches the case when the uses presses ENTER on the form.

--- 8< ---
<html>
<body>
                                                                                
<script>
<!--
function verify()
{
    if ( document.getElementById( 'rbYes' ).checked )
        verifyYes();
    else if ( document.getElementById( 'rbNo' ).checked )
        verifyNo();
    else
        alert( 'Please choose Yes or No' );
}
                                                                                
function verifyYes()
{
    var txtQuantity = document.getElementById( 'txtQuantity' );
                                                                                
    if (txtQuantity.value == null || txtQuantity.value.length == 0)
    {
        alert( "Please enter a value for quantity." );
    }
    else
    {
        document.getElementById( 'frmSubmit' ).action = 'yes.html';
        document.getElementById( 'frmSubmit' ).submit();
    }
}
                                                                                
function verifyNo()
{
    var txtQuantity = document.getElementById( 'txtQuantity' );
                                                                                
    if (txtQuantity.value == null || txtQuantity.value.length == 0)
    {
        document.getElementById( 'frmSubmit' ).action = 'no.html';
        document.getElementById( 'frmSubmit' ).submit();
    }
    else
    {
        alert( "Please do not enter a value for quantity." );
    }
}
-->
</script>
<form id="frmSubmit" method="POST" onsubmit="verify()">
Quantity: <input id="txtQuantity" type="text" name="QUANTITY"> <br>
Yes: <input id="rbYes" type="radio" name="CHOICE" value="YES"> <br>
No: <input id="rbNo" type="radio" name="CHOICE" value="NO"> <br>
                                                                                
<input type="button" onClick="verify()" name="Submit" value="Submit">
</form>
                                                                                
</body>
</html>
                                                                                
                                                                             
                                                                                


--- 8< ---
ledelboy-ga rated this answer:5 out of 5 stars and gave an additional tip of: $3.00 
Five stars because the Researcher went the extra mile (or foot).
He/she gave me two versions. The second one was right on the money.
Thnx.

Comments  
There are no comments at this time.
Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy