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

Question

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

目前，当用户选择否时，表单在尝试提交时会出错，因为客户编号 + 和邮政编码留空。

在单选按钮选择上重定向表单的最佳方法是什么？或者，如果用户选择“否”，是否可以预先填写客户编号 + 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 中字段的填充，并且没有考虑到您的输入是隐藏的，在这种情况下，您应该重新访问您的代码，并且仅在字段可见或添加/删除时抛出错误根据 radio 的选择，完成 HTML 中的字段。

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

3. 考虑使用这样的表单(带有 novalidate 属性):

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