如何在一个页面上创建多个“动态添加/删除输入”?

时间:2012-09-27 05:25:16

标签: php jquery dynamic

我正在使用这个脚本和jquery作为动态添加/删除输入字段:

<script>
$(document).ready(function(){

var i = $('input').size() + 1;

$('#add').click(function() {
    $('<div><input type="text" class="field" name="dynamic[]" value="' + i + '" /></div>').fadeIn('slow').appendTo('.inputs');
    i++;
});

$('#remove').click(function() {
if(i > 1) {
    $('.field:last').remove();
    i--;
}
});

$('#reset').click(function() {
while(i > 2) {
    $('.field:last').remove();
    i--;
}
});

});
</script>

我的输入字段代码:

<a href="#" id="add">Add</a> | <a href="#" id="remove">Remove</a> | <a href="#" id="reset">reset</a>
<div class="inputs"><input type="text" name="dynamic[]" class="field" placeholder=""/></div>

所以这个代码一切正常,但我似乎无法弄清楚如何在同一个网页中创建多个工作框。

我尝试在名称字段中添加数字(如dynamic2,dynamic3等),但它对我没有任何作用。

有没有办法创建另一个相同功能的输入框,但是使用不同的指定名称,所以我可以单独将它发布到PHP?

我正在使用这个PHP发布:

<?php
foreach($_POST['dynamic'] as $value) {
echo "$value <br />"; // change this to what you want to do with the data
}
?>

PHP发布工作正常,但我一次只能做一个输入组。我希望能够在同一页面上做多个。

我从这个网页上获得了原始脚本: http://papermashup.com/dynamically-add-form-inputs-and-submit-using-jquery/

请帮忙!

2 个答案:

答案 0 :(得分:1)

这是一个jsFiddle实现,如果对多个块执行相同的操作

您需要做的就是在html中创建多个块(示例中给出了3个块),然后您就可以开始了。

在PHP中,您必须使用

访问它
<?php
    if(isset($_POST)){
        echo '<pre>';print_r($_POST['dynamic1']);echo '</pre>';
        echo '<pre>';print_r($_POST['dynamic2']);echo '</pre>';
        echo '<pre>';print_r($_POST['dynamic3']);echo '</pre>';
    }
?>

答案 1 :(得分:0)

<?php
for($i=0;isset($_POST);$i++)
{
    echo $_POST['group1'][$i];
    echo $_POST['group2'][$i];
}
?>

这样多个帖子