Display HTML form, based on selection of Radio Button

javascript html forms radio-button

12,054

Solution 1

Give this a try (works for me) I had to muck with the top margin a bit.

<script type="text/javascript"> 
    function displayForm(c) {
        if (c.value == "1") {

            document.getElementById("ccformContainer").style.visibility = 'visible';
            document.getElementById("paypalformContainer").style.visibility = 'hidden';
        } else if (c.value == "2") {
            document.getElementById("ccformContainer").style.visibility = 'hidden';

            document.getElementById("paypalformContainer").style.visibility = 'visible';
        } else {}
    }

    </script>


    <form>
        <input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Via Credit Card
        <br>
        <input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Via Paypal</form>
    <div style="visibility:hidden; position:relative" id="ccformContainer">
        <form id="ccform">
            <label>Enter your credit card details :</label>
            <br>
            <br>
            <dd>
                <p>Credit Card Name :
                    <input type="text" id="ccname" name="ccname" value="$ccname">
                </p>
                <p>Credit Card Type :
                    <select name="cctype" required>
                        <option value="Visa">Visa</option>
                        <option value="Mastercard">Mastercard</option>
                        <option value="American Express">American Express</option>
                        <option value="Discover">Discover</option>
                        <option value="Diners Club">Diners Club</option>
                        <option value="Maestro">Maestro</option>
                        <option value="Verified By Visa">Verified By Visa</option>
                        <option value="Visa Electron">Visa Electron</option>
                    </select>
                    <p>Credit Card Number :
                        <input type="text" minlength="16" id="ccnumber" name="ccnumber" value="$ccnumber">
                    </p>
                    <p>Credit Expiry Date : Month :
                        <select name="ccexpdatemonth" required>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select> <span>Year : <select name="ccexpdateyear" required>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    </select></span>

                        <p>Credit Card CVC :
                            <input type="text" minlength="3" id="cccvc" name="cccvc" value="$cccvc">
                        </p>
            </dd>
        </form>
    </div>
    <div style="visibility:hidden;position:relative;top:-110px;margin-top:-110px" id="paypalformContainer">
        <form id="paypalform">
            <label>Enter your Paypal Details</label>
            <br>
            <br>
            <dd>Paypal Address :
                <input type="text" id="paypal" name="paypal" value="$paypal">
            </dd>
        </form>
    </div>
    <br>
    <div id="float_right">
        <input type="submit" name="submit3" value="Pay Now">
    </div>

JQUERY METHOD

<html>
<head>
<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('#paypalformContainer').toggle('show');
        jQuery('#ccformContainer').hide();
    }
        if (c.value == "1") {
         jQuery('#ccformContainer').toggle('show');
         jQuery('#paypalformContainer').hide();
    }
};
</script>

</head>
<body>
<form>
    <input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Via Credit Card
    <div style="display:none" id="ccformContainer">
        <form id="ccform"> 
        <label>Enter your credit card details :</label>
        <br>
        <br>
        <dd>
            <p>Credit Card Name :
                <input type="text" id="ccname" name="ccname" value="$ccname">
            </p>
            <p>Credit Card Type :
                <select name="cctype" required>
                    <option value="Visa">Visa</option>
                    <option value="Mastercard">Mastercard</option>
                    <option value="American Express">American Express</option>
                    <option value="Discover">Discover</option>
                    <option value="Diners Club">Diners Club</option>
                    <option value="Maestro">Maestro</option>
                    <option value="Verified By Visa">Verified By Visa</option>
                    <option value="Visa Electron">Visa Electron</option>
                </select>
                <p>Credit Card Number :
                    <input type="text" minlength="16" id="ccnumber" name="ccnumber" value="$ccnumber">
                </p>
                <p>Credit Expiry Date : Month :
                    <select name="ccexpdatemonth" required>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select> <span>Year : <select name="ccexpdateyear" required>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                </select></span>

                    <p>Credit Card CVC :
                        <input type="text" minlength="3" id="cccvc" name="cccvc" value="$cccvc">
                    </p>
        </dd>
        <form>
    </div>
    <br>
    <input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Via Paypal
    <div style="display:none" id="paypalformContainer">
        <form id="paypalform">
        <label>Enter your Paypal Details</label>
        <br>
        <br>
        <dd>Paypal Address :
            <input type="text" id="paypal" name="paypal" value="$paypal">
        </dd>
        </form>
    </div>

    <div id="float_right">
        <input type="submit" name="submit3" value="Pay Now">
    </div>
</form>

</body>
<html>

Solution 2

The reason the second form is display way down below is because you're using visibility:hidden. This hides the element, but it still takes up the place it used to when it was visible.
Try display:none and display:inline instead, that seems to work.

12,054

Author by

newuserphp

Updated on June 11, 2022

Comments

newuserphp almost 2 years

I am trying to arrange my radio buttons, so that they will display separate forms, based on which button is selected

I already got it working.

The problem is : the forms are displayed "one after another".

Meaning : instead of the second form displaying in place of the first, it is displayed WAY DOWN BELOW )))))))))

Here is the arrangement of my form-code :

   <article>
    <fieldset>
    <h2 style="color:black; text-align:center; font:verdana; font-  
     size:100%"><b><u>Pay Now</u></b></h2>
        <br>
        <br>
        <p>Please select a method of payment below :</p>
        <br>
        <form>
         <label><input value="1" type="radio" name="formselector" 
    onclick="displayForm(this)">Via Credit Card</label>
            <br> 
            <label><input value="2" type="radio" name="formselector" 
       onclick="displayForm(this)">Via Paypal</label>   
        </form>

        <form style="visibility:hidden" id="ccform"><label>Enter your credit 
      card details :</label>
            <br>
            <br>
        <dd><p>Credit Card Name : <input type="text" id="ccname" 
       name="ccname" value="$ccname"></p>
                <p>Credit Card Type : <select name="cctype" required>
                <option value="Visa">Visa</option>
                <option value="Mastercard">Mastercard</option>
                <option value="American Express">American Express</option>
                <option value="Discover">Discover</option>
                <option value="Diners Club">Diners Club</option>
                <option value="Maestro">Maestro</option>
                <option value="Verified By Visa">Verified By Visa</option>
                <option value="Visa Electron">Visa Electron</option>
                </select>

       <p>Credit Card Number : <input type="text" minlength="16" 
      id="ccnumber" name="ccnumber" value="$ccnumber"></p>
                <p>Credit Expiry Date : Month : <select 
          name="ccexpdatemonth" required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                </select>
                <span>Year : <select name="ccexpdateyear" required>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                </select></span>
        <p>Credit Card CVC : <input type="text" minlength="3" id="cccvc" 
       name="cccvc" value="$cccvc"></p>
            </dd>   
            </form>
            <form style="visibility:hidden" id="paypalform"><label>Enter 
        your Paypal Details</label>
            <br>
            <br>
            <dd>Paypal Address : <input type="text" id="paypal" 
       name="paypal" value="$paypal"></dd>
            </form> 

                    <br>
        <div id="float_right">
        <input type="submit" name="submit3" value="Pay Now">
        </div>
    </fieldset>
    </article>

Actually, my ideal solution would be to have each form displayed directly beneath its own radio-button.

How can I re-arrange my code, to make this happen?

Thanks

My JS function :

  <script type="text/javascript"> 
        function displayForm(c){ 
            if(c.value == "1"){ 

     document.getElementById("ccform").style.visibility='visible'; 
     document.getElementById("paypalform").style.visibility='hidden'; 
            } 
            else if(c.value =="2"){ 
                document.getElementById("ccform").style.visibility='hidden'; 

      document.getElementById("paypalform").style.visibility='visible'; 
            } 
            else{ 
            } 
         }         
    </script>

newuserphp about 9 years

Er..............I'm confused. Your form is exactly the same as mine. I followed the instructions you sent me in your first response. You didn't change anything. If this worked for you, then how come it's not working for me?
newuserphp about 9 years

I finally saw what you changed : you removed the <label> tags from the initial <form>. I tested your code, and it worked (((( But, when I copy-pasted your code into my form, it does not work. Obviously, something is wrong with my side of things
newuserphp about 9 years

Oh, I got it working now. THANKS )))) Unfortunately, I am not allowed to "vote", as I am a new user.
newuserphp about 9 years

I don't suppose you can give me tips on how to place EACH form under its own radio button? What I mean is : the form for "Credit Card" will display under the radio button for Credit-Card.
newuserphp about 9 years

THANKS, Christian. It worked like a charm. ))))) I don't suppose you can give me tips on how to place EACH form under its own radio button? What I mean is : the form for "Credit Card" will display under the radio button for Credit-Card.
exceptional exception about 9 years

BTW, if this solution works for you, don't forget the click the check mark next to my answer to accept it as the solution.