Display HTML form, based on Radio Button selection

@newuserphpFeb 24.2015

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 :

[code=html]<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> [/code]

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

P.S. I assume there is no need to write the JavaScript function here, as it’s irrelevant to the question.

to post a comment

JavaScript

3 Comments(s) _↴

@Sup3rkirbyFeb 24.2015 — #It looks like your problem is due to you using the '[B][I]visibility[/I][/B]' CSS property instead of '[B][I]display[/I][/B]'. Setting [B][I]visibility[/I][/B] will simply show or hide an element on a page, but the element is still treated as if it exist, meaning the space it takes up is still reserved. Using [B][I]display[/I][/B] will also show or hide an element, but hidden elements are treated as if they no longer exist, clearing up any space the element would normally take up.

So instead of '[B]visibility: hidden;[/B]' you would be using '[B]display: none;[/B]'. And to show one of your forms you would then use '[B]display: block;[/B]'.

@newuserphpauthorFeb 24.2015 — #It looks like your problem is due to you using the '[B][I]visibility[/I][/B]' CSS property instead of '[B][I]display[/I][/B]'. Setting [B][I]visibility[/I][/B] will simply show or hide an element on a page, but the element is still treated as if it exist, meaning the space it takes up is still reserved. Using [B][I]display[/I][/B] will also show or hide an element, but hidden elements are treated as if they no longer exist, clearing up any space the element would normally take up.

So instead of '[B]visibility: hidden;[/B]' you would be using '[B]display: none;[/B]'. And to show one of your forms you would then use '[B]display: block;[/B]'.[/QUOTE]

Thanks, Suprkirby.

I can replace visibility:hidden with display:none.

But, what about the 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>

[/QUOTE]

Should I replace the "visibility" feature there, also?

@newuserphpauthorFeb 24.2015 — #Yep, it worked. I used "display:none" instead

Thanks ?

I don't suppose you can give me tips on how to place [B]EACH [/B]form under its own radio button?

What I mean is : the form for "Credit Card" will display under the radio button for Credit-Card.

Also in #JavaScript _↴

Generating a url from a form text field JavaScript photo preview code not working in PHP script Help getting body ID into Variable

Success!

Help @newuserphp spread the word by sharing this article on Twitter...

Tweet This

Display HTML form, based on Radio Button selection

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Display HTML form, based on Radio Button selection

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴