Submit form requires more than one click in IE [duplicate] - javascript

I have a form with a file control and a separate button that causes the click event to fire on that file field. The problem is that if you click the button, then the submit button at the bottom of the page requires two clicks in IE. How do I prevent that?
In it's most simply form, here's the code:
HTML:
<form action="#">
<input type="file" id="myFile" />
<button id="myButton">** My Choose **</button>
<input type="submit" value="Submit" />
</form>
JavaScript:
$(function() {
$('#myButton').click(function(e) {
e.preventDefault();
$('#myFile').click();
});
});
A more in-depth sample at JSFiddle: http://jsfiddle.net/XPqQB/6/
In IE, clicking on the "My Choose" button will then require two clicks on "Submit" to actually post. (Usually "myFile" would be hidden, but for demo purposes I'm leaving it visible.)
Test steps:
Case 1:
Refresh page.
Click "Submit". Confirm submission (via dev tools).
Case 2:
Refresh page.
Click "Browse..." next to file input, select file.
Click "Submit". Confirm submission (via dev tools). (Sometimes even this requires two clicks!)
Case 3:
Refresh page.
Click "My Choose", select file.
Click "Submit". No action.
You can also see that in case 2 and 3 that sometimes the .click() or .submit() events are not being triggered either.
A further interesting aspect of this is when there's more than one file input on the page. If there are three, and you do the above three times, you have to click on the submit button four times total to submit the page.

the solution is to use a label that points to the file input, you can apply any styling to the label and it will work
<label for="myFile">** My Label **</label><br/>
<input type="file" id="myFile" name="myFile" />
as i understand it is caused by IE9 security restrictions

Related

Vuejs form not submitting on "enter"

TL;DR Question
Why can I not use 2 of the same input fields in a form, and the enter button submit the form
More detailed question
Straight to the point. I'm trying to use the enter button to submit a form when an input element is focussed, which should then emit an event.
I've written a codepen here which replicates the "weird" behaviour: https://codepen.io/anon/pen/gqGMmW
As you can see, if I have more than 1 input of the same type (for example, 2 input="text" inputs, when i press the enter button when focuses on an input, it fails to emit the submit event.
In the second app example directly below it, I have the exact same form, with the exact same vuejs instantiation, but with only one input field, and when you press enter when focuses on that element it correctly emits the submit event.
I've tried to google what might be going on here, but struggling to find much of any use apart from "prevent form being submitted on enter".
I've tried adding an ID attribute, a name attribute etc to the element, and it still doesn't work as expected.
I'm not beginner at vuejs, but not an advanced JS user either, so "simple" answers would be appreciated :D
If more information is needed, please let met know and I'll provide as much as I can
Make sure that your form has either
<button type="submit">Submit</button>
or
<input type="submit" value="Submit" />
If you don't want to show the button, you can use
<input type="submit" style="position: absolute; left: -9999px"/>
You can find more information about hiding the button in this question Submitting a form by pressing enter without a submit button
On Vue 3 we can directly add #keyup.enter event in the form.
Here is an example.
<form #keyup.enter="handleSubmit($event, onSubmit)">
I tried many different solutions and none worked for me. Maybe because I had several buttons in my form of which only one was supposed to submit the form.
This was what finally worked:
Use #keyup.enter on the last element of your input like so:
<input type="text" #keyup.enter="save" />
This way the form will be submitted when the user presses enter right after they fill in the last field of your form.
P.S.
In my case I had a <v-text-field> instead of an <input> but it should make no difference.
Solved for me. Don't mount Vue on the form element. Mount Vue on a parent element of the form.
<form
id="app"
method="post"
novalidate="true"
#submit="onSubmit"
>
<div id="app">
<form
method="post"
novalidate="true"
#submit="onSubmit"
>

Input field with onchange fails to trigger when user click button in another form

I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>
Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?
The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.

Customizing the appearance of a file input in an HTML form

I've been trying to figure out how to customize the appearance of a file input in an HTML form so that the button will match with the rest of the buttons on my site. Looking around here I found a solution that I would expect to work, but it's having some strange behavior.
I took my file input and set display:none, and created a new text input and button within the form.
<form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return aentryValidate()">
<input type="text" id="EntryTitle" name="EntryTitle" maxlength="50" />
<div id="invalidTitle" class="invalidData"></div>
<p id="char-remaining">(50 characters remaining)</p>
<input type="file" id="ImageFile" name="ImageFile" style="display:none;" />
<input type="text" id="ImageFileMask" name="ImageFileMask" disabled="true" />
<button type="button" onclick="HandleFileButtonClick()" id="ImageFileButton" style="margin-left:10px;padding-bottom:0px;height:20px;width:100px;font-size:14px;">browse...</button>
<div id="invalidImage" class="invalidData"></div>
<p id="file-desc">(image to represent your entry, jpg, png, or gif)</p>
<textarea id="EntryDesc" name="EntryDesc"></textarea>
<div id="invalidDesc" class="invalidData"></div>
<br />
<input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
<input type="hidden" name="isPrivate" value="false" />
Make my entry private.
<button id="new-entry-save">save</button>
</form>
Then my javascript to handle the ImageFileButton button being clicked:
function HandleFileButtonClick() {
document.getElementById("ImageFile").click();
document.getElementById("ImageFileMask").value = document.getElementById("ImageFile").value;
}
It appears to work fine. I click the button, the window pops up for me to select a file. When I select a file, it appears in the text box.
The weird behavior comes when I hit the save button on the form. I noticed that it has to be clicked twice to actually submit for some reason now. And, when it submits it is no longer posting the file.
So I made the file input visible again to see what was happening. If I use the ImageFileButton button to select a file, the file shows up in the file input. But when save is clicked, the file input clears and the form doesn't submit. You then have to click again to submit, and of course now there is no file.
Anybody know what is happening here?
No, its not possible. File inputs are generally browser dependant. You might have to use JavaScript replacement or Flash replacement like uploadify.
Article: Input File
Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation.

Unbinding form submit to iframe with jQuery

I have a PHP page with multiple forms, some of which submit to an iframe (separate iframe for each form) to allow for ajax-like file uploads. I don't want the user to have to click a "Submit" button after selecting each file, so I am submitting the form using jQuery's .submit() function inside of a .change() event on the file input element.
The individual file uploads work fine.
However, after all the individual files are submitted, the user must click on a final button that acknowledges they have reviewed the form data as displayed. This last button is just an independent button. It is not a submit button, and it is not associated with any form. When the page initially loads, this button works fine.
However, once the .submit() function is called for the file uploads, the final button seems to be bound to the other form's action.
Roughly, the structure of the page is as follows:
<form id="finalForm" target="finalTarget" action="uploadFile.php?action=final" method="post" enctype="multipart/form-data">
<div id="finalSelect">
<input type="file" name="finalDraft" id="finalDraft" value="file" />
<input type="submit" value="Submit" id="finalSubmitButton" />
</form>
<iframe id="finalTarget" name="finalTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe>
<form id="signForm" target="signTarget" action="uploadFile.php?action=sign" method="post" enctype="multipart/form-data">
<div id="signSelect">
<input type="file" name="signPage" id="signPage" value="file" />
<input type="submit" value="Submit" id="signSubmitButton" />
</form>
<iframe id="signTarget" name="signTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe>
<button type="button" id="mainSubmitButton">Submit</button>
the jQuery is as follows:
$("#mainSubmitButton").click(function(){
document.location.href='pageName.php';
});
$("#finalDraft").change(function(){
$("#finalForm").submit();
}
after doing a final draft submit, when I click on the mainSubmitButton it loads uploadFile.php.
Does anybody know why this is happening, and what I can do to correct the problem?
Thanks in advance for your help.
Kate
Return "false" from the button click to cancel any default behaviour.
$("#mainSubmitButton").click(function(){
document.location.href='pageName.php';
return false;
});
the reason for this, I think is because the element button you used is acting as a submit button, not as you intended it to act - like a regular button. Just switch it to
<input type="button">
and you should be all set.
check out http://reference.sitepoint.com/html/button for more info
Reference implementation.

Enter to reliably submit html form

I have a form with text input + gradient-shaded button with onclick='this.form.submit()' (plus some hidden inputs).
In all browsers, clicking on the button works.
In Firefox, if I click Enter while in text input, it submits the form.
In IE, it does nothing.
How can I make it work with IE?
If I remember correctly IE likes having an actual submit button, whether that's an <input type="submit" /> or <button type="submit">submit me</button>. Maybe you can put that in there but "out of sight" so you don't see it..
Create an empty text box, with a style of "visibility:hidden;display:none", this is a known issue
This type of form will always work with "Enter":
<form ...>
...
<input type="submit" ...>
</form>
Make sure you have an input of type submit.

Categories

Resources