SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Form field in Appendchild not posting in Firefox

    Hi, I have an appendchild script that adds an <input> element when a current one is clicked. It then gets posted by a PHP script. Everything works perfectly in IE, but in Firefox, nothing gets posted.

    Code JavaScript:
    <script type="text/javascript">
     
    var i=0;
    function addElement() {
     
      var ni = document.getElementById('org_div1');
     
      var numi = document.getElementById('theValue');
     
      var num = (document.getElementById('theValue').value -1)+ 2;
     
      numi.value = num;
     
        var newDiv = document.createElement('div');
     
        var divIdName = num;
     
      newDiv.setAttribute('id',divIdName);
     
    newDiv.innerHTML = ' '+num+' <input type="file" name="file' + (num) +' " onclick="addElement()"/> <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
        // add the newly created element and it's content into the DOM
        ni.appendChild(newDiv);
    }
     
        function removeElement(divNum) {
     
      var d = document.getElementById('org_div1');
     
      var olddiv = document.getElementById(divNum);
     
      d.removeChild(olddiv);
     
    }
     
    </script>

    Anyone have any input?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Does the problem still remain when you use DOM manipulation techniques to create the elements?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm.. Not quite sure what you mean.. can you explain? - thanks

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jonahkatz View Post
    Hmm.. Not quite sure what you mean.. can you explain? - thanks
    What I mean is to not use innerHTML, but to use DOM manipulation techniques such as createElement, setAttribute, and appendChild to create the same content.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats a good question. Im going to look up the syntax and check out. Ill get back to you in a few and let you know how it goes.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jonahkatz View Post
    Thats a good question. Im going to look up the syntax and check out. Ill get back to you in a few and let you know how it goes.
    It could also be due to invalid HTML in your page.
    Here is a bug report where a form wasn't submitting fields added with innerHTML in Firefox, but the actual problem was that the form was inside of a table, that being an invalid HTML code structure.
    https://bugzilla.mozilla.org/show_bug.cgi?id=263138

    If you can provide us with a link to a test page that demonstrates the problem, we can help you to find the actual cause of the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldnt figure out how to use dom manipulations for everything i need (file upload, onclick, name i++ etc)

    Unfortunately, the full code is on my computer at work and it isnt on any online server. Thanks for the help, ill play around with it some more.

    Do you think you can help me with DOM manipulations?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jonahkatz View Post
    Do you think you can help me with DOM manipulations?
    Sure thing. What part do you need help with?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well basically Ill keep a majority of the script i have now. Just ill replace the innerHTML with create element.

    The create element should be a file input element with name=file' + (num) +' and onclick="addElement()"/> <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>

    Does this make sense? Is this possible?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jonahkatz View Post
    Well basically Ill keep a majority of the script i have now. Just ill replace the innerHTML with create element.

    The create element should be a file input element with name=file' + (num) +' and onclick="addElement()"/> <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>

    Does this make sense? Is this possible?
    Yes, you'll want to create two elements, an input element and an anchor element, in a similar way to which the newDiv was created.

    To the input element you will set the name attribute and the onclick event.
    To the anchor you will set the href attribute and the onclick event, and append some text created with createTextNode

    After which, both the input element and the anchor element can be appended to the div.

    Do you want to give it a go, and come back to us when you come across a part that you have trouble understanding?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah definitely ill let you know what i come up with. Thanks.

  12. #12
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So heres the new script ive come up with but it isnt quite working...


    Code Lisp:
    <script type="text/javascript">
     
    var i=0;
    function addElement() {
     
      var ni = document.getElementById('org_div1');
     
      var numi = document.getElementById('theValue');
     
      var num = (document.getElementById('theValue').value -1)+ 2;
     
      numi.value = num;
     
        var newDiv = document.createElement('div');
     
        var divIdName = num;
     
      newDiv.setAttribute('id',divIdName);
     
    var inputfile = document.createElement("input");
      		input.setAttribute("type", "file");
      		input.setAttribute("name", 'file' + (num);
      		input.onclick = addElement();
     
            var removelink = document.write("<a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>");
     
    	newDiv.appendChild(inputfile, removelink);
    	ni.appendChild(newDiv); }

    I feel like im so close!

  13. #13
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Played around it some more and got the input to work, but the anchotag isnt..




    Code Lisp:
    <script type="text/javascript">
     
    var i=0;
    function addElement() {
     
      var ni = document.getElementById('org_div1');
     
      var numi = document.getElementById('theValue');
     
      var num = (document.getElementById('theValue').value -1)+ 2;
     
      numi.value = num;
     
        var newDiv = document.createElement('div');
     
        var divIdName = num;
     
      newDiv.setAttribute('id',divIdName);
     
    var input= document.createElement("input");
      		input.setAttribute("type", "file");
      		input.setAttribute("name", 'file' + (num));
    		input.setAttribute("onclick", "addElement()");
     
    var anchorTag = document.createElement("a");
    		a.setAttribute('onclick', "removeElement('+divIdName+')");
    		a.createTextNode("<a onclick=\'removeElement('+divIdName+')\'>Remove the div</a>");
     
    	newDiv.appendChild(input);
    		newDiv.appendChild(anchorTag);
     
    	ni.appendChild(newDiv); }
     
        function removeElement(divNum) {
     
      var d = document.getElementById('org_div1');
     
      var olddiv = document.getElementById(divNum);
     
      d.removeChild(olddiv);
     
    }
     
    </script>


Tags for this Thread

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
  •