Anhängen von Formularvariablen an das übergeordnete Element aus dem modalen Popup funktioniert nicht

Question

Ich habe ein modales Popup mit einem Formular, und ich versuche, die Werte zu erhalten, um eine UL-Liste auf der Seite anzufügen.

Dies ist der HTML:

<div id="breakfast"> 
<p>BREAKFAST</p> 
<p> 
<ul class="breakfastlist"> 
</ul></p> 
<p align="center"><a href="#breakfastPop" rel="modal:open">ADD FOOD</a></p> 
    </div> 

<div id="breakfastPop" class="modal" style="max-width: 680px;"> 
<div id="custom" style="background-color: fff; border: 0;"> 
<p>Select your food for BREAKFAST</p><br> 
<div>FOOD/PREPARATION/PORTION<br> 
<form class="breakfastform"> 
<?php 
include('includes/mealpicker.php'); 
?></div> 
<div style="text-align: center;"># PROTEINS<br> 
<input type="text" name="num_protein" style="width: 45px;"></div> 
<div style="text-align: center;"># CARBS<br> 
<input type="text" name="num_carbs" style="width: 45px;"></div> 
</div> 
    <p align="center"><input type='submit' value="ADD FOOD" /></p> 
</form> 
</div> 

Dies ist die JS:

<script type="text/javascript"> 

$('#breakfastPop form').on('submit', function(){ 
var to_append = $('select') +' - '+ $('input[name=num_protein]') +' - '+  $('input[name=num_carbs]'); 
$('.breakfastlist').append('<li>'+ to_append + '</li>'); 

$(this).parent().hide(); 
return false; 
}); 
</script> 

Jede Hilfe sehr geschätzt wird.

Danke

Answer 1

Wie ich in meinem Kommentar sagen, sind das Einfügen Sie das Objekt-Wrapper um jeden Eingang, anstatt den Wert des Eingangs selbst. Versuchen Sie, diese für einen Start:

$('#breakfastPop form').on('submit', function(evt){ 
 

 
var to_append = $('select option:selected').val() 
 
     +' - '+ $('input[name=num_protein]').val() 
 
     +' - '+  $('input[name=num_carbs]').val(); 
 
$('.breakfastlist').append('<li>'+ to_append + '</li>'); 
 

 

 
$.modal.close(); 
 
return false; 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> 
 

 
<div id="breakfast"> 
 
    <p>BREAKFAST</p> 
 
    <p> 
 
    <ul class="breakfastlist"> 
 
    </ul> 
 
    </p> 
 
    <p align="center"><a href="#breakfastPop" rel="modal:open">ADD FOOD</a></p> 
 
</div> 
 

 
<div id="breakfastPop" class="modal" style="max-width: 680px;"> 
 
    <div id="custom" style="background-color: fff; border: 0;"> 
 
    <p>Select your food for BREAKFAST</p> 
 
    <br> 
 
    <div>FOOD/PREPARATION/PORTION 
 
     <br> 
 
    </div> 
 
     <form class="breakfastform"> 
 
     <select name="food_name"> 
 
     <option value="">-- Select --</option> 
 
     <option value="Apple">Apple</option> 
 
     <option value="Banana">Banana</option> 
 
     <option value="Chocolate">Chocolate</option> 
 
     <option value="Date">Date</option> 
 
     </select> 
 
    <div style="text-align: center;"># PROTEINS 
 
     <br> 
 
     <input type="text" name="num_protein" style="width: 45px;"> 
 
    </div> 
 
    <div style="text-align: center;"># CARBS 
 
     <br> 
 
     <input type="text" name="num_carbs" style="width: 45px;"> 
 
    </div> 
 
    </div> 
 
    <p align="center"> 
 
    <input class="close-modal" type='submit' value="ADD FOOD" /> 
 
    </p> 
 
    </form> 
 
</div>