I want to send POST request every time user focuses out of an input using thymeleaf, i've seen many examples of ataching form tag with button marked with type="submit" within using th:action, but i cannot figure out is there a way i can attach input into form tag and track only focusout events.
It would be greatly appreciated if someone could clarify if i can configure what type of events form tag can track. I have read that you supposed to make button marked with type="submit", but also seen input marked the same way, that gave me hope that maybe i can somehow attach the action to focusout event.
So, as #SlavaIvanov said it is no realy possible, so if you face the same task you would need to use JavaScript fucntions or some other client technology, I used JS
Related
I would like to know what the return false statement does in this excerpt of HTML code. I don't understand why it isn't just the submit call. I would especially like to know WHERE false is being returned to. The excerpt is from:
http://www.autozone.com/autozone/storelocator/storeLocatorMain.jsp
<\a class="actionButton orange"
onclick="document.storeLocatorForm.submit();return false;">
<\span>SUBMIT<\/span>
<\/a>
I know it must have a simple answer but I haven't had much success googling it. I always get people asking much more complicated questions. I took the HTML and JavaScript tutorial at w3schools but it's been a while so I don't really remember how this fits in.
Returning false in an event handler prevents the event from triggering the "default behavior" of the underlying control.
It's common to see this on links:
<a href='/something/useful' onClick='jsMagic();return false;'>
link text
</a>
The on-click executes your function and then also prevents the user from navigating to /something/useful.
There is a form somewhere on the page called StoreLocatorForm. When the link is clicked, it submits the form data and processes it however the function is programed to.
THe return:false; part is to keep it from not submitting before you actually click the link.
Due to an issue relating to a horrible mobile device (that work has given me no choice but to work with) I have to stop the use of the enter key from registering in form in HTML. The only way I'd like the data to be submitted is when the submit button is pressed.
Hope this is enough to help work out my problem! If not feel free to ask more.
See here for an example.
Try this submit button:
<input type="button" value="Submit" onclick="document.forms[0].submit();" />
Instead of using type="submit", type="button" won't bind the enter key to this button.
You can use an onsubmit handler to prevent the form from being submitted in cases where it wasn't submitted in the way you wanted it to be. Just return false from the handler to cancel the submission.
I'm building an HTML multiple-choice quiz and am aware of a technique which would let me use multiple submit buttons - one for each answer to an individual question. I could then process the form in PHP using submit button values and determine which answer the user has selected. The reason for using submit buttons is so that they can be styled appropriately.
However, I'm wondering if this is bad practice from an accessibility perspective? Would it be better to use an individual form for each answer to a question? There are plenty of questions on here about how to use multiple submit buttons but they don't seem to address this point.
It's absolutely fine, and in a lot of cases can improve the usability of a form. Be careful however, as there are a couple of gotchas:
If the enter key is used to submit the form, the submit behaviour is undefined. HTML5 does define this behaviour, and it specifies what most browsers already do in this situation: The first submit button in the form should have its name/value sent as part of the submission.
However IE<=8 don't send the name/value pair for any submit button when the enter key is used to submit the form.
So, you have to be aware that there needs to be a "default" action for the form, and that has to be the first submit element present.
You can't use this technique to submit to a different action based on which button was pressed. Javascript can theoretically solve this, but you shouldn't do that (a good mantra is, don't use Javascript to solve a non-Javascript problem)
What will you do if the form is submitted using the Enter key on the keyboard, and none of the submit buttons is in the data you receive server-side?
I understand that double posts has been a problem with forms forever.
I am using the token server-side method to handle this issue, but I find that it doesn't seem to work flawlessly. I have the system set to create a unique token for every form, and then record that token in a SESSION after it has been posted.
The SESSION is actually an array of every form the user has ever posted (to be reset when the SESSION expires), and on each submit the system checks in_array() to see if that form has ever already been posted... if so then it stops them.
Seems like in production the system cannot record the completed token into the SESSION quick enough to deal with double clicks on the submit button. So revisiting an old page is handled fine, but the immediate double click of the submit creates a problem.
Not sure what I can do to fix this issue.
How about disabling the submit button immediately upon clicking (via Javascript, with an onClick handler)? This obviously won't fix all issues, but it might cover the cases where the system isn't quick enough to record the token into SESSION.
I have had this issue as well with something internal for the company I am working for. In my experience people click multiple times because they don't think anything is happening. What I have done is to remove the ability to submit the form and display some sort of message saying that the information is being processed.
Pop-up divs and just disabling the button work well.
I had same problem and I resolve with jQuery.
I added class singleClick in submit button there I would like to have single click and also added some javascript code
<input type="submit" class="singleClick" value="Send Request">
$(function () {
$('.singleClick').on('click', function () {
$(this).attr('disabled', true);
});
});
I've got a form like this:
<html>
<body>
<form onSubmit="alert('Just got submitted');">
<p>
Hello: <input class="field" type="text"/><br/>
Goodbye: <input class="field" type="text"/><br/>
</p>
</form>
</body>
</html>
which in one browser submits happily on user pressing enter from one of the fields, and in another browser, doesn't. Oddly, if I remove the second field, it works in both.
My question is really - is it okay to have a form with no explicit submit element? I really like this behaviour.
Having no explicit submit is poor user experience. Your typical end user has, over the past decade, learned a set of principles for website form interaction. Namely, you can tab between fields, you can select lots of checkboxes, and you have a click a button to actually submit your data.
I've tried developing forms in the past that automatically update with JavaScript, and I got countless complaints from users. They wanted a button or they didn't believe it was working. So in that particular case, I kept the form working as it originally had, but added a submit button that really didn't do anything. They were happy.
These days I just build out my forms with normal submit buttons. Not only do users expect it, but it allows for much cleaner progressive enhancement between non-JS enabled browsers.
It's certainly more than possible to have a form with no submit element, especially if you use JavaScript events to submit the form. I highly suggest you use the onkeypress event to detect the "enter" key being pressed rather than depending on the browser to just accept the "enter" key if you make a form with no submits, to make it cross-browser compatible.
However, I think it's bad form to leave out a submit button of some sort. (It doesn't necessarily have to be an input of type "submit", could be "button" or an image you click.) It's just a standard to have forms that people fill out submitt via a button, and you're taking that away, which could confuse many users who are used to a button. It definitely violates the principles of Don't Make Me Think by presenting an alternate form to the norm.
It's not a good idea. You point out the reason yourself - it doesn't work in all browsers. Also, it's not what people expect, so it may confuse people.
It depends on what you mean with "ok".
If you mean valid (x)html, well it's no problem at all, but on the user side, it's a usability issue. But it also depends on the target audience of your website. If its for tech savvy people, then it's ok.
You could create an input button like this:
<input type="button" onclick("doSomething()") />
The doSomething() would be a function in Javascript that would send your form data to a server-side script. This way you wouldn't have a submit behavior.
Submitting a form on 'Enter' with jQuery?
Also, I'd leave the button in the form, but hide it with javascript ($('#submit').hide()). It means that if the user has disabled script or f.ex. uses some other device, he'll see the default way to submit the form.
If you want to have two buttons which generate two different behavior when submit. what you can so is something like that:
or you can put the form submit inside function1() or function2()