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

Question

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.

Post your code, that's the only way we can know what is going on. — Austin
– Austin, Commented Jul 12, 2012 at 1: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
– Tim, Commented Jul 12, 2012 at 1:24

GTSouza · Accepted Answer · 2012-07-13 15:27:16Z

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

edited Jul 13, 2012 at 15:27

answered Jul 12, 2012 at 1:39

GTSouza

3654 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim Over a year ago

Thanks. I'm using the code but still have some work to do. I'll get back and check it if it works. Thanks again.

GTSouza Over a year ago

@Tim change .live(), It's deprecated in favour of .on()

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related