如何以重复形式触发文件输入

时间:2013-01-06 10:06:38

标签: php jquery html

我有一个动态重复形式的div来根据相应的id更改重复div的图像,当点击div图像时我想触发单击div的文件输入。 使用jquery post请求将内容加载到div(image-container)中。

HTML

<div id="image-container"></div>

//repating dynamic form
<?php while($row=mysqli_fetch_assoc($result)):?>

<div class="image">
    <form name="image_change">
        <img src=".." class="image_change"/>
        <input name="image" type="file" />
        <input name="id" type="hidden" />
        <input name="edit" type="submit" />
    </form>
</div>

<?php endwhile;?>

的jQuery

$('#image-container').on('click', 'form[name=image_change] .image_change', function(){
    $(this).find('input[name=image]').trigger('click');
    return false;
});

这仅适用于表单不重复的情况,如何使其与重复表单一起使用。

请参阅并建议任何可行的方法。

感谢。

1 个答案:

答案 0 :(得分:1)

这是因为您有多个具有相同名称的表单,只识别第一个表单。

从表单中删除名称属性:

<div class="image">
    <form>
        <img src=".." class="image_change"/>
        <input name="image" type="file" />
        <input name="id" type="hidden" />
        <input name="edit" type="submit" />
    </form>
</div>

并将js代码修改为以下

$(document).on('click', 'form .image_change', function(){
    $(this).parent().find('input[name=image]').trigger('click');
    return false;
});

如果您需要将表单添加ID与表单区分开来。