Php post没有获取由jquery附加的html输入元素值


Php post not getting the html input element value which append by jquery

我有用户可以添加日期范围从,到和价格的页面。 默认情况下有三个,但用户可以使用添加日期范围按钮按钮添加更多范围。 我的问题是,当我获得$_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);

检查你的 HTML 是否有不正确的嵌套。
具体来说,查看<div id="add_drange"><form>标记。

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

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

您的浏览器会将其更新为如下所示的内容以使其有效:

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

然后当你将一个新字段附加到#add_drange时,它实际上是在表单之外。

要修复它,请直接附加到 <form> 标记,或者将#add_drangediv 完全移动到表单内。

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

尝试这样做进行追加

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

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

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

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

它可用于查找您在开机自检期间使用的元素数量。