How to redirect a form based on radio button selection

Question

I have a registration form that checks to see if he/she is a customer of ours. If the user selects yes, then two fields are displayed (customer number and zipcode). However, if the user selects no, i want the form to just send and go to the next page.

As it works right now, when the user selects no, the form errors out when trying to submit because the customer number + and zipcode is left blank.

What is the best approach to redirect a form on radio button selection? Or is it possible to pre-fill the customer number + zipcdoe fields if the user selects no? Is there a workable way to redirect this?

My radio button code:

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/

Strife86 Strife86 · Accepted Answer · 2017-06-08T17:37:54

Youre not being very specific with your case, however i belive theres 3 posibilities:

is that you are validating the filling of the fields in javascript and not taking in consideration that your inputs are hidden, in wich case you should revisit your code and only throw error if the field is visible or add/remove completly the fields from the HTML based on the choice of the radio.
Your server side code is always expectng the parameters to have your unfilled data filled and it throws error on that.
Consider use the form like this (with novalidate attribute):

< form novalidate>< /form>

this way youll not be tight to the browser validation, but you have to validate by yourself

EDIT: attached live examples of add and remove elements

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>

How to redirect a form based on radio button selection

1 Answers