0

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
Liam Sorsby
  • 2,912
  • 3
  • 28
  • 51
  • I don't see what you're doing with an iframe in this code, could explain or add code? And a quick note, not sure if English is your first language, but you say "quiet" a couple of times where you mean "quite". "quiet" means "silence" ;) – asontu Aug 28 '13 at 12:54
  • @funkwurm English is my first language, spelling certainly isn't my forte, but thank you for pointing that out it will be updated. I will update the question now and more code. – Liam Sorsby Aug 28 '13 at 12:57
  • @funkwurm i've updated now – Liam Sorsby Aug 28 '13 at 13:00

2 Answers2

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>
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ
  • 4,062
  • 2
  • 22
  • 36
  • as my inputs already have classes would it also work like this: class="req test" then do a foreach on .req – Liam Sorsby Aug 28 '13 at 11:17
  • @LiamSorsby did this work for you? if so, could you please accept the answer - if not, please provide feedback and i will try assist you further – CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Aug 28 '13 at 12:26
  • sorry danny, was having a play with it. Doesn't seem to want to post the data to the iframe so not quiet yet. I've edited my post – Liam Sorsby Aug 28 '13 at 12:39
  • could this be because no name is been specified in the created code? if so any advise on how to generate the name on the input field? – Liam Sorsby Aug 28 '13 at 12:44
  • How are you posting it to the iframe? – CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Aug 28 '13 at 12:57
  • So you know: you can post a form directly to an `iframe`, by pointing the `target=""` of your form to the `name` of your `iframe` – CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Aug 28 '13 at 12:58
  • @LiamSorsby see my updated answer.. i believe you need to append the element rather than just add the attr to the form – CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Aug 28 '13 at 13:21
  • i've used the append and i've changed the iframe to be visable for a bit but unforunately using the append the form doesn't show in the iframe – Liam Sorsby Aug 28 '13 at 13:44
  • Neither of them show in the `iframe` - from what i understand, you're building a form and posting it to the `iframe`, if you want to create the form inside the `iframe` thats a different thing – CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Aug 28 '13 at 13:51
  • I may have confused things here. the form is already built on screen which is to be filled out, i just need a way of sending the data over (with ajax but sending text and files over) which is why i opted for using iframes, i have already got a FormData which works but this version is for I.E 9 and below as the majority of our customers use I.E and will be unable to use this site. – Liam Sorsby Aug 28 '13 at 13:56
  • Ok, in that case in the form that is already built, just add the `target="iframenamehere"` and it'll post into the iframe, which will emulate the AJAX form.. Then have a javascript function (`formComplete(the_html)`) on your page to print the result, the result is sent from the iframe destination as `parent.formComplete(the_html);` – CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Aug 28 '13 at 14:02
  • the js has var form = $('.myform'); which changes the attributes to the target to target="postiframe" wouldn't this do the same thing? – Liam Sorsby Aug 28 '13 at 14:07
  • update, i have to form posting to my iframe even though i had event.preventDefault(); i had in my form onsubmit="return false;" – Liam Sorsby Aug 28 '13 at 14:09
  • I think i understand what you want, let me set up an example for you – CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Aug 28 '13 at 14:12
  • No problem, Danny seen as you have spent so long on this i will accept your answer. But the code i originally had worked it was just the darn return false that was blocking it from running! Thank you for your help – Liam Sorsby Aug 28 '13 at 14:19
1

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;
}
asontu
  • 4,548
  • 1
  • 21
  • 29
  • thanks, i will give this a go, however it won't just be text it would be textarea and selects aswell. – Liam Sorsby Aug 28 '13 at 13:21
  • Changed it to also select `textarea`s and `select`s, however I don't see what you want to do with them. Are they not already inside of your `
    ` and `
    `?     – asontu Aug 28 '13 at 13:24
  • sorry i'll explain further. The purpose of this is i have my Ajax upload working fine, however it doesn't work in ie 9 or below as i was using FormData, so i need to pass all the form into the iframe to be passed into my php script to avoid having to make changes to my add to cart script. – Liam Sorsby Aug 28 '13 at 13:34
  • Could you post (a part of) your form? You don't need to send the form-elements to the iframe individually. Just `submit()` while the `target` has been set to `postiframe` like the existing script already does. The entire form - files, inputs, texareas and selects - will be sent to the iframe – asontu Aug 28 '13 at 14:01
  • the form is huge but yes some of the form is above. – Liam Sorsby Aug 28 '13 at 14:02
  • i had onsubmit="return false" that was stopping the file posting to the iframe!!! – Liam Sorsby Aug 28 '13 at 14:09