Question

当选中信用卡单选按钮时，我希望表单显示用户输入的名字，姓氏，地址，城市，州，邮政编码，电子邮件，持卡人姓名，卡号，cvv2 / cvc，到期日。选中贝宝单选按钮后，我要显示贝宝电子邮件地址和贝宝密码的用户输入。

 <html>
 <head>
   <meta charset-"utf-8">
   <title>Payment Processing Web Page</title>
   <script type= "text/javascript" src = "script.js"></script>
 </head>
 <body>
    <h2>Enter Payment Information</h2>
    <form onSubmit="return validateForm();">

     <label class = "containerRadio"><input name = "paymentType" type = "radio" value = "credit card" checked="checked"><span class = "radio"></span>
    Credit Card
     </label>

     <label class = "containerRadio"><input name = "paymentType" type = "radio" onclick="updateForm(this);" value = "paypal"><span class = "radio"></span>
    PayPal</a>
     </label>

 <div style="visibility:visable id="ccformContainer">
      //inputs for credit card form
 </div>
 <div style="visibility:hidden; id="paypalformContainer">
     //input for paypal form
 </div>

Javascript：

 function updateForm(control){


     if (control.checked) {
        document.getElementById("ccformContainer").style.visibility = 
         'hidden';
        document.getElementById("paypalformContainer").style.visibility = 
         'visible';


 }

Answer 1

这应该有效。因此，基本上我解决了一些错误，并添加了实际的逻辑以在信用卡和Paypal之间切换，反之亦然。

//button[normalize-space()='Vote Now']

Answer 2

您的JavaScript缺少右括号，而HTML缺少样式的双引号结尾（最后两个div）。您可以看到直接在Chrome中加载脚本时，如果打开DevTools（f12或右键单击+“检查”），则控制台中将出现错误。

以下是缺少内容的代码：

function updateForm(control){


    if (control.checked) {
       document.getElementById("ccformContainer").style.visibility = 
        'hidden';
       document.getElementById("paypalformContainer").style.visibility = 
        'visible';
    }

}

<html>
    <head>
      <meta charset-"utf-8">
      <title>Payment Processing Web Page</title>
      <script type= "text/javascript" src = "script.js"></script>
    </head>
    <body>
       <h2>Enter Payment Information</h2>
       <form onSubmit="return validateForm();">
   
        <label class = "containerRadio"><input name = "paymentType" type = "radio" value = "credit card" checked="checked"><span class = "radio"></span>
       Credit Card
        </label>
   
        <label class = "containerRadio"><input name = "paymentType" type = "radio" onclick="updateForm(this);" value = "paypal"><span class = "radio"></span>
       PayPal</a>
        </label>
   
    <div style="visibility:visable" id="ccformContainer">
         //inputs for credit card form
    </div>
    <div style="visibility:hidden;" id="paypalformContainer">
        //input for paypal form
    </div>

但是，您的代码并没有真正满足您的需要，因为当您单击“信用卡”单选按钮时，不会调用函数updateForm（）。如果用户改变主意，就会中断。

也许可以改成这样（可以改进）：

function updateForm(element) {
    if (element.id === "optionPp") {
        document.getElementById("ccformContainer").style.visibility = 'hidden';
        document.getElementById("paypalformContainer").style.visibility = 'visible';
    } else {
        document.getElementById("ccformContainer").style.visibility = 'visible';
        document.getElementById("paypalformContainer").style.visibility = 'hidden';
    }

}

<html>

<head>
    <meta charset-"utf-8">
    <title>Payment Processing Web Page</title>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
    <h2>Enter Payment Information</h2>
    <form onSubmit="return validateForm();">

        <label class="containerRadio"><input id="optionCc" name="paymentType" type="radio" value="credit card" checked="checked"
                onclick="updateForm(this);"><span class="radio"></span>
            Credit Card
        </label>

        <label class="containerRadio"><input id="optionPp" name="paymentType" type="radio" onclick="updateForm(this);"
                value="paypal"><span class="radio"></span>
            PayPal</a>
        </label>

        <div style="visibility:visable" id="ccformContainer">
            //inputs for credit card form
        </div>
        <div style="visibility:hidden;" id="paypalformContainer">
            //input for paypal form
        </div>
    </form>
</body>

</html>

单击单选按钮以更新表单

2 个答案: