mbleser
asked on
When replacing input type=file, "Browse" button, must click SUBMIT twice for form to submit
I am replacing the default "Browse..." button for input type=file. This works fine except that the form will only submit after the SUBMIT button is clicked twice.
Any ideas on why this is happening or a workaround? I'm testing on IE 5+. Thanks!
<html>
<head></head>
<body>
<form name="test_form" method="post" action="test.jsp">
<input type=file name=browse style="display: none;">
<input type=text name=file>
<input type=button
style="font-style:veranda;
onClick="browse.click();fi
value="Select a File...">
<br><br>
<!-- must be clicked twice for the form to submit! -->
<input type=submit
value="Submit The Form Now!"
style="font-style:veranda;
</form>
</body>
</html>
Any ideas on why this is happening or a workaround? I'm testing on IE 5+. Thanks!
<html>
<head></head>
<body>
<form name="test_form" method="post" action="test.jsp">
<input type=file name=browse style="display: none;">
<input type=text name=file>
<input type=button
style="font-style:veranda;
onClick="browse.click();fi
value="Select a File...">
<br><br>
<!-- must be clicked twice for the form to submit! -->
<input type=submit
value="Submit The Form Now!"
style="font-style:veranda;
</form>
</body>
</html>
And does anything get uploaded?
ASKER
I'm actually not trying to upload a file...just retreiving the file name. Which does correctly get passed to the jsp.
So, all post functitonality is working correctly. Its just an annoyance (and unacceptable) for our users to have to click the Submit button twice.
So, all post functitonality is working correctly. Its just an annoyance (and unacceptable) for our users to have to click the Submit button twice.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Cool! I don't think I would have thought of that solution. Thanks so much...works perfectly!
:)
:)
another way:
<html>
<head></head>
<body>
<form name="test_form" method="post" action="javascript:alert('
<input type="text" name="file">
<input type="button"
style="font-style:veranda;
onClick="document.dummy.br
value="Select a File...">
<br><br>
<!-- must be clicked twice for the form to submit! -->
<input type="submit"
name="submit"
value="Submit The Form Now!"
style="font-style:veranda;
</form>
<form name="dummy">
<input type="file" name="browse" style="display:none;">
</form>
</body>
</html>
<html>
<head></head>
<body>
<form name="test_form" method="post" action="javascript:alert('
<input type="text" name="file">
<input type="button"
style="font-style:veranda;
onClick="document.dummy.br
value="Select a File...">
<br><br>
<!-- must be clicked twice for the form to submit! -->
<input type="submit"
name="submit"
value="Submit The Form Now!"
style="font-style:veranda;
</form>
<form name="dummy">
<input type="file" name="browse" style="display:none;">
</form>
</body>
</html>
ASKER
Excellent. Thanks for your respone as well!
I think the filename wasn't passed to PHP scripts if you use this method but I could be wrong. Can anyone verify? As I used this method to change my browse buttons, my php script spewed out error saying that it didn't get any values from the form submitted. Thanks.
I'd recommend to post your question in PHP section, so experts have access to it and try to answer it... of course you have to offer some points...
cheers =0)
cheers =0)
this method of using: onClick="browse.click();" does not work in Netscape :(
If you remove the 'display: none' from the file-type input you can see what's happening...
If a file-type input field has been filled by calling on it's click() function from within javascript, when you submit the form IE seems to clear the field instead of submitting the form. Next time you hit submit this problem will no longer be there.
This is probably a security measure of IE, to prevent malicious code from uploading files the user isn't aware of uploading.
I found that only when you really click on the 'browse' button, the file will be uploaded.
If a file-type input field has been filled by calling on it's click() function from within javascript, when you submit the form IE seems to clear the field instead of submitting the form. Next time you hit submit this problem will no longer be there.
This is probably a security measure of IE, to prevent malicious code from uploading files the user isn't aware of uploading.
I found that only when you really click on the 'browse' button, the file will be uploaded.
I've been looking for this tweak for awhile and the above code works for me but the browse button only seems to bring up the file dialog box once... then it does nothing. Any one have fix for that? Thanks!
any idea how can we browse through or select folders instead of files using input type=file element. Or any other element/type of inpur tag is also acceptable. I want th user to specify the path for the folder.
Thanks in advance.
Vivek.
Thanks in advance.
Vivek.
Evolkid22,
I just changed the browse.disabled=true; to browse.disabled=false
Hope that helps.
S.
I just changed the browse.disabled=true; to browse.disabled=false
Hope that helps.
S.
Erm, I'll get my metaphorical coat.
Don't change the browse.disable=true at the end, just slap a browse.disabled=false at the beginning of the line.
onClick="browse.disabled=f
Don't change the browse.disable=true at the end, just slap a browse.disabled=false at the beginning of the line.
onClick="browse.disabled=f
I was actually using this to pass a file, but Cold Fusion I was unable to access any file object on the form, although it was listed in the form field, for some reason it is inaccessible once you process the script. It's a nice try to satisfy the graphic designer, but I'm more inclined to tell him, tough luck. :) We'll wait till the w3 or other html committiees decide we are worthy enough of having the ability to alter the browse button. If someone can show me this works in CF I'll glady use it but otherwise...
This was an excellent trick! I found an answer in your question mbleser!
Thanks
Thanks
Hi,
How can i make it work in firefox?
Rk
How can i make it work in firefox?
Rk