Dynamically Added form controls using Javascript do not get recognized as form elements?
-
Hi all, This is the first time I faced this problem when trying to achieve this simple task. I have a form, with an add button which when clicked, allows the user to search and select data which gets dynamically added to my form as a textbox. When I submit this form, this dynamically added textbox, along with anymore added with this feature are not recognized as part of the form and do not get sent to the server side script. I verified this using an iterator through all form elements. I had to explicitly add the textbox (its HTML) to the container as well as a child to the form. Only then did it get sent to my PHP script. Has anyone in this weird world ever faced this problem? I checked problems with "disabled, readonly, etc" and also made sure theres no ID conflicts or name conflicts with the rest of the form. Though my app works just fine with this work around, I am baffled as to why this has never happened to me in all the times I've implemented such a feature before but now. Any help would be appreciated.
-
Hi all, This is the first time I faced this problem when trying to achieve this simple task. I have a form, with an add button which when clicked, allows the user to search and select data which gets dynamically added to my form as a textbox. When I submit this form, this dynamically added textbox, along with anymore added with this feature are not recognized as part of the form and do not get sent to the server side script. I verified this using an iterator through all form elements. I had to explicitly add the textbox (its HTML) to the container as well as a child to the form. Only then did it get sent to my PHP script. Has anyone in this weird world ever faced this problem? I checked problems with "disabled, readonly, etc" and also made sure theres no ID conflicts or name conflicts with the rest of the form. Though my app works just fine with this work around, I am baffled as to why this has never happened to me in all the times I've implemented such a feature before but now. Any help would be appreciated.
Not entirely sure here but when the button is clicked to do it's job - add the textbox to the form - is this a server side command or client side? If it's client side then your server won't necessarily see the ID's of the dynamically created textboxes - unless it's explicity told to do so. Possibly the problem...
-
Not entirely sure here but when the button is clicked to do it's job - add the textbox to the form - is this a server side command or client side? If it's client side then your server won't necessarily see the ID's of the dynamically created textboxes - unless it's explicity told to do so. Possibly the problem...
Thanks John, It is a client side command that adds a textbox to a container within the form. Why does the client not send these new form controls to the server? What is the solution to this? I had to explicitly add the form element to its container (for display to the user) and also add it as a child to the form itself. I'm sure there is a more elegant solution to this.
-
Thanks John, It is a client side command that adds a textbox to a container within the form. Why does the client not send these new form controls to the server? What is the solution to this? I had to explicitly add the form element to its container (for display to the user) and also add it as a child to the form itself. I'm sure there is a more elegant solution to this.
There could be a number of reasons. Would you mind if you posted a snipet of your code - ?
-
There could be a number of reasons. Would you mind if you posted a snipet of your code - ?
Sure here's my story: Here is the JS function that adds a row to a table inside a form that contains the textbox in question. function ppl_add_admin_asst(id, resultsArray){ if(resultsArray.length > 0){ var name = resultsArray[..][..]; var id = resultsArray[..][..]; var str = "<tr id='asst_"+id+"_row'><td>"; var str1 = "<input type='text' readonly='readonly' name='admin_asst["+id+"][name]' id='admin_asst_"+id+"_name' value='"+name+"' />"; str1 += " <span class='form_elements_edit' style='font-weight:bold'><a href='#' onclick=\"removeRow('admin_asst_"+id+"_row');\"><img border='0' src='images/buttons/edit.gif' > Remove</a></span>"; str += str1+"</td></tr>"; //appending it to the table which is already a part of the form should include this new textbox to be part of the form $("#assts_table").append(str); //However, I need to explicitly add it to the form as well for it to work correctly $("#edit_form").append(str1); cancelFindProfile(id); } }
-
Sure here's my story: Here is the JS function that adds a row to a table inside a form that contains the textbox in question. function ppl_add_admin_asst(id, resultsArray){ if(resultsArray.length > 0){ var name = resultsArray[..][..]; var id = resultsArray[..][..]; var str = "<tr id='asst_"+id+"_row'><td>"; var str1 = "<input type='text' readonly='readonly' name='admin_asst["+id+"][name]' id='admin_asst_"+id+"_name' value='"+name+"' />"; str1 += " <span class='form_elements_edit' style='font-weight:bold'><a href='#' onclick=\"removeRow('admin_asst_"+id+"_row');\"><img border='0' src='images/buttons/edit.gif' > Remove</a></span>"; str += str1+"</td></tr>"; //appending it to the table which is already a part of the form should include this new textbox to be part of the form $("#assts_table").append(str); //However, I need to explicitly add it to the form as well for it to work correctly $("#edit_form").append(str1); cancelFindProfile(id); } }
Your JS looks good and is doing it's job. The problems not the simple server-client relationship I thought it was. :( What's happening is the server side script isn't set up to receive additional rows.. It's possibly only aware of the fields that are there when the page first loads. Sorry to answer your problem with another problem. I'm not too hot on PHP - sorry I can't help you any further.
-
Your JS looks good and is doing it's job. The problems not the simple server-client relationship I thought it was. :( What's happening is the server side script isn't set up to receive additional rows.. It's possibly only aware of the fields that are there when the page first loads. Sorry to answer your problem with another problem. I'm not too hot on PHP - sorry I can't help you any further.
-
Thanks for trying John. I have succesfully implemented this on different environments and never came across this problem so it looks like a server quirk. Such moody bugs are best handled with "work arounds" as I did. Should just leave it be I guess.
Yeah I come across many 'quirks' all the time. I'm a .NET man and although I love the platform and it is very good - us developers always come across the cracks in the system. Work arounds are sometimes the only way. Cheers JB
-
Thanks for trying John. I have succesfully implemented this on different environments and never came across this problem so it looks like a server quirk. Such moody bugs are best handled with "work arounds" as I did. Should just leave it be I guess.
-
malvik wrote:
Should just leave it be I guess.
Your choice. But, before you do, if you use Firefox browser, perhaps you might want to download and install the "Web Developer" Add-On. It could help you resolving this problem.
I use the Web Developer Toolbar extensively and also Firebug. Both confirm that the DOM placement of my textboxes is correct and in fact within the form. I just migrated the files to my localhost and it works on that perfect so I think it is an environment thing.