I wanted to activate an input type=file (opening the file selection window) by using an onclick event on an image. I tried using the html label tag, however, this doesn't work in IE and Safari. This is the form I'm using.
<form id="MyForm" action="Thispage.php" method="POST" enctype="multipart/form-data">
<input type="file" id="ImageFile"/>
</form>
I first tried this:
<label for="ImageFile"><img src="MyImage.jpg"></label>
<!--This didn't worked in IE and Safari-->
I thought I could do it with an onclick event like this:
<img src="MyImage" onclick="Javascript:document.getElementById('ImageFile').click()">
This unfortunately didn't worked in Safari.
Is there any method that works in all browsers?
I would like a detailed explanation, because I'm not an expert. It helps me understand which code leads to which action.
Change the "Id" to "name" and try again.
I do not have the safari here, but in all other worked perfectly.
Try this:
<input type='file' name='nameFile'>
Or if you prefer, look: http://www.w3schools.com/tags/att_input_type.asp
This site is a great reference.
Hope this helps!
Related
When using an image input with a formaction attribute inside of a form in IE and Edge, clicking on the input image does not navigate to the specified formaction external URL. If you are currently viewing this question in Chrome and run the code snippet below, it will correctly open the Apache website. However, if you re-open this page in Edge, you'll find that clicking on the button does not work. However, if you change the input type to submit, everything works fine. Does anyone know why this is happening or if it's documented anywhere?
<form method='POST' id='loginForm'>
<input type='image' formaction='https://apache.org' src='http://apache.org/images/SupportApache-small.png' height='20%' />
</form>
I made a test with your code and I am able to produce the issue. Looks like IE and MS Edge has some issue with the formaction in Input type Image.
Workaround is to remove the formaction from an Image and put it in the form like below.
<!doctype html>
<head>
</head>
<body>
<form method='POST' id='loginForm' action="https://apache.org">
<input type='image' src='http://apache.org/images/SupportApache-small.png' height='20%' />
</form>
</body>
</html>
Output in IE:
Similar output you will get in MS Edge and other browsers.
Although the OP didn't specifically ask for a solution, only for an explanation/documentation, I'm posting a workaround (using jquery), in case anyone comes here looking for one:
$(document).ready(function ($) {
$('form').submit(function () {
var btn = $(this).find("input[type=image]:focus");
if (btn.length == 1) {
this.action = btn[0].formAction;
}
});
}
I have a simple HTML form that I am building. I want to be able to added multiple files to submit with the form to upload. Everything I am reading online about HTML5 says that I am able to do this with the HTML5 Input Multiple tag. When I try this in any browser I get the standard Input with a type of file. When I inspect the DOM i see that it has only a single file in it's Files[0] attribute. Here is my form. Please let me know what I am doing wrong.
Here is my HTML for the the form for uploading files:
<form method="post" action=upload.php" enctype="multipart/form-data">
<input type="file" id="basicUploadFile" multiple >
</form>
Also. I have tried this in Chrome, Firefox, IE 11. Even going to the W3school.com demo doesn't seem to work in any of them for multiple files.
files[0] will show you the first file selected. files gives you a collection of the selected files, files.length gives you the number of files selected. So once you select more than one file if you console.log(fileinput.files) you'll see multiple files logged.
<form method="post" action="upload.php" enctype="multipart/form-data">
<input type="file" id="UploadedFiles" name="UploadedFiles[]" multiple>
<input type="submit" value="SendFile">
</form>
in upload.php analize structure of array $_FILES ;)
good like!
Is that a typo? There is a " missing before the upload.php
your form tag looks correct
http://en.wikipedia.org/wiki/File_select#Multiple_file_selection
[edit]
If you are referring to the W3schools site, this works for me on Chrome and IE
http://www.w3schools.com/tags/att_input_multiple.asp
TryIt site:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_multiple
I have this problem Only on IE7 and IE8.
I have a shadowbox that contains an input type file in it.
When this shadowbox is loaded, the input file is invisible... until I mouse hover it.
It's a reall basic form with a really basic input file:
<form action="" method="post" enctype="multipart/form-data" autocomplete="off">
<input type="file" name="img" onChange="$('#button_img').css('display','');" />
<input type="hidden" name="step_crop" value="1" />
<input type="submit" value="" />
</form>
I tried to delete everything on the file and only leave the form with one element which is, yeah, the evil input file, but still invisible on page load until I hover it.
Someone would have an idea ?
(Video link for the behavior: http://www.screenr.com/6ICH )
Please try to close your div and input tags properly. does it work?
Hi, I can see input field in both IE7 and IE8. Can you please add your view how it looks like before and after
I have a login script based on PHP and Javascript. I couldn't figure out for the longest time why it would work in chrome and safari but not in firefox or internet explorer. I finally figured out the issue is with the html, instead of having the regular submit button I have an image for submit. and simply changing type="image" to type="submit" resolves the issue. Does anyone know why this is and if there's a compatible way to write the following
This works:
<input name="doLogin" type="submit" style="margin-left:90px;" id="doLogin3" value="Login">
This does not:
<input name="doLogin" type="image" src="login-btn.png" style="margin-left:90px;" id="doLogin3" value="Login">
if you are not going to be using js to submit your form, then the input type for your submit button should be submit. but if you really must have an image in place of your button, just position the image with css by setting it as the background of your button. no need to change input type to image. hope that helps.
I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit
If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html
Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.
I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}
Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>
Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.
I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.
You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.
check your form is outside the table