php post没有得到jquery附加的html输入元素值

Question

我有一个页面，用户可以在其中添加日期范围、日期和价格。默认情况下有三个，但用户可以使用添加日期范围按钮按钮添加更多范围。我的问题是，当我获得 $_POST 值时添加了一些额外的日期范围后，它没有显示附加的 html 元素的帖子值。

javascript部分

var n = 0;
$(document).ready(function () {

    $("#btn2").click(function () {
        $("#add_drange").append(" <p><input type='text' name='from" + n + "' class='datepicker' placeholder='From' />&nbsp;&nbsp;<input type='text' name='to" + n + "' class='datepicker' placeholder='To' />&nbsp;&nbsp;<input type='text'  name='price" + n + "'id='price' placeholder='Price in USD' /></p>");

        n = n + $("#add_drange").length;
        //c = c + n;
        //alert(n);
        if (n == 25) {
            alert('You can only add 25 Date Ranges');
            event.preventDefault();
            $("#btn2").hide();
        }
        $(".datepicker").datepicker({
            dateFormat: 'yy-mm-dd'
        }).val();
    });
});                                           

HTML

<div id="add_drange">
    <br>
    <h1>Add Price for Date Ranges</h1>
    <br>
    <form action="" method="post" name="add_price">
        <p>
            <input type="text" name="from_f_1" class="datepicker" placeholder="From" />&nbsp;&nbsp;
            <input type="text" name="to_f_1" class="datepicker" placeholder="To" />&nbsp;&nbsp;
            <input type="text" name="price_f_1" id="price" placeholder="Price in USD" />
        </p>
        <p>
            <input type="text" name="from_f_2" class="datepicker" placeholder="From" />&nbsp;&nbsp;
            <input type="text" name="to_f_2" class="datepicker" placeholder="To" />&nbsp;&nbsp;
            <input type="text" name="price_f_2" id="price" placeholder="Price in USD" />
        </p>
        <p>
            <input type="text" name="from_f_3" class="datepicker" placeholder="From" />&nbsp;&nbsp;
            <input type="text" name="to_f_3" class="datepicker" placeholder="To" />&nbsp;&nbsp;
            <input type="text" name="price_f_3" id="price" placeholder="Price in USD" />
        </p>
</div>
<br>
<input type="button" id="btn2" name="add_more" value="AddMore Data Ranges" />
<br>
<br>
<br>
<br>
<h1>Alter you Base Price for Each Day of the Week</h1>

<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui.</p>
<br>
<input type="text" id="" name="sunday" placeholder="Sunday" size="8" />&nbsp;&nbsp;
<input type="text" id="" name="monday" placeholder="Monday" size="8" />&nbsp;&nbsp;
<input type="text" id="" name="tuesday" placeholder="Tuesday" size="8" />&nbsp;&nbsp;
<input type="text" id="" name="wednesday" placeholder="Wednesday" size="8" />&nbsp;&nbsp;
<input type="text" name="Thursday" id="" placeholder="Thursday" size="8" />&nbsp;&nbsp;
<input type="text" name="Friday" id="" placeholder="Friday" size="8" />&nbsp;&nbsp;
<input type="text" name="Saturday" id="" placeholder="Saturday" size="8" />
<br>
<br>
<input type="submit" id="save" name="save_all" value="save" style="float: right;" />
</form>

PHP

///dynamic created text feild part
$dynamic_feild;

    for($n=0;$n<25;$n++)
    {

     $dynamic_feild[$n][0]=$_POST['from'."$n"];
     $dynamic_feild[$n][1]=$_POST['to'."$n"];
     $dynamic_feild[$n][2]=$_POST['price'."$n"];

    } 
var_dump($dynamic_feild);

Answer 1

检查您的 HTML 是否存在不正确的嵌套。
具体来说，查看<div id="add_drange"> 和<form> 标签。

看起来它没有正确嵌套......更像这样：

<div id="add_drange">
    <form>
</div>
</form>

您的浏览器会将其更新为以下内容以使其有效：

<div id="add_drange">
    <form>
    </form>
</div>

然后，当您将新字段附加到 #add_drange 时，它实际上在表单之外。

要修复它，要么直接附加到<form> 标记，要么将#add_drange div 完全移动到表单内。

Answer 2

 $("#add_drange form").append(" <p><input type='text' name='from" + n + "' class='datepicker' placeholder='From' />&nbsp;&nbsp;<input type='text' name='to" + n + "' class='datepicker' placeholder='To' />&nbsp;&nbsp;<input type='text'  name='price" + n + "'id='price' placeholder='Price in USD' /></p>");

试试这个追加

Answer 3

我认为不要使用 n = n + $("#add_drange").length;在你的 jquery 中你可以使用

n = parseInt(jQuery('#index').val()) + 1;

保留一个初始值为 4 的隐藏输入框。因为您已经有 3 个范围元素。

<input type="hidden" name="index" id="index" value="4" />

它可用于查找您在 POST 期间使用的元素数量。