0

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.

Tim
  • 1
  • 1
  • 1
    Post your code, that's the only way we can know what is going on. – Austin Jul 12 '12 at 01:12
  • I added the jQuery that adds the additional fields. I'm not sure what else would cause the problem, it's all basic html or php. – Tim Jul 12 '12 at 01:24

1 Answers1

0

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; }    
}
?>
GTSouza
  • 365
  • 4
  • 16