JavaScript函数弄乱了我的单选按钮显示

Question

I created a form which contains two Radio Buttons.

Each radio button displays a separate form, when Clicked.

When a button is un-clicked, the form disappears from view (it is not shown)

I also added a second JavaScript Function, which disables the " SUBMIT " button, if none of the radio buttons are clicked.

The program works fine..........except I have the following problems :

(a) For some reason, I am able to click BOTH radio buttons! Radio-buttons should not allow for more than one selection. But, in my form, both radio buttons are clickable

(b) the second JS function is not working; disabling the SUBMIT button is easy. But...........when I click either of the radio buttons, the SUBMIT button does not enable.

Here is the first JS function (for "hiding" the forms under each radio buttons)

      <script        
     src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
     </script>

        <script type='text/javascript'>
        function displayForm(c) {
            if (c.value == "2") {    
                jQuery('#firstformContainer').toggle('show');
                jQuery('#secondformContainer').hide();
            }
                if (c.value == "1") {
                 jQuery('#secondformContainer').toggle('show');
                 jQuery('#firstformContainer').hide();
            }
        };
        </script> 

And the second function, for disabling the SUBMIT button :

 <script type="text/javascript">
        function fCheck() { 
         document.my_form.submit.disabled 
         =!(document.my_form.formselector1.checked ||       
 document.my_form.formselector2.checked); 
         } 
 </script> 

And here is the form :

    <form name="my_form" id="my_form">
            <input value="1" type="radio" name="formselector" 
    id="formselector1" onClick="displayForm(this); fCheck()"></input>Input 
     Firstname
            <div style="display:none" id="firstformContainer">
                <form id="firstform"> 
                            <input type="text" "16" id="firstname" 
      name="firstname" value="$firstname">
                        </form>
            </div>
            <br>
            <br>
            <input value="2" type="radio" name="formselector" 
       id="formselector2" onClick="displayForm(this); fCheck()">
       </input>Input Surname
            <div style="display:none" id="secondformContainer">
                <form id="secondform">
                    <input type="text" id="surname" name="surname" 
        value="$surname">
                </dd>
                </form>
            </div>
          <br>
          <input type="submit" name="submit" value="REGISTER" disabled>
       </form>

What am I missing?

UPDATE

I have solved the RADIO BUTTON problem.

Now, I need to fix the second problem, with the JS function : fCheck ()

It is not working.

I have feeling it's because : I am not calling BOTH functions correctly in the ONCLICK .

   <input value="1" type="radio" name="formselector" id="radio1"   
   onClick="displayForm(this); javascript:fCheck()"></input>

   <input value="2" type="radio" name="formselector" id="radio2" 
   onClick="displayForm(this); javascript:fCheck()"></input>

Answer 1

You cannot nest forms. This makes the second radio button not inside the form and hence it allows you to select both at the same time. Rewrite your html like this

<form name="my_form" id="my_form">
    <input value="1" type="radio" name="formselector" id="formselector1" onClick="displayForm(this); fCheck()"></input>
    <input value="2" type="radio" name="formselector" id="formselector2" onClick="displayForm(this); fCheck()"></input>
    <input type="submit" name="submit" value="REGISTER" disabled>
</form>
Input Firstname
<div style="display:none" id="firstformContainer">
    <form id="firstform"> 
        <input type="text" "16" id="firstname" name="firstname" value="$firstname">
    </form>
</div>
<br>
<br>
Input Surname            
<div style="display:none" id="secondformContainer">
    <form id="secondform">
        <input type="text" id="surname" name="surname" value="$surname">
    </form>
</div>
<br>