モーダルポップアップから親にフォーム変数を追加すると動作しない

Question

私はフォームでモーダルポップアップを持っています。私はサブミット時に値を取得してページにulリストを追加しようとしています。

これは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> 

これは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> 

すべてのヘルプは高く評価されます。

は、私は私のコメントで言うように、あなたではなく、入力そ​​のものの価値よりも、各入力の周りにオブジェクトラッパーを挿入しているあなたに

Answer 1

ありがとうございます。スタートのためにこれを試してみてください：

$('#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>