Submit button needs to be clicked twice on IE

Question

I have the following code to submit a form and call a PHP script.

<script>  
function handleBrowse()
{    
    $('#uploadedfile').click();
}

function displayFilePath(obj)
{ 
    document.getElementById('dummyFilePath').innerHTML = obj.value;
}
</script>


    <div id="dummyFilePath" class="dummyFilePath"></div>
    <input type="button" value="Browse" onclick="handleBrowse();"/>

    <form enctype="multipart/form-data" action="../php/uploader.php" method="POST" target="myiframe">
        <input type="file" id="uploadedfile" name="uploadedfile" onchange="displayFilePath(this)" style="display:none"/>        
        <input type="submit" value="Upload File" />
    </form>

    <iframe  name="myiframe" id="myiframe" src="" width=1 height=1 style="visibility:hidden;position:absolute;bottom:2px;"></iframe>

In Firefox I would only have to click once to submit it. But in IE, I need to click twice!

Could you explain me why?

Please run this jsFiddle on IE to see the problem. You can clearly see that once you browse for a file to upload, unless you press the upload file button twice the form's action does not work.

PS: the double click issue in IE can be resolved as suggested in the answer below, but that would cause the uploaded file never to reach its destination (uploader.php); Only its name will

Not sure that it is the root cause of your problem, but you need to close the element mark : `` — sdespont, Jul 07 '13 at 21:04
And, as you are using JQuery, `document.getElementById('dummyFilePath').innerHTML = obj.value;`is equal to `$('dummyFilePath').html(obj.value);`. Also avoid inline JS to declare event like onClick. — sdespont, Jul 07 '13 at 21:06
Try to add a submit event on your form with JQuery http://api.jquery.com/submit/ then add an alert box in the callback and check if the alert is displaying the first time with IE. Also check the console for error (F12) — sdespont, Jul 07 '13 at 21:12
YEs, When I did that I was able to see the alert after the first submit, but only the second one calls the script :$ — Kam, Jul 07 '13 at 21:19
Take the iframe out of the form itself. Why are you messing with IE's head?? — Skarlinski, Jul 07 '13 at 21:37
@senthilbp I tried reading that question, didn't really get it, but I don't think its related to what I am facing... Thanks for your efforts though :) This question is driving me mad... — Kam, Jul 08 '13 at 05:02
If you remove the target= do you still get the same problem? I'd try it but for some reason jsfiddle.net won't load in IE for me!!! — DoctorMick, Jul 08 '13 at 12:29
Just tried it on IE8 (I know, I know!) and it worked as expected. What version of IE are you running? — DoctorMick, Jul 08 '13 at 12:36
This is apparently a known IE issue. If you show the file input element and then use the browse button and choose a file as if it were still hidden. You will see the name of the file shown in the file input element but be cleared the first time you click on the submit button. This SO post, alnog with others, also talks about it: http://stackoverflow.com/questions/9885684/on-form-submit-file-field-clears-in-internet-explorer-9 — iGanja, Jul 09 '13 at 03:56
This is marked as dupe but it actually looks like a different reason. OP doesn't even do preventDefault! Sure, the code could be cleaner and this has unnecessarily many revs as well - but I don't think this is a dupe of the one that is marked as the potential answer! AND I don't think that this should be a community rev. — Joel Peltonen, Jul 10 '13 at 06:35
This may be old, but the solution to your questions can be found at http://stackoverflow.com/questions/793014/jquery-trigger-file-input Basically, the issue is display:none in the upload button, change it to be off screen using css (but visible) — Tomer Grassiany, Aug 27 '13 at 00:48

score 2 · Answer 1 · answered Jul 08 '13 at 12:30

2

update your Function like this

function handleBrowse()
{   
    $('#uploadedfile').click();
    $('#uploadedfile').detach();
}

hope this helps you.

answered Jul 08 '13 at 12:30

Manish Parmar

859
1
11
19

detach resolved the double click issue, but caused the uploader.php form not to receive the actual file (please look at the example posted in the question). – Kam Jul 09 '13 at 02:04
the script only received the name of the file. somehow detach() cleared the file from the form – Kam Jul 09 '13 at 02:10

Submit button needs to be clicked twice on IE

1 Answers1