Vorschauformular zeigt nur eine Variable

Question

Ich habe eine kleine Form. Nachdem der Benutzer seinen Text eingegeben hat, kann er vor dem Senden preview. Für 1 Option Formular Etiketten funktioniert die Vorschau gut. Bei 2 Optionen für Etiketten wird nur die erste angezeigt. Zum Beispiel ... Heading (2 options) Name and Email und Heading (2 options) Gamma. Wenn Sie die zwei Variablen für diese zwei "2 Optionen" Überschriften eingeben, wird nur die erste Variable in der preview angezeigt. Kann man reparieren und wie? Ich sehe die Lösung nicht.

$(document).ready(function() { 
 

 
    $(".add_choice #reset").click(function(event) { 
 
     event.preventDefault(); 
 

 
     var text = '<br>Summary:<br><br>'; 
 
     var alertText = ''; 
 
     var proceed = 1; 
 
     $(".add_choice .input").each(function(index, item) { 
 

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<div class="add_choice" id="add_choice"> 
 
    <div id="internal"> 
 
    <div class="input"> 
 
    <label for="name">HEADING (2 options) Name | Email</label> 
 
    <input autocomplete="on" class='inp_cont' id="contact-name" name="contact name" placeholder="Enter your name" required="" 
 
    type="text" /> 
 
    <input class='inp_cont' id="email" name="email" placeholder="Enter your email" required="" type="text" /></div> 
 

Answer 1

Sie sind nur ein Element nach Klasse Auswahl .input, sollten Sie alle Elemente auswählen.

Gerade für Ihren Test, den ich ein anderes Element anstelle zwei Elemente innerhalb eines .input

$(document).ready(function() { 
 

 
    $(".add_choice #reset").click(function(event) { 
 
     event.preventDefault(); 
 

 
     var text = '<br>Check info:<br><br>'; 
 
     var alertText = ''; 
 
     var proceed = 1; 
 
     $(".add_choice .input").each(function(index, item) { 
 

 
      var elem = $(item).find("input[type='radio']:checked").length ? $(item).find("input[type='radio']:checked") : $(item).find('.inp_cont'); 
 
      if (elem.prop('required') && elem.val() == '') { 
 
       alertText += "Fill " + $(item).find('label').text() + " field" + "\n\r"; 
 
       $(item).css("color", "red"); 
 
       $(elem).on("click", function() { 
 
        $(item).css("color", "inherit"); 
 
       }); 
 
       proceed = 0; 
 
      } else text += "<div id='" + item.id + "i'>" + $(item).find('label').text() + ": </div><br><br><span class='presubm_item'>" + elem.val() + "</span><br><br>"; 
 

 
     }); 
 
     if (!proceed) alert(alertText); 
 
     else { 
 

 
      $(".toc-wrapper a").each(function() { 
 
       var href = $(this).attr("href") + 'i'; 
 
       $(this).attr("href", href); 
 
      }) 
 
      $("#b-popup #popup_info").html(text); 
 
      $(".add_choice #internal").hide(); 
 

 
      $("#b-popup").show(); 
 
      window.scrollTo(0, 0); 
 
      $(document).trigger('scroll'); 
 
      $(document).trigger("preview"); 
 
     } 
 
    }); 
 
    $("#b-popup #popup_back").click(function(event) { 
 

 
     $(".add_choice #internal").show(); 
 
     $("#b-popup").hide(); 
 
     $(".toc-wrapper a").each(function() { 
 
      var href = $(this).attr("href"); 
 
      href = href.substring(0, href.length - 1); 
 

 
      $(this).prop("href", href); 
 
     }) 
 
     window.scrollTo(0, 0); 
 
     $(document).trigger('scroll'); 
 
    }); 
 

 
    $("#b-popup #popup_submit").click(function(event) { 
 

 
     $(".add_choice").submit(); 
 
    }); 
 

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<div class="add_choice" id="add_choice"> 
 
    <div id="internal"> 
 
    <div class="input"> 
 
    <label for="name">HEADING (2 options) Name | Email</label> 
 
    <input autocomplete="on" class='inp_cont' id="contact-name" name="contact name" placeholder="Enter your name" required="" 
 
    type="text" /> 
 
    </div> 
 
    <div class="input"> 
 
    <input class='inp_cont' id="email" name="email" placeholder="Enter your email" required="" type="text" /></div> 
 
    <div class="input"> 
 
    <label for="alpha"> HEADING (1 option) Alpha</label> 
 
    <textarea class='inp_cont' id="alpha" name="alpha" cols="50" rows="10" 
 
    placeholder="Alpha" required=""></textarea></div> 
 
    <div class="input"> 
 
    <label for="beta"> HEADING (1 option) Beta</label> 
 
    <textarea class='inp_cont' id="beta" name="beta" cols="50" rows="10" 
 
    placeholder="Beta" required=""></textarea></div> 
 
    <div class="input"> 
 
    <label for="gamma"> HEADING (2 options) Gamma</label> 
 
    <select class='inp_cont' name="top5" id="gamma"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     <option>5</option> 
 
     <option>6</option> 
 
    </select> 
 
    </div> 
 
    <div class="input"> 
 
    <select class='inp_cont' name="top5" id="delta"> 
 
     <option>a</option> 
 
     <option>b</option> 
 
     <option>c</option> 
 
     <option>d</option> 
 
     <option>e</option> 
 
     <option>f</option> 
 
     <option>g</option> 
 
     <option>h</option> 
 
    </select></div> 
 
    <input id="reset" style="width:150px; padding: 0" type="reset" value="Preview" /> 
 
    <input id="send" style="width:150px; padding: 0" type="submit" value="Submit" /></div> 
 
    <div id="b-popup"> 
 
     <div class="b-popup-content"> 
 
     <div id="popup_info">Text in Popup</div> 
 
     <div class="b-popup-content-buttons"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Sie wirklich brauchen, um Ihren JavaScript-Code zu ändern in andere .input Klasse bin setzen.