根据单选按钮的选择显示 HTML 表单

Question

我正在尝试排列我的单选按钮，以便它们根据选择的按钮显示单独的表单

我已经开始工作了。

问题是：表格显示“一个接一个”。

含义：显示的不是第二种形式而不是第一种形式，而是显示 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>

Answer 1

试一试（对我有用）我不得不稍微调整一下上边距。

<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>

Answer 2

第二个表格显示在下面的原因是因为您正在使用 visibility:hidden。这会隐藏该元素，但它仍会占据原来可见时的位置。
试试 display:none 和 display:inline，seems to work.

根据单选按钮的选择显示 HTML 表单

Display HTML form, based on selection of Radio Button

html

javascript

forms

radio-button