【发布时间】：2015-04-26 02:21:20
【问题描述】：
我正在尝试排列我的单选按钮，以便它们根据选择的按钮显示单独的表单
我已经开始工作了。
问题是：表单“一个接一个”显示。
含义：不是显示第二种形式代替第一种形式，而是显示 WAY DOWN BELOW ))))))))))
这是我的表单代码的排列：
<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>
【问题讨论】：
-
将每个表单包装在一个 div 中，并改为切换 div 的可见性。然后使用行内样式定位
-
嗨，user3479671。感谢您的答复。我按照你说的做了一切，但我显然做错了什么，因为情况没有改变。我应该在某处“调用”或“引用”这些容器名称吗？也许，在 JavaScript 函数本身？ （我编辑了我的帖子，以包含我的 JS 函数。我认为那是我应该切换 div 容器的地方？）
-
更新：我用 javascript 函数中的容器 ID 替换了表单 ID。它没有帮助。仍然得到相同的结果（（（（（（（（
-
到底发生了什么？是否正确切换可见性？您可能想尝试绝对定位并使用 top 和 left 参数
-
正如我在帖子中提到的，正在发生的事情是：表格显示在另一个下方............而不是彼此代替。第二个，对于 Paypal，被移到页面的最底部
标签： javascript html forms radio-button