Programmatically sending data to iframe

Question

I am currently adding in a backup jquery function to replace FormData for support of i.e 9 and below. However i have come across this post: jQuery iframe file upload

I can see that this is for uploading files which I will need but I have quite a lot of fields in my form. Is there a way to programmatically get all text fields in my form without using formData.

I have had a look at using this but it will get all input fields but no textarea fields and it will include images.

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

Or is there a better way to do this? I don't really want to touch the formData as this works fine for all other browsers but I have included the code

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

to detect and use another function instead.

EDIT:

just tried the following:

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

but it doesn't update the iframe

EDIT:

This is the full code i am using to upload the form (hopefully)

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");
            }

EDIT: added form:

<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=""/>

the majority of the rest of the form is generated depending on options chosen previously so abit hard to post that code

Answer 1

I usually add a class to the fields i want to validate, the same rule could be applied for what you want to do..

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

and the jQuery

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

Example

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

scripts/addcart.php

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

parent.postResponse(_html);
</script>

Answer 2

This code: form.attr("input:text",$(element).val()); is setting/overriding an attribute in the <form> tag for each element that has class inputfield, so by the time you do form.submit(); there will effectively be this:

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

Which I doubt is what you're trying to achieve. I'm not sure what you are trying to achieve, but you can select every <input type="text" and textarea and select in jquery like so:

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