jQuery dynamically added form element data not sent to database when user is on intranet

问题

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.

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>

The form is a basic html form.

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.

回答1:

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:

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; }    
}
?>

来源：https://stackoverflow.com/questions/11443783/jquery-dynamically-added-form-element-data-not-sent-to-database-when-user-is-on

标签

php

javascript

jquery

forms

intranet