Wie ein Formular umleiten basierend auf Optionsfeld Auswahl

Question

Ich habe ein Anmeldeformular, das überprüft, ob er/sie ein Kunde von uns ist. Wenn der Benutzer ja, dann zwei Felder angezeigt (Kundennummer und Postleitzahl). Wenn jedoch der Benutzer keine auswählt, möchte ich das Formular einfach und auf die nächste Seite gehen senden.

Da es im Moment funktioniert, wenn der Benutzer wählt keine, das Formular Fehler beim Versuch zu übermitteln, weil die Kundennummer + und Postleitzahl leer ist.

Was ist der beste Ansatz ein Formular auf Optionsfeld Auswahl zu umleiten? Oder ist es möglich, die Felder Kundennummer + Postleitzahl einzugeben, wenn der Benutzer Nein auswählt? Gibt es eine praktikable Möglichkeit, dies umzuleiten?

Mein 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/

Answer 1

Youre nicht mit Ihrem Fall ist sehr spezifisch, ich glaube aber Theres 3 posibilities:

1. ist, dass Sie das Ausfüllen der Felder in Javascript und bestätigen Nicht berücksichtigen, dass Ihre Eingaben ausgeblendet sind. In diesem Fall sollten Sie Ihren Code erneut aufrufen und nur Fehler ausgeben, wenn das Feld sichtbar ist, oder die Felder aus dem HTML basierend auf der Wahl des Radios vollständig hinzufügen/entfernen.

2. Ihr Server-Side-Code wird expectng immer die Parameter Ihre ungefüllt Daten gefüllt haben, und es wirft Fehler auf, dass.

3. Betrachten Sie das Formular wie folgt aus (mit novalidate Attribut) verwenden:

< Form novalidate> </form>

diese Weise youll nicht an den Browser Validierung dicht sein, aber Sie haben zur Validierung von selbst

EDIT: Angebaut Live-Beispiele für hinzufügen und entfernen von Elementen

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"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-md-12"> 
 
\t \t \t \t \t \t <h1>Register</h1> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
     
 
<div class="section"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
\t \t \t \t \t <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>