57482

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.

Answer1:

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

Recommend

  • Facebook Social Plugins comments section hidden by classname (ReactJS)
  • Append a div after another div with javascript
  • Change navigation bar icons in jqGrid
  • How to disable retries for one connection with OkHttp?
  • jQuery new added inputs are not submitted
  • How to add multiple headers in Angular 5 HttpInterceptor
  • Unable to send a &str between threads because it does not live long enough
  • detecting qr code then rotating document
  • how to get clone element of queryselectorall and append to another div
  • How can I insert a DIV *between* an existing parent and child?
  • IE11 bug - calling javascript getAttributeNode method brakes mergeAttributes
  • Efficiency: Max difference between two items in a subset of an integer array
  • Problem occurs when using EGit for cloning repository in Eclipse (Missing unknown)
  • git receive-pack stops with 0000
  • Forcing a context switch from the userland on Linux?
  • Suspending event listeners
  • AngularJS : transclude ng-repeat inside directive
  • Simplify where clause with repeated associated type restrictions
  • How to open html table in xls on click of a button
  • Checking free space on FTP server
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • what is the difference between the asp.net mvc application and asp.net web application
  • ORA-29908: missing primary invocation for ancillary operator
  • How to get next/previous record number?
  • R: gsub and capture
  • AT Commands to Send SMS not working in Windows 8.1
  • Matrix multiplication with MKL
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How do you join a server to an Active Directory (domain)?
  • How does Linux kernel interrupt the application?
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • JaxB to read class hierarchy
  • Is there any way to bind data to data.frame by some index?
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can i traverse a binary tree from right to left in java?
  • How can I use `wmic` in a Windows PE script?