如何根据单选按钮选择重定向表单

Question

我有一个注册表单，用于检查他/她是否是我们的客户。如果用户选择yes，则会显示两个字段（客户编号和邮政编码）。但是，如果用户选择 no，我希望表单只发送并转到下一页。

由于它现在可以正常工作，当用户选择 no 时，尝试提交时表单会出错，因为客户编号 + 和邮政编码留空。

在单选按钮选择上重定向表单的最佳方法是什么？或者如果用户选择否，是否可以预先填写客户编号 + zipcdoe 字段？有没有可行的方法来重定向这个？

我的单选按钮代码：

Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck" onChange="OnChangeForm" value="epc">

JSFiddle: https://jsfiddle.net/7ycha0ge/

Answer 1

你的情况不是很具体，但我相信有 3 种可能性：

1. 是您正在验证 javascript 中字段的填充，而没有考虑到您的输入是隐藏的，在这种情况下，您应该重新访问您的代码，并且只有在字段可见或添加/删除时才抛出错误根据收音机的选择，完全来自 HTML 的字段。

2. 您的服务器端代码总是期望参数来填充您的未填充数据，并且它会引发错误。

3. 考虑使用这样的表单（带有 novalidate 属性）：

这样你就不会紧张浏览器验证，但你必须自己验证

编辑：附加的添加和删除元素的实时示例

function yesnoCheck(resp) {

var yes = '<div class="form-group">'+
        '<label for="account" class="col-sm-3 control-label">Account Number</label>'+
        '<div class="col-sm-9">'+
            '<input type="text" class="form-control" id="account" name="account" placeholder="Enter Account Number">'+
        '</div>'+
    '</div>'+
    
    '<div class="form-group">'+
        '<label for="lastname" class="col-sm-3 control-label">Zip Code</label>'+
        '<div class="col-sm-9">'+
            '<input type="text" class="form-control" id="zip" name="zip" placeholder="Enter Zip Code">'+
        '</div>'+
    '</div>';
    
   if(resp == 'yes') {
      $('#ifYes').append(yes);
   } else {
      $('#ifYes').html('');
   }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="section section-breadcrumbs">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h1>Register</h1>
					</div>
				</div>
			</div>
		</div>
        
<div class="section">
  <div class="container">
      <div class="row">
					<div class="col-sm-8 col-sm-offset-2">
              <div class="panel panel-default">
                <div class="panel-body">
                  <h2>Online Training Access</h2>
                  <p><em>We need to verify if you are a retailer first. Please enter your account number without spaces or dashes, or select 'no' if you are a consumer.</em></p><br>
                  
                  
<form class="form-horizontal" role="form" id="my-account-form" method="post"  action="">
    <div class="col-sm-offset-3"></div>

<div class="form-group">
    <label for="lastname" class="col-sm-3 control-label">Are you a retailer?</label>
        <div class="col-sm-9">
         Yes <input type="radio" onclick="javascript:yesnoCheck('yes');" name="yesno" id="yesCheck"> 
         No <input type="radio" onclick="javascript:yesnoCheck('no');" name="yesno" id="noCheck">
        </div>
</div>

<!-- the contents will only be added if yes -->
<div id="ifYes">
</div>

</form>
</div>
</div>
</div>
</div>
</div>