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!
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
I am trying to create an upload script and am having issues with IE8 and older. (of course ;) ) In all other browsers it works fine but in IE8 the $_FILES array is empty. This is the html code being used:
<FORM method=post action=api/upload.php target=form8230839>
<INPUT name=file type=file>
<INPUT value="Submit Query" type=submit>
<INPUT name=id value=id66130748349062623150808191 type=hidden>
</FORM>
<IFRAME id=form8230839 name=form8230839></IFRAME>
(note the code is being generated by javascript createElement so IE8 is writing it out with the caps and lack of quotes around attributes.)
Then in the php file I am doing:
print_r($_FILES);
which returns as just an empty array? Any help would be great. Thanks!
Add enctype="multipart/form-data" to your form tag.
Spec: http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.2
Your question seems to be a possible duplicate of this one:
$_FILES array in PHP is empty
Nevertheless, as others have pointed out, and also from the attached, the solution is to add:
enctype="multipart/form-data"
to your form.
I have a HTML form as follows:
<form action="/AddFile" method="post">
<input type="file" name="filedata"/>
<input type="submit" value="Add File"/>
</form>
When I use it and submit a file called foo with content bar the POST request contains filedata=foo not filedata=bar as expected.
What am I doing wrong? How do I get the content of the file?
One you need to add enctype="multipart/form-data" to the form.
Two you need to get the files from $_FILES instead.
Three I think it's file_get_contents($_FILES['filedata']['tmp_name']); to get the file's contents.
Your markup lacks the attribute enctype="multipart/form-data", which is needed when a file field is present. See HTML 4.01 spec on form element.
Using multipart/form-data, the file contents get sent. The rest depends on your server-side handler.
So before I get started, I will let you know that I have read this question and mine is similar. Basically, i need to be able to have the user upload a file from the computer or take a picture from the webcam, put the photo on a canvas and upload that. Is there a way to change the source of a using javascript (I want to change the file source to the to the dataURL)? Here is what I have so far.
In the main html page:
<form name="uploadFile" action="upload.php" method="post" enctype="multipart/form-data" onSubmit="return validate();">
<input type="file" id="imageupload" name="ufile" onKeyPress="return false;">(* jpg,png)
</form>
And in a seperate JS file I have:
button2.addEventListener('click', function(){
imgdata=canvas.toDataURL('image/png');
$("#imageupload").attr("src", imgdata);
});
This code does do what is supposed to (it changes the attribute of #imageupload) but that is how to change the source of the file.
Any help would be appreciated!