用户在Intranet上时jQuery动态添加的表单元素数据未发送到数据库 [英] jQuery dynamically added form element data not sent to database when user is on intranet

问题描述

我有一个有趣的问题.我为跑步者创建了一份表格以报名参加比赛.该表格允许用户添加多个跑步者并立即将其全部注册.附加的运行器功能是使用jQuery编程的.

I have an interesting problem. I built a form for runners to sign up for a race. The form allows the user to add multiple runners and sign them all up at once. The additional runner functionality is programmed using jQuery.

这是添加其他跑步者的jQuery ...

Here is the jQuery that adds additional runners...

<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表单.

The form is a basic html form.

除非用户在Intranet上，否则表单将按预期工作.如果用户在Intranet上，则表单将仅提交第一名；通过jQuery添加的所有其他运行程序的数据均不会在提交时传输.这就是让我困惑的地方.在家里工作，它可以毫无问题地完美运行.但是，如果客户在其内部网中的办公室中使用它，则第一个赛跑者可以使用，但是添加的其他赛跑者则不能.

The form works as intended unless the user is on an Intranet. If the user is on an intranet, the form will only submit the first runner; The data for all of the additional runners that are added via jQuery is not transferred upon submission. This is what confuses me. Working here at home, it works perfectly without a problem. But, a client that uses it from his office on an Intranet, the first runner works, but the additional runners added do not.

任何帮助都将受到欢迎.谢谢.

Any help would be welcomed. Thank you.

推荐答案

某些浏览器对DOM对象具有特殊的安全性，那么您需要将对象转换为html，然后替换ID/名称，最好使用隐藏模板您的字段，请遵循以下功能代码:

Some browsers have a special security on DOM objects then you will need convert the objects to html then replace the ID/name, is better you use a hidden template to your fields, follow below a functional code:

基于javascript getTime的唯一ID，以及易于在后端获取的一组数据

unique id's based on javascript getTime, and easy group of data to get on backend

<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动态添加的表单元素数据未发送到数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！