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>
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>
- wrap each form in a div, and toggle the visibility of the div instead. then use in-line style positioning <div style="visibility:hidden; position:relative" id="ccformContainer"><form id="ccform">form feilds here</form></div><div style="visibility:hidden;postion:relative;top:-300px" id="paypalformcontainer"><form style="visibility:hidden" id="paypalform">form stuff here</form></div> – exceptional exception Commented Feb 24, 2015 at 12:53
- Hi, user3479671. Thanks for your response. I did everything as you said, but I am obviously doing something wrong, because the situation has not changed. Should I be "calling" or "referencing" those container-names somewhere? Perhaps, in the JavaScript function itself? (I edited my post, to include my JS function. I assume that is where I should toggle the div-containers? ) – newuserphp Commented Feb 24, 2015 at 13:09
- UPDATE : I replaced the form-ID with the container-ID in the javascript function. It did not help. Still getting the same result (((((((( – newuserphp Commented Feb 24, 2015 at 13:14
- what exactly is happening? is it toggling visibility correctly? you may want to try absolute positioning and play with the top and left parameters – exceptional exception Commented Feb 24, 2015 at 13:24
- As I mentioned in my post, what is happening is : the forms are being displayed one below the other............instead of in place of each other. The second for, for Paypal, is being shifted down to the very bottom of the page – newuserphp Commented Feb 24, 2015 at 13:53
2 Answers
Reset to default 3Give 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./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>
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.