SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically created form elements in JavaScript ignored when posted via PHP

    Hi there and thanks for visiting,

    I've posted this question in the PHP forum, however it seems that it's more of a JavaScript issue that I'm not aware of. I'm allowing users to dynamically create form file upload fields. I'm having no issue with this the problem is, is when the form is submitted, the dynamically created form file upload fields are ignored when posted. I'm using the PHP language. I am able to manually create the multiple upload fields and everything works fine. I want this to be dynamic however and to allow the user to upload as many as needed. Here's the type different types of JavaScript that I've tried. I can't find a solution online. Thanks.


    Code:
      var ni = $('uploadPanelInner');
      var newdiv = document.createElement('div');
      var divIdName = 'uploadDiv'+uploadCnt;
      newdiv.setAttribute('id',divIdName);
      newdiv.innerHTML = '<span id=\"smallText\">File '+uploadCnt+':</span> <input type=\"file\" name=\"kfile[]\" size=\"35\" />';
      ni.appendChild(newdiv);

    and...

    Code:
      var ni = $('uploadPanelInner');
      var newinput = document.createElement('input');
      newinput.type = 'file';
      newinput.name = 'kfile[]';
      newinput.size = '35';
      ni.appendChild(newinput);
    any help would be GREATLY appreciated. What am i missing?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Is 'uploadPanelInner' the FORM? Even if it isn't and it's a DIV in the FORM, it ought to still work. Are you using prototype? An online version would be helpful if you have one.

    Also, try submitting the form with Javascript (theForm.submit()). I've never encountered a problem like this before, so I'm just guessing.

  3. #3
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    uploadPanelInner is actually a div. It difficult to find an answer to this, but I have been reading and other people have had the same issue. And yes, the dynamic elements are within the FORM tags. I thought I made that stupid mistake at first (and we all do sometimes right ). Thanks for your time.

  4. #4
    SitePoint Zealot milenko1054's Avatar
    Join Date
    Jan 2004
    Location
    Ohio
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You also might try adding those file fields to the form elements array directly...


  5. #5
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles, I tried myForm.submit(), sadly, it didn't work

  6. #6
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    milenko1054, do you have an example of how to do this? Thanks for your input.

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Looks like it could have something to do with which HTML element you append your new one to and that it's only a Firefox problem. Have you tried it in other browsers?

    http://www.dustindiaz.com/add-and-re...th-javascript/
    Scroll down to the comments made by "kim steinhaug". It seems like the problem is with innerHTML, but you've tried without innerHTML so I don't understand what the problem is.

  8. #8
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles, it's funny because the Web site you are suggesting is where I orig. got the script from and where I found a possible solution. Thanks for your help. I'm officially stumped. I'm going to work on this issue more later, I'm at work now and have to move on. Argh! I hate giving up.

  9. #9
    SitePoint Zealot milenko1054's Avatar
    Join Date
    Jan 2004
    Location
    Ohio
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure - here's an overview of the form elements array: http://www.quirksmode.org/js/forms.html , you want to append the element you're adding to this array. Here's an overview of an implementation of the push() function to do that: http://www.informit.com/articles/art...&seqNum=3&rl=1


  10. #10
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for all your help and your time. I appreciate it.

  11. #11
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    repair

    But if your code is working in firefox and not in IE there is a simple reason-
    IE does not allow elements to have their names written to at runtime.
    No name, no upload to the server. You can see the control in your form, but it hasn't got a name.

    It is a well known problem- IE says security, coders say 'bug', because it is easy to get around it.

    You need to create your element and (if the name is not set)
    write the thing literally and set it with innerHTML.


    Code:
    document.newField= function(tag, attr){
    	var el= document.createElement(tag);
    	if(attr && attr.name && !document.addEventListener){
    		return document.nameHack(tag,attr);
    	}
    	for(var p in attr) el[p]= attr[p];
    	return el;
    }
    
    document.nameHack= function(tag,attr){
    	var el= document.createElement('div');
    	var str= '<'+tag+' ';
    	for(var p in attr){
    		str+= p+'=\"'+attr[p]+'\" ';
    	}
    	str+=+'>';
    	if(/^(meta|input)$/i.test(tag)==false)str+='</'+tag+'>';
    	el.innerHTML= str;
    	return el.firstChild;
    }
    //test case:

    var el= document.newField('input',
    {type:'text', name:'newInput', size:'10'})
    document.body.append(el)
    Last edited by mrhoo; Oct 27, 2007 at 08:49. Reason: exception

  12. #12
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mrhoo, I appreciate your response. I'm only using Firefox and I only care about Firefox because I'm working on this for my Intranet at work (everyone here uses Firefox, because IE sucks). I'm having the issue in Firefox. I've tried both ways by creating the element literally using innerHTML and the other way. Neither works. I'm still stumped. Any suggestions?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •