Radio button problem with customized form

[lordfinesse]

Hey everyone,

I'm trying to create a specific kind of form for a page I'm doing. Basically, I want this form to have multiple radio buttons, each linking to a different URL, and a submit button that will select one of the radio buttons. Something along the lines of:

I have a form with 2 radio buttons (select radio button 1 or 2) and a "Submit" button.
If the user selects radio button 1, and clicks the "Submit" button, it will go to www.google.ca.
If the user selects radio button 2, and clicks the "Submit" button, it will go to www.yahoo.ca.
(In reality I will have more than 2 buttons)

I found a bit of code that works for this:

<form>
<input type="hidden" name="gotolink" value="#" />
<input type="radio" onClick="this.form.gotolink.value=this.value;" value="page1.html" />P1
<input type="radio" onClick="this.form.gotolink.value=this.value;" value="page2.html" />P2
<input type="button" value="Go!" onclick="document.location=this.form.gotolink.value;" />
<form>
The problem I am having with this code is that instead of a small dot in the radio button indicating its selection (like a normal radio button being selected), I'm getting a faint square around the radio button (it looks like the radio button is kind of hovered over rather than selected). I'm not sure why that is happening.

If anyone could help me with this problem or perhaps enlighten me to a different piece of code that performs the same function, I would greatly appreciate it as there is very little documentation for this specific type of form. Thanks for your time and effort everyone!

[mark87]

Show me your CSS, it's probably where you've styled an input or something.

[cretam]

Hi,
I am trying to do something similar and your code really helped - thanks. I am trying to do a form similar to the login/register that the anz bank uses here. Here is my code so far:
<form id="form1" name="form1" method="post" action="">
<input type="hidden" name="gotolink" value="#" /><br />

<label>
<input type="radio" onClick="this.form.gotolink.value=this.value;" value="https://egate.pir.sa.gov.au/ados/new/ados/registered/UserHome/setDisplay" target="_blank" />

Seeds Online </label><br />
<label>
<input type="radio" onClick="this.form.gotolink.value=this.value;" value="https://egate.pir.sa.gov.au/PPlus/new/internet/Welcome/show" target="_blank" />
Payments Online </label>
<br />

<label>
<input name="btnSubmit" type="button" class="btn_login" value="Login" onclick="document.location=this.form.gotolink.value;" />

</label>
<label>
<input name="btnSubmit" type="button" class="btn_register" value="Register" onclick="document.location=this.form.gotolink.value;" />
</label>

</form>

The problem I have is I have 2 buttons - a Login and a Register.
The login one is working as it should. But I would like users to be able to register for either option if they are not users already. So I would like it if they could select an option (ie. Seeds Online) and click register and it will take them to another url (https://egate.pir.sa.gov.au/ados/new/ados/publicaccess/UserRegistrationRequest/setDisplay) and if they select Payments online and click Register it will take them to this url https://egate.pir.sa.gov.au/PPlus/page/regform.pdf
Any help would be greatly appreciated.