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”）。在你的jquery中你可以使用

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

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

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

可以用来查找POST期间使用的元素数量。

Php post没有得到jquery追加的html输入元素值

3 个答案: