Jquery - Am nächsten Wert und ersetzen Sie das div

Question

Ich habe mehrere Formulare, wo einmal ein Benutzer das Formular ausgefüllt hat, klicken Sie auf "Weiter", die dann auf ein anderes Teil bewegt. Eine Überschrift am oberen Rand der Seite wird angezeigt Das vorherige Formular wurde ausgefüllt.

Wenn die Überschrift oben angeklickt wird, wird das betreffende Formular wieder geöffnet, damit die Person es bearbeiten kann. Wenn zum Beispiel "FORM 1" abgeschlossen wurde und sie sich auf "FORM 4" befinden und in "FORM 1" feststellen, dass sie einen Fehler gemacht haben, können sie darauf klicken und erweitern.

Ich möchte in der Lage sein, wenn ein Benutzer auf eine bestimmte Formularüberschrift klickt, dann im Grunde verbirgt das Formular, auf dem sie sind, erweitert das Formular, das sie wieder besuchen möchten und fügt einen "Schritt" hinzu, der von gegeben wird ID des Formulars, auf dem sie sich noch befinden

Ich habe den folgenden Code verwendet:

$(document).ready(function() { 
 
    $('.continue').click(function() { 
 
    var theID = $(this).attr('next-value'); 
 
    if (theID == 2) { 
 
     $("#form-1").slideUp().addClass('hidden-form'); 
 
     $("#initialFormHeading").show(); 
 
     $("#form-2").show(); 
 
    } 
 
    }); 
 

 
    $('.form-heading').click(function() { 
 
    var theForm = $(this).attr('id'); 
 
    if (theForm == "initialFormHeading") { 
 
     $("#form-1").show(); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post"> 
 
    <div class="form-heading" id="initialFormHeading" style="display:none"> 
 
    <h2> 
 
     FORM 1 HEADING 
 
     </h2> 
 
    </div> 
 
    <div id="form-1"> 
 
    <input type="text" name="name" value="" placeholder="NAME" /> 
 
    <br /> 
 
    <input type="email" name="email" value="" placeholder="EMAIL" /> 
 
    <br /> 
 
    <a class="btn continue" current-value="1" next-value="2">CONTINUE</a> 
 
    </div> 
 

 
    <div id="form-2" style="display:none;"> 
 
    <div class="form-heading" id="secondForm" style="display:none;"> 
 
     <h2> 
 
      FORM 2 
 
     </h2> 
 
    </div> 
 
    <input type="text" name="name" value="" placeholder="PHONE NUMBER" /> 
 
    <br /> 
 
    <input type="email" name="email" value="" placeholder="PO BOX" /> 
 
    <a class="btn continue" current-value="2" next-value="3">CONTINUE</a> 
 
    </div> 
 
</form>

Derzeit beide Formen zeigen. Ich habe versucht:

Auf der continue Taste für jede der divs, die die Formelemente enthält, gibt es eine current-value und next-value Ich war so dem Ziel, dass, wenn ein Benutzer auf dem Formular Überschrift klickt, findet die nächste „fortsetzen "nimmt den aktuellen Wert und dann kann ich die Form so verstecken.

Dies funktioniert jedoch nicht und zeigt undefined. Ich bin auch offen für andere Möglichkeiten, wie dies getan werden kann.

Answer 1

Legen Sie eine Klasse auf alle Formular divs. Innerhalb Ihrer form-heading klicken Sie auf Funktion, alle Formulare mit dieser Klasse ausblenden. Verwenden Sie dann in der nächsten Zeile Ihre Logik, um das Formular anzuzeigen, auf das geklickt wurde.

Ich habe die gemeinsame Klasse formDiv, um alle Ihre Form divs und hinzugefügt, um die einfache Linie $(".formDiv").not(this).hide(); in Ihre .click Funktion hinzugefügt, um das Verhalten, das ich oben vorgeschlagen zu replizieren.

$(document).ready(function() { 
 
    $('.continue').click(function() { 
 
     var theID = $(this).attr('next-value'); 
 
     if (theID == 2) { 
 
      $("#form-1").slideUp().addClass('hidden-form'); 
 
      $("#initialFormHeading").show(); 
 
      $("#form-2").show(); 
 
     } 
 
    }); 
 

 
    $('.form-heading').click(function() { 
 
     $(".formDiv").not(this).hide(); 
 
     var theForm = $(this).attr('id'); 
 
     if (theForm == "initialFormHeading") { 
 
      $("#form-1").show(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post"> 
 
    <div class="form-heading" id="initialFormHeading" style="display:none"> 
 
    <h2> 
 
     FORM 1 HEADING 
 
     </h2> 
 
    </div> 
 
    <div id="form-1" class="formDiv"> 
 
    <input type="text" name="name" value="" placeholder="NAME" /> 
 
    <br /> 
 
    <input type="email" name="email" value="" placeholder="EMAIL" /> 
 
    <br /> 
 
    <a class="btn continue" current-value="1" next-value="2">CONTINUE</a> 
 
    </div> 
 

 
    <div id="form-2" class="formDiv" style="display:none;"> 
 
    <div class="form-heading" id="secondForm" style="display:none;"> 
 
     <h2> 
 
      FORM 2 
 
     </h2> 
 
    </div> 
 
    <input type="text" name="name" value="" placeholder="PHONE NUMBER" /> 
 
    <br /> 
 
    <input type="email" name="email" value="" placeholder="PO BOX" /> 
 
    <a class="btn continue" current-value="2" next-value="3">CONTINUE</a> 
 
    </div> 
 
</form>

Answer 2

Sie können dies ändern:

var x = $(this).next().find('.continue').attr('current-value'); 

Um dies: (wenn Sie das div klicken möchten, dass h2 enthält)

var x = $(this).parent().find('.continue').attr('current-value'); 

Answer 3

$(function() { 
 
    window.steps = parseInt($('fieldset').length); 
 
    $('fieldset').hide(); 
 
    $($('fieldset')[step - 1]).show(); 
 

 
    $('[data-step=prev]').click(function() { 
 

 
    if (window.step > 1) { 
 
     window.step--; 
 
     $('fieldset').hide(); 
 
     $($('fieldset')[window.step - 1]).show(); 
 
    } 
 
    if (window.step == 1) { 
 
     $(this).prop('disabled', true) 
 
    } else { 
 
     $(this).removeAttr('disabled'); 
 
    } 
 
    if (window.step == window.steps) { 
 
     $('[data-step=next]').text('Submit') 
 
    } else { 
 
     $('[data-step=next]').text('Next'); 
 
    } 
 
    }); 
 

 
    $('[data-step=next]').click(function() { 
 

 
    if (window.step < window.steps) { 
 
     window.step++; 
 
     $('fieldset').hide(); 
 
     $($('fieldset')[window.step - 1]).show(); 
 
    } 
 
    if (window.step == 1) { 
 
     $('[data-step=prev]').prop('disabled', true) 
 
    } else { 
 
     $('[data-step=prev]').removeAttr('disabled'); 
 
    } 
 
    if (window.step == window.steps) { 
 
     $(this).text('Submit') 
 
    } else { 
 
     $(this).text('Next'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset> 
 
    <legend>FORM 1</legend> 
 
    <input type="text" name="name" value="" placeholder="Name" /> 
 
    <input type="email" name="email" value="" placeholder="Email" /> 
 
</fieldset> 
 
<fieldset> 
 
    <legend>FORM 2</legend> 
 
    <input type="text" name="pno" value="" placeholder="Phone Number" /> 
 
    <input type="text" name="pbox" value="" placeholder="Post box number" /> 
 
</fieldset> 
 
<fieldset> 
 
    <legend>FORM 3</legend> 
 
    <input type="text" name="city" value="" placeholder="City" /> 
 
    <input type="text" name="state" value="" placeholder="State" /> 
 
</fieldset> 
 
<button data-step="prev" disabled>Previous</button> 
 
<button data-step="next">Next</button> 
 
<script> 
 
    var step = 1; 
 
    var steps; 
 
</script>