根据单选按钮的选择显示HTML表单
Display HTML form, based on selection of Radio Button
我正在尝试排列我的单选按钮,以便它们将根据选择的按钮显示单独的表单
我已经开始工作了。
问题是:表单显示为"一个接一个"。
意思是:不是第二个表单显示在第一个表单的位置,而是显示WAY DOWN BELLOW))))
这是我的表单代码安排:
<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>
事实上,我的理想解决方案是让每个表单直接显示在自己的单选按钮下面。
我如何重新安排我的代码,以实现这一点?
感谢
我的JS函数:
<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>
试试看(对我来说很有效)我不得不把上边距搞得一团糟。
<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方法
<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>
第二个表单之所以显示在下面,是因为您使用的是visibility:hidden
。这隐藏了元素,但它仍然占据了以前可见时的位置
尝试display:none
和display:inline
,这似乎有效。
相关文章:
- Brightcove获取/显示HTML中的当前视频标题和描述
- HTML 标记未在 AngularJS ckEditor 中应用,而是在 Ediator 中显示 HTML 元素标记代码
- 使用jqLite隐藏和显示html元素
- 如何在不打断标记的情况下突出显示html字符串中的文本
- JS来显示HTML标记
- 如果javascript打开/关闭,则隐藏和显示html代码
- 用javascript显示html表
- 显示HTML代码块
- Regex有助于突出显示html中匹配文本的角度过滤器
- 为什么WebBrowser控件在保存后不能正确显示HTML
- 如何通过ibmworklight中的sql适配器从db2中检索或显示html页面上的数据?android混合应用程序开发
- 如何使用window.showModalDialog()显示HTML内容
- JavaScript if else 语句来显示 html 标签
- 使用 js 函数显示 HTML 表单的结果
- 如何在不点击的情况下突出显示 HTML 中的文本
- 如何隐藏和显示 html 输入文本和段落
- 使用 javascript 解析和显示 HTML 音频当前时间
- 有什么方法可以在HTML页面中显示HTML代码吗
- 在自动完成jqueryUi中显示html
- 单击并用CTRL+C复制值时高亮显示html表格单元格