Appendchild not posting form data in firefox_问答_开发者

I have an appendchild-function that adds form elements. In IE, everything works fine; the process.php is able to $_POST it. But in firefox, it doesnt send the data.

Here is my code.

<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 = '<input type="text" name="work" /><input type="file"
class="fileupload" size="80" name="file' + (num) +'" onclick="addElement()"/> <a
  class="removelink" onclick=\'removeElement('+divIdName+')\'&g开发者_JAVA技巧t;Remove This File</
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>

<td>
    <div class="file_input_wrapper">        
        <input type="hidden" value="1" id="theValue" />
        <div id='org_div1'>
            <input type="file" class="fileupload" name="file1" size="80" onclick="addElement()" />
        </div>
</td>

Solved the problem...

Basically, I had this..

<div>
<form>
</div>
</form>

And changed to this..

<form>
<div>
</div>
</form>

Seems firefox doesnt like invalid html.

You can use PHP's field name array functionality to get around having to keep track of your field names. Simply name the field like this:

<input type="file" name="files[]" ... />
                              ^^--- array notation

and PHP will handle each file box as a separate member in the $_FILES array after the form's submitted. This frees you up from all the extra overhead of keeping track of how many boxes there are and hidden form fields to store the value.

You may want to reconsider having the file element's onclick be the thing that adds a new file input. What happens if someone clicks on the "browse" button to add a file? They'll get a new file input box, even though they may only have wanted one. If they choose the wrong file or change their minds later and click browse again to change the file selection, they'll get yet another input box.

Consider having a dedicated "add another box" button instead.

Just want to ask where your form tag is located? Before or after table tag? I had similar problem and my form tag was inside table. When I put form tag outside of table everything worked fine.

Site doesn't work anymore. Here is working example. I used your code. Only two thing I changed is <input type="text" name="work[]" /> instead of <input type="text" name="work" /> and you was missing one </div> closing div tag

here is code (tested on IE7, IE8, FF and google chrome)

<?php
if (!empty($_POST['btnProsledi'])){
print_r($_POST);
echo "<br />";
print_r($_FILES);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<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 = '<input type="text" name="work[]" /><input type="file"  class="fileupload" size="80" name="file' + (num) + '" onclick="addElement()"/> <a class="removelink" onclick=\'removeElement(' + divIdName + ')\'>Remove This File</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>

</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
  <table>
<tr>
    <td>
    <input name="proba" type="text" id="proba" value="" />
    </td>
</tr>
<tr>
    <td>
<div class="file_input_wrapper">        
    <input type="hidden" value="1" id="theValue" />
    <div id='org_div1'>
        <input type="file" class="fileupload" name="file1" size="80" onclick="addElement()" />
    </div>
    </div>
</td>

</tr>
<tr>
    <td>
    <input name="btnProsledi" type="submit" id="btnProsledi" value="Submit" />
    </td>
</tr>
 </table>
 </form>
</body>
</html>