Why is this form not submitting inside the target iframe?

Question

I've created a form that targets an iframe to submit an image. I absolutely had this working previously, but now the whole page submits, instead of just the iframe. I'm at a total loss.

HTML:

<form id="upload-form" name="upload-form" class="" action="/handle/upload" method="post" enctype="multipart/form-data">
    <div class="fileinput-wrap">
        <label for="fileinput">Image input</label>
        <input type="file" name="file" id="fileinput" />
     </div>
    <input type="submit" id="submitter" name="submitter" />
</form>

JS:

$("#fileinput").on('change', function () {
    var $iframe = $("<iframe />").attr({
        id: 'frame_uploader',
        name: 'frame_uploader'
    });
    var $img = $("<img />");
    var imageUrl = "";
    $("#upload-form").prepend($img).append($iframe)
        .attr('target', 'frame_uploader')
        .trigger('submit');
    $iframe.load(function () {
        var imageUrl = $iframe.contents().find("body").text();
        $img.attr('src', imageUrl);
    });
});

http://jsfiddle.net/NVp9K/

This absolutely has to support older versions of IE, so no HTML File API suggestions, please. — Christopher Meyers, Feb 14 '13 at 19:13
hmm.. have you tried placing the iframe somewhere other than inside the form? not sure if it makes a difference. — Kevin B, Feb 14 '13 at 19:15
@KevinB Yes, I did try moving it outside the form. No help. Thanks though. — Christopher Meyers, Feb 14 '13 at 19:26
Yes, I should have explained, it seems to work fine in jsfiddle, but in the browser, the full page submits. — Christopher Meyers, Feb 14 '13 at 19:31
@ChrisopherMeyers: You are putting your JavaScript code inside of a `$(document).ready` handler, right? — gen_Eric, Feb 14 '13 at 19:32

score 1 · Accepted Answer · answered Feb 14 '13 at 19:33

1

I read somewhere that certain iframe names are reserved. Changing the name of the iframe has fixed the problem.

answered Feb 14 '13 at 19:33

Christopher Meyers

329
1
3
15

Thank you! Thank you! Thank you! That's a real pain to debug, had the same issue with my iframe called "background_file_upload", changing it to "my_iframe" and voila! it worked. – davur Nov 05 '13 at 01:29
it's not working for me.. – mazend May 23 '23 at 13:32

score 1 · Answer 2 · answered Oct 21 '15 at 15:44

1

Maybe you should add frame id and name attribute when it is created. Just like this:

var $iframe = $("<iframe id=\"frame_uploader\" name=\"frame_uploader\" />");

answered Oct 21 '15 at 15:44

user3117708

59
1

Why is this form not submitting inside the target iframe?

2 Answers2

Linked