Question

我目前正在添加一个备份jquery函数来替换FormData以支持即9及以下版本。但是我遇到过这篇文章： jQuery iframe file upload

我可以看到这是用于上传我需要的文件，但我的表单中有很多字段。有没有办法以编程方式获取表单中的所有文本字段而不使用formData。

我已经看过使用它但是它会获得所有输入字段但没有textarea字段，它将包含图像。

$("form").each(function(){
    $(this).filter(':input') //<-- Should return all input elements in that specific form.
});

或者有更好的方法吗？我并不想触摸formData，因为这适用于所有其他浏览器，但我已经包含了代码

if(document.FormData === "undefined")

检测并使用其他功能。

编辑：

刚试过以下内容：

$(".inputfield").each(function(index,element){
form.attr("input:text",$(element).val());
});

但它不会更新iframe

编辑：

这是我用来上传表单的完整代码（希望如此）

if(window.FormData === undefined){
                    // create iframe
                    var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');

                    $("body").append(iframe);

                    var form = $('.myform');
                    form.attr("action", "scripts/addtocart.php");
                    form.attr("method", "post");
                    form.attr("enctype", "multipart/form-data");
                    form.attr("encoding", "multipart/form-data");
                    form.attr("target", "postiframe");
                    $(".inputfield").each(function(index,element){
                        form.attr("input:text",$(element).val());
                    });

                    form.submit();

                    $("#postiframe").load(function () {
                        iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
                        $("#textarea").html(iframeContents);
                    });
                    alert("complete");
            }

编辑：添加表格：

<form class="myform" onsubmit="return false;" enctype="multipart/form-data">
<input type="hidden" name="price" class="inputfield" value="<?php echo $price; ?>" />
<input type="hidden" class="inputfield" id="product" name="product" value="<?php echo $_GET['id']; ?>"/>
<input type="hidden" class="inputfield" id="sid" name="sid" value="<?php echo $_GET['sid']; ?>"/>
<input type="hidden" class="inputfield" id="hiddenvalue" name="label" value=""/>
<input type="hidden" class="inputfield" id="quantity" name="quantity" value="1"/>
<input type="hidden" class="inputfield" id="labelquantity" name="labelquantity" value=""/>
<input type="hidden" class="inputfield" id="userlabel" name="userlabel" value=""/>
<input type="hidden" class="inputfield" id="colourlabel" name="colourlabel" value=""/>
<input type="hidden" class="inputfield" id="foillabel" name="foillabel" value=""/>

表单其余部分的大部分是根据之前选择的选项生成的，因此很难发布该代码

Answer 1

我通常会在我想要验证的字段中添加一个类，同样的规则可以应用于你想要做的事情。

<input type="text" class="req" name="forename" value="Forename.." />
<textarea name="comments" class="req">Comments..</textarea>

和jQuery

$(".inputfield").each(function(index,element){
    form.append(element);
    //form.attr("input:text",$(element).val());
});

示例

HTML

<form action="scripts/addtocart.php" target="post_requests" enctype="multipart/form-data" type="post"> <input type="hidden" name="price" class="inputfield" value="<?php echo $price; ?>" /> <input type="hidden" class="inputfield" id="product" name="product" value="<?php echo $_GET['id']; ?>"/> <input type="hidden" class="inputfield" id="sid" name="sid" value="<?php echo $_GET['sid']; ?>"/> <input type="hidden" class="inputfield" id="hiddenvalue" name="label" value=""/> <input type="hidden" class="inputfield" id="quantity" name="quantity" value="1"/> <input type="hidden" class="inputfield" id="labelquantity" name="labelquantity" value=""/> <input type="hidden" class="inputfield" id="userlabel" name="userlabel" value=""/> <input type="hidden" class="inputfield" id="colourlabel" name="colourlabel" value=""/> <input type="hidden" class="inputfield" id="foillabel" name="foillabel" value=""/> <input type="submit" /> </form> <iframe name="post_requests" style="display:none;"></iframe> <div id="response"> Waiting for form to be posted.. </div>

的Javascript

function postResponse(_html) { document.getElementById('response').innerHTML = _html; }

脚本/ addcart.php

<script type="text/javascript"> var _html = 'The form was posted..'; parent.postResponse(_html); </script>

Answer 2

此代码：form.attr("input:text",$(element).val());正在设置/覆盖<form>标记中属于具有类inputfield的每个元素的属性，因此当您执行form.submit();时，实际上是这样的：

<form class="myform" input:text="valueOfLastElementWithClass'inputfield'">

我怀疑你正在努力实现的目标。我不确定您试图实现的目标，但您可以在jquery中选择每个<input type="text"和textarea以及select，如下所示：

$('input[type=text],textarea,select').each(function(index, element) {
  // do something;
}

以编程方式将数据发送到iframe

2 个答案: