Without using any JS libraries, is it possible to pause a form submission, run some code and then restart it?
Reason I ask is that I currently have a form that when it submits runs code that sends a request to my analytics provider. Works fine in Chrome/IE but in Firefox and Safari there is a drop out of these analytics of 60%.
The feeling is that the submission follows through before the scripts execute, hence why we are trying to pause the submit event.
Interested to hear any thoughts or insight.
You can use the submit event to cancel the form submission, do your analytics ajax stuff, and then submit the form programmatically using the submit method on the form element.
For example (live copy):
HTML:
<form id="theForm" action="#" method="GET">
<label>Field: <input type="text" name="theField"></label>
<br><input type="submit" value="Submit">
</form>
JavaScript:
window.onload = function() {
var form, counter;
form = document.getElementById("theForm");
form.onsubmit = function() {
if (typeof counter === "undefined") {
display("Starting count down (" + counter + ")");
counter = 3;
setTimeout(delayedSubmit, 1000);
}
display("Cancelling form submit");
return false;
};
function delayedSubmit() {
if (typeof counter === "number") {
--counter;
if (counter > 0) {
display("Continuing count down (" + counter + ")");
setTimeout(delayedSubmit, 1000);
}
else {
display("Count down complete, submitting form");
counter = undefined;
form.submit();
}
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
};
There I've used a count down timer rather than an ajax operation, but the principle is the same.
Off-topic: I've used the old DOM0 style of setting up an event handler there (form.onsubmit = ...). I don't recommend it, but it keeps the example simple. Setting up event handlers is one of the places where a library like jQuery, Prototype, YUI, Closure, or any of several others can smooth over browser differences (and provide added functionality) for you, it's well worth considering using one.
Just place a button in place of the submit button that runs the analytics script as a function, then submit the form with
document.forms["myform"].submit();
See this site How to submit a form through javascript.
Hope that helps.
You can listen to the submit event. Something like:
(function() {
var processed = false;
form.onsubmit = function(event) {
event = event || window.event;
if(!processed) {
if(event.preventDefault) { // cancel default action
event.preventDefault();
}
else {
event.returnValue = false;
}
// run your code
// execute the next two lines in a callback if necessary
processed = true;
form.submit();
}
};
}());
You need to attach the function to run on event "onsubmit", return a false from the event handler if you want to cancel the form submission, or use below:
function onSubmitHandler(evnt){
//run some code set some flag
if(flag is set) evnt.preventDefault(); else return true;
}
Related
There is form. Validation function is attached to submit event and it returns true/false ($(form).submit(...)).
<form name="f" class="form">
<input type=text name=ff>
</form>
$(".form").submit(function() {
if ($("[name='ff']").val()==="") {
return false
}
return true;
})
We want to run some tracking script that must be executed in case if validation return true but without changing original validation function (We have possibility to enable/disable tracking script from interface)
var _this = this;
ga('send', 'pageview', 'la-la-la', {
'hitCallback': function() {
jQuery(_this).parents('form').first().submit();
}
})
return !window.ga;
How would I do that properly?
So far I want to unbind current submit/validation function and bind my function and inside of it execute validation logic and then run my tracking code. In such way I can easy disable/enable tracking code without interrupting original behavior of logic.
However I have issues in doing this. Please advise. I want to do something like that
var fn = $(.form).submit // get attached logic - and that's does not work
$(.form).unbind('submit') // unbind it from submit
$(.form).submit(function() { // attach my code and reuse old code inside
my code...
if (fn()===true) {
my code...
}
my code...
})
You should use the following code $(form).on("submit", function(f){
//your function here. lets say you add a counter that starts from 0 and your validation functon returns its count. then you would say
if (counter != 0){ f.preventDefault(); } //this would stop the form from submitting until a condition on your function is met
});
I've made solution using hitCallback event
jQuery(".register-form").on("valid", function(f) {
var event = "/signup";
var _this = this;
ga('send', 'pageview', event, {
'hitCallback': function() {
_this.submit();
}
})
return !(ga.hasOwnProperty('loaded') && ga.loaded === true);
})
Currently I have several text inputs and then a type image submit button. On the submit button I have onmouseover, onmouseout, etc.. This sends those to a javascript function that handles change of images for a hover effect. What I wanna do is submit the form and then do some checking like do passwords match and such. Would I do something with the action attribute of the form tag to submit it to a javascript function?
Firstly I recommend using something like jQuery. It makes the code a lot easier to manage. Here's how you'd do it in jQuery:
$('form').submit(function(e) {
var validated = true;
// do form validation
if (!validated) {
e.preventDefault();
}
return validated;
});
Here's how you'd do it in pure javascript:
// function to make sure we add the event correctly no matter which browser
function addEvent(evnt, elem, func) {
if (elem.addEventListener) { // W3C DOM
elem.addEventListener(evnt,func,false);
} else if (elem.attachEvent) { // IE DOM
elem.attachEvent("on"+evnt, func);
} else { // No much to do
elem[evnt] = func;
}
}
// get first form on page
var form = document.forms[0];
addEvent('submit', form, function(e) {
var validated = true;
// do form validation
if (!validated) {
e.preventDefault();
}
return validated;
});
<form onsubmit="return cancel()"><input type="submit" /></form>
<script>
function cancel()
{
//code validation
var validated = false;
if(!validated)return false;
else return true;
}
</script>
I am trying to unbind or reenable the prevent default so my form will submit on good data.
I have tried multiple examples. Here is my code and some of the examples i tried.
This code works great for what i want to. Just the last thing and resetting the div which i can implement after i get this.
function lengthRestriction(elem, min, max) {
var uInput = elem.value;
if (uInput.length >= min && uInput.length <= max) {
return true;
} else {
var cnt = document.getElementById('field');
cnt.innerHTML = "Please enter between " + min + " and " + max + " characters";
elem.focus();
$('#ShoutTweet').submit(function(e) {
e.preventDefault();
//bind('#ShoutTweet').submit();
//$('#ShoutTweet').trigger('submit');
});
}
}
i have a jsbin set up too http://jsbin.com/ebedab/93
Don't try to set up and cancel a submit handler from within your validation function, do it the other way around: call the validation from within a single submit handler, and only call .preventDefault() if the validation fails:
$(document).ready(function() {
$('#ShoutTweet').submit(function(e) {
if (/* do validations here, and if any of them fail... */) {
e.preventDefault();
}
});
});
If all of your validations pass just don't call e.preventDefault() and the submit event will then happen by default.
Alternatively you can return false from your submit handler to prevent the default:
$('#ShoutTweet').submit(function(e) {
if (!someValidation())
return false;
if (!secondValidation())
return false;
if (someTestVariable != "somevalue")
return false;
// etc.
});
I'm not completely sure what you are asking, but if your goal is to destroy your custom submit handler, then use this:
$("#ShoutTweet").unbind("submit");
This assumes that you have a normal (not Ajax) form.
Just call submit on the form
$('#ShoutTweet').submit();
This works surely and enable form submission after event.preventDefault();
$('#your-login-form-id').on('submit', onSubmitLoader);
function onSubmitLoader(e) {
e.preventDefault();
var self = $(this);
setTimeout(function () {
self.unbind('submit').submit(); // like if wants to enable form after 1s
}, 1000)
}
I have a form, and when I submit him I execute multiple script. Here is my code:
$("#RequestCreateForm").submit(function (e) {
if ($("#RequestCreateForm").validate().checkForm() == false) { return; }
e.preventDefault();
//many scripts
//How to continue submitting?
}
Is it possible to continue submitting the form (which is stopped with e.preventDefault();) after //many scripts?
Thank you
When you call $("#RequestCreateForm").submit(), the script will just run through the event handler again, and cause an infinite loop (as Koen pointed out in a comment on the accepted answer). So, you need to remove the event handler before submitting:
$("#RequestCreateForm").on('submit', function (e) {
e.preventDefault();
// do some stuff, and if it's okay:
$(this).off('submit').submit();
});
The last line needs to be in a conditional statement, otherwise it'll just always happen, and negate your e.preventDefault(); at the top.
$("#RequestCreateForm").submit(function (e) {
if ($("#RequestCreateForm").validate().checkForm() === false) {
e.preventDefault();
//form was NOT ok - optionally add some error script in here
return false; //for old browsers
} else{
//form was OK - you can add some pre-send script in here
}
//$(this).submit();
//you don't have to submit manually if you didn't prevent the default event before
}
$("#RequestCreateForm").submit(function (e) {
if ($("#RequestCreateForm").validate().checkForm() == false)
{
e.preventDefault();
return false;
}
//other scripts
}
All solutions here are too complicated or lead to javascript error, simpliest and clearest solution I guess:
jQuery("#formid").submit(function(e) {
if( ! (/*check form*/) ){ //notice the "!"
e.preventDefault();
//a bit of your code
} //else do nothing, form will submit
});
$("#RequestCreateForm").submit(function (e) {
if ($("#RequestCreateForm").validate().checkForm() == false) { return; }
e.preventDefault();
//many scripts
// Bypass the jquery form object submit and use the more basic vanilla
// javascript form object submit
$("#RequestCreateForm")[0].submit();
}
To avoid submit loops, an additional variable should be used.
var codeExecuted = false;
$('#RequestCreateForm').submit(function(e) {
...
if(!codeExecuted){
e.preventDefault();
...
functionExecuted = true;
$(this).trigger('submit');
}
});
Here is my approach to avoid the infinite loop.
In the form, I use a "button" with an id (e.g. <input type="button" id="submit" value="submit"/>) to mimic the submit button;
In the script I have something like this:
$('#submit').click(function() {
if(//validation rules is ok)
{
$("#RequestCreateForm").submit(); //assuming the form id is #RequestCreateForm
}
else
{
return false;
}
});
return; is the same thing as e.preventDefault();
try
$("#RequestCreateForm").trigger('submit');
I got a function which checks if some input fields are changed:
var somethingchanged = false;
$(".container-box fieldset input").change(function() {
somethingchanged = true;
});
And a function which waits on window.onload and fires this:
window.onbeforeunload = function(e) {
if (somethingchanged) {
var message = "Fields have been edited without saving - continue?";
if (typeof e == "undefined") {
e = window.event;
}
if (e) {
e.returnValue = message;
}
return message;
}
}
But if I edit some of the fields and hit the save button, the event triggers, because there is a post-back and the fields have been edited. Is there anyway around this, so the event does not fire upon clicking the save button?
Thanks
When I do this pattern I have a showDirtyPrompt on the page. Then whenever an action occurs which I don't want to go through the dirty check I just set the variable to false. You can do this on the client side click event of the button.
The nice thing about this is that there might be other cases where you don't want to prompt, the user you might have other buttons which do other post backs for example. This way your dirty check function doesn't have to check several buttons, you flip the responsability around.
<input type="button" onclick="javascript:showDirtyPrompt=false;".../>
function unloadHandler()
{
if (showDirtyPrompt)
{
//have your regular logic run here
}
showDirtyPrompt=true;
}
Yes. Check to see that the button clicked is not the save button. So it could be something like
if ($this.id.not("savebuttonID")) {
trigger stuff
}