Php 帖子未获取由 jquery 附加的 html 输入元素值 [英] Php post not getting the html input element value which append by jquery

查看:23
本文介绍了Php 帖子未获取由 jquery 附加的 html 输入元素值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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;<input type='text' name='price' + n + "'id='price' placeholder='Price in USD'/></p>");n = n + $("#add_drange").length;//c = c + n;//警报(n);如果(n == 25){alert('您只能添加 25 个日期范围');event.preventDefault();$("#btn2").hide();}$(".datepicker").datepicker({日期格式:'yy-mm-dd'}).val();});});

HTML

<br><h1>添加日期范围的价格</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>

<br><input type="button" id="btn2" name="add_more" value="AddMore Data Ranges"/><br><br><br><br><h1>更改一周中每一天的基本价格</h1><br><p>Lorem ipsum dolor sat 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 maurismolestie elit、以及 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;"/></表单>

PHP

////动态创建的文本字段部分$dynamic_field;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 是否存在不正确的嵌套.
具体来说,查看

标签.

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

<表格>

</表单>

您的浏览器会将其更新为类似的内容以使其有效:

<表格></表单>

然后当您向 #add_drange 附加一个新字段时,它实际上是在表单之外.

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

I have page which user can add date range from, to and price. By default there is three, but user can add more ranges using the add date range button button. My problem is, after adding a few extra date ranges when I get the $_POST value it is not showing the appended html element's post values.

javascript part

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

解决方案

Check your HTML for improper nesting.
Specifically, look at the <div id="add_drange"> and <form> tags.

It looks like it's not properly nested... more like this:

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

Your browser will update that to something like this to make it valid:

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

And then when you append a new field to #add_drange, it's actually outside of the form.

To fix it, either append directly to the <form> tag, or move the #add_drange div entirely inside the form.

这篇关于Php 帖子未获取由 jquery 附加的 html 输入元素值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆