Appendchild 不在 Firefox 中发布表单数据

发布于 2024-11-24 02:27:44 字数 1555 浏览 1 评论 0原文

我有一个添加表单元素的appendchild 函数。在 IE 中，一切正常； process.php 能够$_POST 它。但在 Firefox 中，它不发送数据。

这是我的代码。

<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>

<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>

原文

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+')\'>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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与之呼应 2024-12-01 02:27:44

解决了问题...

基本上，我有这个..

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

并更改为这个..

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

似乎firefox不喜欢无效的html。

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.

回复收藏 0 原文

迷鸟归林 2024-12-01 02:27:44

您可以使用 PHP 的字段名称数组功能来避免跟踪字段名称。只需像这样命名该字段：

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

在提交表单后，PHP 将把每个文件框作为 $_FILES 数组中的单独成员进行处理。这使您免于跟踪有多少个框以及用于存储值的隐藏表单字段的所有额外开销。

您可能需要重新考虑让文件元素的 onclick 成为添加新文件输入的东西。如果有人单击“浏览”按钮添加文件会发生什么？他们将得到一个新的文件输入框，即使他们可能只想要一个。如果他们选择了错误的文件或稍后改变了主意并再次单击“浏览”以更改文件选择，他们将看到另一个输入框。

考虑使用专用的“添加另一个框”按钮。

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.

回复收藏 0 原文

回忆凄美了谁 2024-12-01 02:27:44

只是想问一下你的表单标签位于哪里？表标签之前还是之后？我有类似的问题，我的表单标签在表格内。当我将表单标签放在表格之外时，一切正常。

网站不再工作了。
这是工作示例。我用了你的代码。我只改变了两件事
而不是
并且您缺少一个结束 div 标签，

这里是代码（在 IE7、IE8、FF 和 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>

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>

回复收藏 0 原文

~没有更多了~