I have bound a JavaScript function to the submit button of a form, causing the form to be submitted via an xhrPost request (using Dojo). However, when the user hits "Enter" in Safari, the form is submitted the usual way.
Is there any way to prevent Safari from submitting the form when the Enter key is pressed? Can I somehow bind my JavaScript function to the enter key instead?
Thanks a lot in advance!
--Andreas
Are you returning the false value from from the onsubmit handler? That's all that should be required to prevent normal form submission (provided Javascript is enabled).
This is probably happening due to an error in the submission handler code - Safari will submit the form as usual if there is an exception there. Check to see if the Safari console is showing any errors.
I also had a similar issue once when the <input> elements were outside of the <form> tag. Double check that, too, perhaps.
How I solved this problem was to disable the 'Enter' key. Not very elegant, and still looking for a better approach.
$('form').keypress(function (e){ if((e.which==13){ return false; }});
Related
I am creating reports using Jasper right now and almost everything goes well. We set it in a way that if the user will preview a report, the report(pdf) will be shown on a new Tab. The problem is if an error occurs, a new Tab would still be opened instead of just showing the Feedback Panel on the original page.
How can the form be setup in such a way that the feedback panel will be shown on the original page instead of the newly opened Tab?
Form<?> form = new Form<Void>("form");
form.add(new AttributeAppender("target", Model.of("_blank")));
SubmitLink view= new SubmitLink("view") {
#Override
public void onSubmit() {
//code inside a try-catch to generate the report using Jasper}
};
CptiDownloadButton download = new CptiDownloadButton("download", new AbstractReadOnlyModel<File>(){
//CptiDownloadButton extends SubmitLink button and is a modification of Mr Ivaynberg's DownloadLink
};
<form wicket:id="form">
<input type="button" wicket:message="value:search"/>
<input type="button" wicket:message="value:download"/>
</form>
Thanks in advance to anyone who'll answer. ^^
If you do any form submission to a form with target="_blank", the browser will automatically open a new tab to render the response from the form submission. It is the intended behavior, and trying to prevent it is breaking the standard target="_blank" behavior. I guess what I'm saying is you should really think whether breaking this standard behavior is something you want to do.
If it is, here's how I would go about it. Warning: ain't gonna be clean.
Use Ajax (AjaxButton or AjaxFormSubmitBehavior) to submit the form. Since it is done via ajax, the browser will not invoke default form submission behavior, hence not opening a new tab.
Ajax then invokes the form processing. On error, re-render the feedback panel and return. On success append JavaScript to invoke the default form submission on the respective link when the request returns. This will perform standard form submission behavior, hence performing the target="_blank". It will once more validate the form, but then it will proceed to perform the originally intended behavior.
The way you invoke the default form submission on the link you desire can be done in a few different ways and is entirely up to you. As a quick and dirty way you can hide the buttons that you have right now (visually) and perform javascript to click the button. Or you can use a hidden form field to identify which button has been clicked if you don't want ugly hidden clicking behavior.
You'll have to do a form (Ajax)-submit without target, and then initiate the actual download after checking possible errors.
See https://cwiki.apache.org/confluence/display/WICKET/AJAX+update+and+file+download+in+one+blow for an example with Ajax and an attachment content disposition.
I have a very simple form with a single autocomplete widget. No submit button. I would like the form to act in such a way that it submits the form when the user selects a suggestion from the autocomplete, but does not submit otherwise. The problem is, the form automatically submits, filled in or not, whenever I press enter. However, if I add a hidden text input box, it resolves the issue, and I can only submit the form by selecting a suggestion from the autocomplete (submission via this mechanism is handled by some jQuery). Is there a more 'graceful' way of turning off the submit-on-return feature? Adding a hidden text input that I don't actually need definitely does not seem like the 'proper' way to do this and is probably a browser-dependent fix anyways (I'm using Chrome).
The "submit on enter" is a browser specific implementation. So I don't think there is anything we can do from JS to turn it off.
You might be able to force the issue by listening to "keypress" event in jQuery, but that seems heavy handed.
Another way you could possibly approach this (in theory, never done this) is using HTML5 Data attributes. i.e. on your form, have
<form data-ready="false">
</form>
Then set that attribute to "true" when you've selected your suggestion item.
In your Form submit handler, check for that attribute before deciding to allow form submission, or use .preventDefault() to stop it from submitting to server.
Is there any event raised before the validation of fields in an HTML5 form and before the submit of this form?
AFAIK, the submit event is raised just before the submit of the form, but after the validation step, so this one fires too late for me.
Update: I have a textarea with the "required" property, and if the user has JS I want to substitute it by an HTML editor. The HTML editor syncs its contents with the textarea on submit (after the validation step), so for the browser the textarea is always empty. That's why I'm asking for an event fired before the validation. Any other way answer that solves this problem will be accepted.
No, there is no event which fires before validation happens. There is only the invalid event, which is fired after validation of an invalid field, but before the validation UI is shown (preventing the default prevents showing the browser validation UI).
In case you want to sync two fields, you have to use two events. The first is DOMContentReady and the second is the change event.
Additional info: if you hide the invalid field element, the browser can not show the validation message to the user. You can workaround this with the following code (note this assumes that you are using jQuery 1.6x and a special structure):
$('textarea.wysiwyg').bind('invalid', function(e){
//remove validation bubble
e.preventDefault();
//implement your own validation UI
$(this).next('div.wysiwyg').after('<p class="error">'+ $.prop(this, 'validationMessage') +'</p>');
});
I've been using buttons for quite some time that are structured as follows:
<button type='submit'><em class='ui-icon ui-icon-disk'/><span>Save</span></button>
The tag then uses the jquery-ui icons to show a disk image for the button. PROBLEM: As soon as users started using IE9, they were getting the server error:
A potentially dangerous Request.QueryString value was detected from the client (<em class=ui-icon)
I can only assume that IE9 is posting the form values differently - does anyone know how to stop the browser submitting certain form elements or how to resolve this issue?
PROBLEM SOLVED
If you remove the name attribute from the button element then the form will not submit its value or the value of any element within it.
Use <input type="image"> instead.
I'm building an app using Django and jQuery. For in some forms in the HTML I make AJAX calls using only jQuery so I put the form with action="#" method="" and have.
When I press the submit button in FF it works fine, nothing gets reloaded and the ajax call is made. In Chrome and Safari, however, the page get's reloaded and re-requested from the server.
Any clues?
As much as possible, Webkit and Opera try to follow the HTML5 draft. Currently, the form submission section says that actions that start with HTTP(S), even if the action="#" or action="", will cause a navigate, which should cause a new page load when the new GET parameters are added. If you want to prevent the page from reloading, you'll have to add a submit handler that prevents the default action by returning false or saying e.preventDefault().
What happens if leave action and method out? You shouldn't need those anyways if you're submitting with an ajax call.