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.
Related
I have created a simple Google Form with two multiple choice answers (Yes and No). Image below.
The form works fine when I select an answer then click the submit button.
I'm wondering if it's possible to submit the form immediately when an option is selected? Then refresh the page.
I've been reading about triggers here but not sure where to start, or if it's even possible.
Google Forms is my only option at current, I know this is possible via other methods.
Any advice is appreciated.
I'm wondering if it's possible to submit the form immediately when an option is selected? Then refresh the page.
No, it's not possible. The only trigger that works on the form respondent view is on form submit.
The workaround is to create your own form. If you want to work with Google Apps Script, you should use the HTML Service.
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 needed to show some preexisting data from a table and but needed to disable them to prevent user from editing them. So i disabled them
$form -> getElement("elementname") -> setAttrib("disable", true);
When I submit the form, I found out, that the form element does not get submitted at all, just because it was disabled. I confirmed this when I tested removing the disable options.
What is happening? Am i doing something wrong? How to solve this?
This is by design, disabled elements do not get submitted with the form.
What you are doing is actually a null practice, no matter what you do to that form in put it will be editable by the end user. You simply cannot trust form input - even hidden fields - to not be tampered with.
Your best bet is to just display the information to the user and load it again after the form has been submitted; at worst store it in a session.
This worked like a charm for me.
It prevents the element from being edited and will pass it through the post.
$this->username->setAttrib('readonly', 'true');
I handle these type of scenarios using hidden elements. Add a hidden element with the same content that is there in your disabled element. When the form is posted, use the value from the hidden element.
But be cautious that the use can modify the value of the hidden element using Firebug or other tools before submitting the form. Always check the form values again before processing.
Below is an image of the sections I'm talking about:
What I'm doing is very similar to eBay:
1) a form at the top for "search terms" and then a category.
2) filters on the left that a user can click to refine the search even further.
3) sorting those results.
I played with eBay a bit and it looks to me like they are posting back every time a filter (box on the left) is clicked, or when they sort the results. Do they then store a copy of all the "settings" used to display the page in the form and use that to post back on a submit click?
How can I emulate this functionality? I don't like the idea of wrapping an entire page in a form element... it seems dirty. Should I use jQuery to collect all of the user input and then somehow pass it along?
I'm not sure how eBay does it, but if it were me, I'd have some javascript object that keeps track of all the search options on the page. Each of the elements you've highlighted would fire an event that would cause my javascript object to update this information, send it via AJAX to a controller action, and update the results area with the changes.
That's a somewhat simplified version of events, but hopefully it can put you on the right track.
I've decided that the best solution is to use jQuery Ajax. Otherwise, I'd have to make sure that every peice of user input is a form element and wrap the entire page in a form tag.
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; }});