单选按钮 onclick 以更新表单答案

【问题标题】：Radio button onclick to update form单选按钮 onclick 以更新表单
【发布时间】：2019-02-27 13:20:12
【问题描述】：

当信用卡单选按钮被选中时，我希望表单显示用户输入的名字、姓氏、地址、城市、州、邮编、电子邮件、持卡人姓名、卡号、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';


 }

【问题讨论】：

您的代码似乎包含太多错误。
我收到这个错误 Uncaught ReferenceError: updateForm is not defined at HTMLInputElement.onclick

标签： javascript html

【解决方案1】：

您的 JavaScript 缺少右括号，并且您的 HTML 缺少样式双引号的结尾（最后两个 div）。你可以看到直接在 Chrome 中加载你的脚本，如果你打开 DevTools（f12 或右键单击 + 'inspect'），控制台中会出现错误。

以下是缺少内容的代码：

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

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

<!DOCTYPE html>
<html>

<head>
</head>

<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" id="creditCard" value="credit card" checked="checked" onclick="updateForm(this);"><span class="radio"></span>
            Credit Card
        </label>

        <label class="containerRadio"><input name="paymentType" type="radio" id="paypal" onclick="updateForm(this);" value="paypal"><span class="radio"></span>
            PayPal
        </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>
<script>
    function updateForm(control) {
        if (control.id == "paypal") {
            document.getElementById("ccformContainer").style.visibility =
                'hidden';
            document.getElementById("paypalformContainer").style.visibility =
                'visible';
        } else {
            document.getElementById("paypalformContainer").style.visibility =
                'hidden';
            document.getElementById("ccformContainer").style.visibility =
                'visible';
        }
    }
</script>

</html>

【讨论】：