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

正如我在评论中所说，您在每个输入周围插入对象包装器，而不是输入本身的值。试试这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

从模态弹出窗口中的父级附加表单变量不起作用

1 个答案: