Wie kann die Kontrolle von einem Formular in einer Registerkarte auf eine andere Registerkarte in einem Registerkartenfeld übertragen werden?

Question

Ich habe Registerkarte. Ich habe ein Formular in der ersten Registerkarte in der Registerkarte. Ich möchte alle Inhalte im Formular in der ersten Registerkarte füllen, und das Steuerelement sollte auf die zweite Registerkarte gehen. Ich mache es in jQuery.

Dies ist die Registerkarte Struktur:

 <div class="wizard-inner"> 
      <ul class="nav nav-tabs" role="tablist"> 

       <li role="presentation" class="active"> 
        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">Customer 
        </a> 
       </li> 

       <li role="presentation" class="disabled"> 
        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"> Person 
        </a> 
       </li> 
       <li role="presentation" class="disabled"> 
        <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3"> Equipment 
        </a> 
       </li> 
       <li role="presentation" class="disabled"> 
        <a href="#step4" data-toggle="tab" aria-controls="step4" role="tab" title="Step 4"> Address 
        </a> 
       </li> 
       <li role="presentation" class="disabled"> 
        <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> Cart 
        </a> 
       </li> 
      </ul> 
     </div> 

Form in der ersten Registerkarte:

<form name="customer" id="customer" method="post" action="#step2"> 
           <div class="form-inline"> 
           <div class="pad col-md-6"> 
           <div class="form-group col-md-12"> 
            <label for="exampleInputEmail1">First Name</label> 
            <input type="text" class="form-control" id="exampleInputEmail1" name="fname" placeholder="First Name" required> 
           </div> 
           <div class="form-group col-md-12"> 
            <label for="exampleInputEmail1">Last Name</label> 
            <input type="text" class="form-control" id="exampleInputEmail1" name="lname" placeholder="Last Name" required> 
           </div> 
           <div class="form-group col-md-12 padd"> 
            <label for="exampleInputEmail1">Gender</label> 
            <select name="gender" id="gender" class="dropselectsec1" required> 
                <option value="">Select Gender</option> 
                <option value="male">Male</option> 
                <option value="female">Female</option> 
               </select> 
           </div> 
           <div class="form-group col-md-12 padd"> 
            <label for="exampleInputEmail1">Skill level</label> 
            <select name="visa_status" id="g" class="r" required> 
                <option value="">Select Skill level</option> 
                <option value="df">cv</option> 
                <option value="df">xc</option> 
                <option value="df">df</option> 
               </select> 
           </div> 

           <div class="form-group col-md-12 inc"> 

           </div> 


           </div> 
           <div class="pad col-md-6"> 
            <div class="form-group col-md-12 padd"> 
            <label for="exampleInputEmail1">fg</label> 
            <input type="text" class="form-control" name="age" id="exampleInputName" placeholder="Age" required> 
            </div> 
            <div class="form-group col-md-12 padd"> 
            <label for="exampleInputEmail1">fgf</label> 
            <input type="text" class="form-control" name="height" id="exampleInputName" placeholder="Height * (cm)" required> 
            </div> 
            <div class="form-group col-md-12 padd"> 
            <label for="exampleInputEmail1">fgfg</label> 
            <input type="text" class="form-control" name="weight" id="exampleInputName" placeholder="Weight * (kg)" required> 
            </div> 
            <div class="form-group col-md-12 padd"> 
            <label for="exampleInputEmail1">ffg</label> 
            <input type="text" class="form-control" name="shoesize" id="exampleInputName" placeholder="Shoe size *" required> 
            </div> 
           </div> 

           <input type="submit" name="save" class="btn btn-primary next-step" value="Continue"/> 

          </form> 

Nachdem alle Details im Formular ausfüllen, möchte ich die Kontrolle auf die zweite Registerkarte geben. Wie man es in jquery gibt? Kann mir jemand dabei helfen?

Answer 1

Anruf unter Funktion in Schaltfläche klicken

function ValidData() 
{ 
    var $myForm = $('#customer');   
    if ($myForm[0].checkValidity()) {    
     //Activate next tab code goes here 
    } 
    return false; 
} 

Answer 2

Nachdem Sie das Formular in jedem Schritt einreichen, um die Seite laden und eine Variable in Javascript, setzen Sie den aktuellen Schritt anzuzeigen. Dann benutzen Sie das, um die richtige Registerkarte zu setzen, alle Registerkarten zu deaktivieren und dann die richtige zu aktivieren.

So etwas wie folgt aus:

<?php 
// logic to determine current step... 
$step = 'step1'; // or 'step2', 'step3', etc 
?> 

<script> 
$(function() { 
    var current_step = <?php echo $step; ?>; 
    // reset all li elements under any div that has a "wizard-inner" class 
    $('div.wizard-inner li').removeClass('active').addClass('disabled'); 

    // set the correct tab as active. you'd have to add an this id to the appropriate DOM element 
    $('#step1-tab').addClass('active'); 
}) 
</script> 

<?php 
// more php code 
?> 

Es ist ein wenig unklar, wie Ihre aktuelle Seite zusammengesetzt ist, da Sie nicht alle Ihre Code geschrieben haben, aber das ist der Kern einer Lösung. Wahrscheinlich möchten Sie bestimmten DOM-Elementen IDs, Namen, Datenattribute usw. hinzufügen, um sie mit Javascript leichter identifizieren und mit ihnen interagieren zu können.