I need to have a form submitted using the enter key, however, I have to use a BUTTON instead of SUBMIT as the type in order for the page to not refresh. How can I get my BUTTON to act as a SUBMIT and be executed whenever someone pushes their enter key?
<form>
<input type=text ...>
<input type=button ...>
</form>
A lot of the information I found about this mentions Netscape/IE/lots of outdated material.
This is my HTML output, I'm looking to hide the submit button and use ENTER:
http://i.stack.imgur.com/Ohepe.png
with Javascript enabled
<input type="button" onclick="this.form.submit()" ... />
should work
I have to use a BUTTON instead of SUBMIT as the type in order for the page to not refresh
Nah. Use a normal submit button that refreshes the page. (And ideally, for accessibility, make it work!) Then add progressive enhancement to replace the submission action of the form with something smoother when JS is available. Use return false (or event.preventDefault() in the DOM 2 Events model) to stop the form submitting in this case.
<form id="foo" method="POST" action="dosomething.script">
...
<input type="submit" value="Do something"/>
</form>
document.getElement('foo').onsubmit= function() {
beginAJAXSubmission();
return false;
};
Catching the submit event of a form is generally better than trying to pick up click on buttons, because it will always fire when the form would normally be submitted, including on Enter keypresses. click on the first submit button in a form will usually be fired on an Enter keypress, but there are cases (depending on number of controls in the form and what browser it is) where it doesn't happen and so you can end up falling through to actually submitting the form.
as other said, you have to use Javascript. I recommend JQuery framework.
But i don't understand the refresh thing?
Normal way is you hit submit and your form will be sent over a request to the server.
Server process the data and return a response (HTML/JSon..etc) this response will normally be redirect to a result page (to avoid the famous warning about re-post on refresh).
Now if your form is only a little piece of a bigger page, you might want to use ajax to post the little form and then take the result and update your DOM.
All this said, nothing prevent you to use submit type for the button, it is actually the best way to make your enter key defaut to this action. All you have to do is to use Jquery and intercept the submit of your form and make an ajax call instead of going the normal way.
you will find plenty of example to use JQuery since its probably the most used javascript framework.
Hope it help
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.
As a security measure, if I replace the <button type="submit"> with a <a class="button"> will the form still work for bots?
Normally yes, unless you check server side for that button being submitted along with the form.
If the form still has an action attribute attached to it, then it can still be submitted.
Try this for example:
document.getElementById("yourform").submit()
I have a really simple form that allows a user to input an email address here:
<form method="post" action="http://www.mydomain.com/page2/">
<input type="email" name="email">
<input type="submit" value="Submit">
</form>
This works correctly and it takes the visitor to www.mydomain.com/page2 when the submit button is clicked.
I am trying to get it to email me this input email address also when the submit button is clicked. I understand how to email using PHP but can the action have two urls?
Or is there a simpler way of doing this?
On /page2/ access the email in the global variable $_POST['email']. And then you can send it to yourself with PHP mail(). Example:
mail('myemail#domain.com', 'Someone submitted my form', 'Their email was: ' . $_POST['email']);
If you are stuck somewhere else, let me know and I can update the answer.
Once a form is submitted, you are no longer on that page. You've navigated away.
The other way you can do this is submit the first action via AJAX, then submit the form naturally to the second destination. I would suggest using jQuery to make your AJAX calls since most of the AJAX code is already there for you to use.
Another option is to have page2 be a php script, and have it perform the two actions once it receives the form data. See: Post to another page within a PHP script
I understand how to email using PHP
Then I would recommend writing some PHP code that sends the email to you.
but can the action have two urls?
No. A web browser can't make two requests at the same time. Which response would take precedence?
Nor does it need to. Now, you have a target already:
http://www.mydomain.com/page2/
Don't you control that page? That would be the page on which you'd put your PHP code for sending an email. If you don't control that page, then you would want an intermediary page. Something like:
sendmailandredirect.php
(Named solely to illustrate intent, you can call it what you like.) What this page would do is send the email, then issue a redirect to your final target. Something like:
header('Location: http://www.mydomain.com/page2/');
In effect, there would be "two urls" but they're invoked in serial instead of in parallel.
If you wanted to keep the code seperate and the action url as /page2/ you could fire off an ajax request on submit to your sendmail handler.
I have a little problem here. Actually, more of an annoyance.
I have a form on my index page that has a small search form:
<form action="search.php" method="post">
<input name="search" type="text" />
<input type="submit" name="submit">
now on the search.php file I just use the $_POST['search'] to retrieve the value that I'm searching. This file also displays the actual search results, which I can click on to go to that page.The search is actual done on the database. Also, because my search returns the top 10 random results from the DB, if I hit the 'back' button and confirm the warning, the search will be executed again, and will return a different set of results.
The problem, as you know, is that when you click on one of the search results and then hit 'back' on the browser, you get that browser warning about 'To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier.'.
What's the easiest way to prevent this from happening? I looked into that PRG technique but I'm not sure how to implement that.
Any help would be great.
Thanks.
Bruno.
Is it OK to use GET method here, users won't see warning if form sent by GET method.
Last night, I did a quick spike to try and implement username/password autocomplete in my GXT application. By "autocomplete", I don't mean Ajax-style autocomplete, but rather browser-based autocomplete. The best information I found on this via google is in the following post:
http://osdir.com/ml/GoogleWebToolkit/2009-04/msg01838.html
I didn't use this technique because I'm using GXT and didn't want to lose the look-and-feel of my login form.
I was successful in getting everything to work in Firefox (it populates both the username and password). In IE, it only populates the username, not the password. In Safari/Chrome, it doesn't work at all.
Here's how I did it:
Created a hidden HTML form on my HTML page that embeds GWT.
<form method="post" action="javascript:void(0)" style="display: none">
<input type="text" id="username" name="username" value=""/>
<input type="password" id="password" name="password" value=""/>
<input type="submit" value="Login" id="login"/>
</form>
When a user clicks on the "Login" button in my GWT application, populate the fields in this hidden form and "click" on the Login button (which will do nothing since the action="javascript:void(0)".
// Set the hidden fields to trigger the browser to remember
DOM.getElementById("username").setAttribute("value", username.getValue());
DOM.getElementById("password").setAttribute("value", password.getValue());
clickFormLogin();
...
public static native void clickFormLogin() /*-{
$doc.getElementById("login").click();
}-*/;
This works in Firefox 3.5 and prompts me to save the user/pass at the top of the screen. I believe I know why this doesn't work in Safari/Chrome and that's because the form's action doesn't go anywhere and the form is not submitted. If I change the action to be an actual URL and show the form, clicking on the form's Login button will save it in those browsers.
After typing this up as a question here, I got to thinking this might make a good blog post. Therefore, I copied everything and added a bit to my blog:
http://raibledesigns.com/rd/entry/browser_based_username_password_autocomplete
Summary and Question
While I'm glad I got it working in Firefox, I'm disappointed with IE's lack of password autocompletion. More than anything, I can't help but think there's a way to make this work in WebKit-based browsers.
Anyone know how to implement cross-browser username/password autocomplete in GWT (specifically GXT)?
Use persistent Cookies instead.
IE do save passwords, if user chooses to, but it works different. You need to type at least the username so it will autocomplete the password.
You need a plain vanilla html submit button. I think that will fix it.
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/2b2ce0b6aaa82461