Change radio button dynamically -- two javascripts on same page

[SuziQ]

Okay

Sorry if this is an easy one folks, but I haven't been able to find code for this anywhere, and I've spent way too much time on this already...

I have two sets of radio buttons in my form defined as
membershiptype
funds

Is there any way that I can set up the form so that if
membershiptype = "$37.45 Membership Canada" is selected
then the funds button adjusts itself to "$CDN"

Alternately, if
membershiptype = "$35 Membership US" is selected
then the funds selection appears as "$US"

Any help would be greatly appreciated. Thanks.

[mikegram]

I hope I understood you. Is this what you mean?

<!-- place in HEAD -->
<script language="JavaScript" type="text/javascript">
function autoSelect(memberType, fundsType)
{
if(memberType.value=="Canada")
fundsType[0].checked=true;
else
fundsType[1].checked=true;
}
</script>

<!-- place in BODY -->
<form action="YourActionHere" method="post" name="myForm" id="myForm">
<input type="radio" name="membershiptype" value="Canada" checked onClick="autoSelect(this,document.myForm.funds)">$37.45 Membership Canada
<input type="radio" name="membershiptype" value="US" onClick="autoSelect(this,document.myForm.funds)">$35 Membership US<br>
<input type="radio" name="funds" value="$CDN" checked>$CDN
<input type="radio" name="funds" value="$US">$US<br>
<input type="submit" value="Submit">
</form>

[SuziQ]

Thanks, it's exactly what I wanted it to do.

However, when I try it in my form it conflicts with an existing script I borrowed to do addition in my form. I have no idea how to combine the two on-click functions... to be honest I don't even know if it's possible.

[edited by: tedster at 1:38 am (utc) on Nov. 18, 2003]

[mikegram]

There may in fact be a logical conflict with the other script. I can't say. But if you simply want to call two functions in succession from an onClick event, it would look something like.

<input type="radio" name="membershiptype" value="Canada" checked onClick="autoSelect(this,document.myForm.funds);yourAddFunction(param1, param2);">

[SuziQ]

No real conflict, as a beginner I just don't have a real grasp of the finer points of javascript (like I said, I did't know it was possible).

I've added it into the script and it works perfectly!
Thank you!

While I have you here, the script I'm using to total.form clears my radio buttons when the form inits. Do you know of a good script for validating radio buttons?

I'm validating all my text fields using a verify function where each field is prompted by:

if (document.ThisForm.toname.value=="") {
themessage = themessage + " ~ Recipient's Name";
}

but it doesn't seem to work for the radio button values.

Any advice?

[mikegram]

function formValidSubmit(memberType, fundsType)
{
if(!memberType[0].checked &&!memberType[1].checked)
{
if(!fundsType[0].checked &&!fundsType[1].checked)
alert("Please select a membership and funds type");
else
alert("Please select a membership type");
}

if(fundsType[0].checked ¦¦ fundsType[1].checked && memberType[0].checked ¦¦ memberType[1].checked )
{document.myForm.submit();}
}

...
<input type="button" value="Submit" onClick="formValidSubmit(document.myForm.membershiptype, document.myForm.funds)">
...

Change the Submit button to type="button". If a selection has been made for both radio fields then the form submits; otherwise, the user gets an alert.

I don't know if your other validation script is triggered in the same way. If so just paste the code inside this function into your other function and add the arguments to the function call and their corresponding parameters into the function declaration.

While this works fine for a bank of radio buttons with a few options, it might be a little impractical for a bank with ten or more. I'm sure there's a more efficient way to do this. Would love to see it if someone knows how.

[SuziQ]

Actually, my form controls are
<FORM NAME="ThisForm" METHOD=POST ACTION="form.php" onSubmit="return verify ();">

and my submit is
<input type="submit" value="Submit" name="B1">

Know of a way to build the radio button validate directly into the verify function?

[mikegram]

In general, you would just use the nested IFs at the beginning my formValidSubmit() in your validate function.

Pass it the radio button objects in the function call:
return verify(document.myForm.membershiptype, document.myForm.funds);

Also, set up those same parameters in the function declaration of my script in your validate script:
function verify(memberType, fundsType)

There's a little more to it than that, but I really need to see your script to help.

[SuziQ]

Hey Mike,

I've been working on this for about the last week or so, trying variations on the code to resolve the issue, but I can't figure it out. I tried entering the functions into the code as per your last message and it works fine, so long as I only have one button being verified.

As soon as I try to enter any of the other 3 buttons to be verified (funds, optout, calendar) into the code I get an error "0 is null or not an object" and the form is allowed to submit blank.

I'll send you a sticky note with the verify code I'm using, since it's a little long to enter here. Thanks again!

Sue