I replaced the type="submit" on my form with a type="button", to prevent form submits when the user presses enter. Will this prevent enter from submitting the form in all browsers?
Some browsers will still automatically submit when enter is pressed. If you really need some feature apparented to this, you might rather implement your own filtering with the onSubmit event handler.
Then, you can force the submission of the form by actually calling the submit method from Javascript. Of course, you would need to set a specific flag to allow your submit to go through this time. Something along the lines of (with jQuery)
//flag definition
var form_is_ready = false;
//event handler for the form submission
$('#your-form-id').submit(function() {
if (!form_is_ready) {
return false;
}
});
//function you have to call to actually submit the form
function do_submit() {
form_is_ready = true;
$('#your-form-id').submit();
}
That's just a crack shot piece of code written on the fly. You should adapt it to suit your needs.
This is a poor decision for usability and should be avoided.
It's seems not. This question suggests that submission will still happen in Chrome.
Related
I'm looking for a way to use a button on my website as a trigger for a google script. The script needs to be called with an email input:
scripts.google.com/.../exec?[email]
Using a text input field that is submitted with a button seems the simplest.
Is it possible for the button's link to change to reflect the email typed into the text field?
NEW: Is there a HTML/CSS only way to do this?
Is it possible for the button's link to change to reflect the email typed into the text field?
Yes. You could use oninput to do it live, or a lesser version of that such as onblur or onchange if it didn't need to change right as the user typed it. You could also simply go with onclick, and change it prior to submission ensuring that you return true during the click event handler.
Are there better ways to approach this?
This would just be an opinion, there are certainly many ways to approach this, however especially given the lack of code presented, this isn't really answerable without context. One route could be to use an ajax request with XMLHtppRequest. It depends on what you need to get back.
//get email
<input id="mail" type"email" placeholder="en">
//sent data
<button onclick="submit();">click to sent</button>
<script>
//get input data
var email = document.getElementById("mail").value;
//button clicked start function
function submit(){
window.location.href = "you'r url"+ "/"+ email;
}
</script>
Using the JEditable JQuery plugin, and everything seemed to work fine in Firefox. However, in Chrome whenever I selected something out of a JEditable dropdown, or clicked Enter when editing a JEditable textbox, the form JEditable creates on the fly was being submitted, and my entire page was refreshing. I didn't want that to happen, as I've got it configured to call a custom function that makes an Ajax call to do the update. How do you keep the JEditable form from being submitted when changing the value of one of the form inputs?
My understanding from researching online is this is a Webkit-browser issue, not just a Chrome issue, as it seems Webkit-based browsers automatically submit forms when inputs in the form are changed.
After much trial-and-error I found one way to get around this is to use JEditable's bind function. The bind function gives you access to the form JEditable creates, and you can hijack the onsubmit event with that.
So first, create a function to override the form's onsubmit event.
var bindSubmitDisableWebkitSubmission = function(settings, self){
$('form', self).attr("onsubmit", "return false;");
}
Then bind that function to the various JEditable events that you don't want to submit the form.
$.editable.types['select'].plugin = bindSubmitDisableWebkitSubmission;
Note that using preventDefault and returning false (see below) didn't work.
function bindSubmitDisableWebkitSubmission (settings, self) {
$('form', self).submit(function(e){
e.preventDefault();
return false;
});
}
Much thought has already gone into practices around validating the user input in a form. I have a programming question about the "inline validation", also called "onblur validation". (A research article about the benefits of inline validation can be found here).
Let's say I have a very simple form with 5 inputs and 1 submit button at the bottom. The user focusse on the first field first. After pressing tab or manually clicking on it, he goes to the second input. This triggers the validation of input field 1. Depending on the techniques used, this might take a few seconds (for example, if a server postback is required to truly validate the field).
MY problem lies with the last field. User will be expecting to see the inline validation after they're done. But users do generally not tab if the next ui element is a button instead of yet another input element. Thus, the onblur validation will not trigger and the user gets no feedback, which they might mistake for erronous input. If they manually click on the submit button, the validation will trigger... but it will also trigger the total form submit, likely leading to another page if all is valid. Now, some users might be smart enough to realize this is onblur validation and they should "click anywhere" to trigger the validation, but I can't really count on that.
I thought of one solution: using the keypress event instead of the onblur event for the last input field of a form. However, the article cited above states it is better to avoid this kind of validation. It would also drastically increase the amount of validation to be done (one time for every keypress)
What are your thoughts on trying to mimic the nonexistant event "user stopped typing but did not focus out of input element"? Can it be done by combineing the keypress event and a timer? (Like, if user did not type anything for 2 seconds, then validate?)
var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in ms
$('input[type="email"]').keyup(function(){
clearTimeout(typingTimer); //reset the timer
typingTimer = setTimeout(validateEmail, doneTypingInterval);
});
Change validateEmail to the name of the function that validates the email input.
I have a legacy form that I'm trying to update to do simple HTML5 form validation.
Currently, it uses reCaptcha, and invokes a verify() function that validates the reCaptcha challenge before forwarding the contents of the form. I would like to ensure that the form passes HTML5 validation before continuing with the reCaptcha processing, and display the appropriate error messages that the browser would use by default.
The iframe containing the form as the <!DOCTYPE html> doctype. The input fields have the required attribute.
The submit button has the following:
<input type="button" id="script_send" onclick="javascript:verify(this.form);" value="ENVIAR">
The verify script has the basic structure.
function verify(theForm) {
form = theForm;
/* Recaptcha processing */
}
I tried using
if (!form.checkValidity()) {
return false;
}
and even though the form was not submitted, I get no errors displayed on the screen, showing the user what fields they should be providing.
I have seen this jsfiddle [http://jsfiddle.net/5ycZz/] used to demonstrate the checkValidity() function, but even that does not display the visual error cues that I would expect to see, in Chrome, IE10 or FF.
Try setting the submit event on the form instead of putting a click action on the submit button. The submit event fires AFTER validation so it should only happen if all other constraints passed. This also means you wont have to call form.checkValidity() in your verify function.
<form onsubmit="verify(this)">
...
</form>
This solving trouble:
if (!form.checkValidity()) {
form.reportValidity();
return false;
}
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);
});
});