Question

我有一个有趣的问题。我为跑步者建立了一个表格来报名参加比赛。该表单允许用户添加多个跑步者并一次签名。使用jQuery编程额外的运行程序功能。

这是增加额外跑步者的jQuery ......

<script type="text/javascript">
var current= 1;
$(document).ready(function() {
    $("#addrunner").click(function() {
        current++;
        $newrunner= $("#runnerTemplate").clone(true).removeAttr("id").prop("id", "fieldSet" + current).insertBefore("#runnerTemplate");
        $newrunner.find("input").each(function(i) {
            var $currentElem= $(this);
            $currentElem.prop("name",$currentElem.prop("name")+current);
            $currentElem.prop("id",$currentElem.prop("id")+current);
        });
        $newrunner.find("select").each(function(i) {
            var $currentElem= $(this);
            $currentElem.prop("name",$currentElem.prop("name")+current);
            $currentElem.prop("id",$currentElem.prop("id")+current);
        });
        var f = $("#fieldSet"+current);
        f.html(f.html().replace("fieldSetID", "fieldSet"+current));
        $newrunner.appendTo("#mainField");
        $newrunner.removeClass("hideElement");


        var prevvalue=$("#count").prop("value");
        $("#count").prop("value",prevvalue+","+current);

        });


});
</script>

表单是一个基本的html表单。

除非用户在Intranet上，否则表单将按预期工作。如果用户在内联网上，表单将仅提交第一个运行者;通过jQuery添加的所有其他运行程序的数据不会在提交时传输。这让我很困惑。在家工作，它完美无缺。但是，一个客户在内联网的办公室使用它，第一个跑步者工作，但增加的额外跑步者没有。

欢迎任何帮助。谢谢。

Answer 1

有些浏览器对DOM对象有特殊的安全性，那么你需要将对象转换为html然后替换ID /名称，最好使用隐藏的模板到你的字段，按照下面的功能代码：

基于javascript getTime的唯一ID，以及用于后端的简单数据组

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($){
    $('a[clone_nested]').on('click', function(){
        // div#runner_build
        var clone_build = $('#' + $(this).attr('clone_nested') + '_build');

        // div#runner_clone
        var clone_placeholder = $('#' + $(this).attr('clone_nested') + '_clone');
        var clone_object = $('.nested_fields:first', $(clone_build)).clone();

        $(clone_object).html($(clone_object).html().replace(/clone_key/g, (new Date().getTime())));
        $(clone_object).find('input[name*="_destroy"]').val(false).end().hide();
        $(clone_placeholder).before($(clone_object));
        $(clone_object).slideDown();
    });
});
</script>

<div>
    <div id="runner_build">
        <div class="nested_fields">
            <input type="text" name="runners[clone_key][name]" value="" id="runner_clone_key_name">
            <input type="text" name="runners[clone_key][address]" value="" id="runner_clone_key_address">
            <input type="text" name="runners[clone_key][phone]" value="" id="runner_clone_key_phone">
            <input type="hidden" name="runners[clone_key][_destroy]" value="true" id="runner_clone_key__hidden">
        </div>
    </div>
    <div id="runner_clone"></div>
    <a href="javascript:void(0)" clone_nested="runner">add runner</a>
</div>

<?php
unset($_REQUEST['runners']['clone_key']);
foreach($_REQUEST['runners'] as $runner){
    if($runner['_destroy'] == true){ continue; }    
}
?>

当用户在Intranet上时，jQuery动态添加未发送到数据库的表单元素数据

1 个答案: