I am using a beforeonload function but I want when the user submits the form beforeunload shouldn't work. Here is my code, which works fine in Chrome but not in Firefox.
window.form_submitted = '';
jQuery(document).ready(function() {
jQuery(window).on('beforeunload', function() {
if (form_submitted == '') {
return "Are you sure to leave that page";
}
});
});
jQuery('#form').on('submit', function (e) {
e.preventDefault();
jQuery(window).off('beforeunload');
form_submitted = 1;
site_redirect(resp.payment_url);
}
return false;
});
You have several syntax issues, and you have to place the submit block inside the DOMReady handler, otherwise JS will attempt to bind the event to an element which doesn't yet exist in the DOM. Also note you can remove the the global flag variable as you are unbinding the beforeunload event on form submission. Try this:
jQuery(document).ready(function($) {
$(window).on('beforeunload', function() {
return "Are you sure to leave that page";
});
$('#form').on('submit', function (e) {
e.preventDefault();
$(window).off('beforeunload');
site_redirect(resp.payment_url);
});
});
Also note that by doing a redirect when the form is submit (assuming that's what the site_redirect function is doing) then the content of the form will be lost.
Related
I'm looking to add a Google Analytics event to a form that I can not access the inline html, so I can not add it as a onClick="" event straight to the html.
So my solution has been so far:
$(function() {
$(".form_submit input").on("click", function() {
dataLayer.push({
"event": "Kontakt",
"eventCategory": "Submit",
"eventAction": "Kirjuta meile",
"eventLabel": "Kirjuta meile"
});
});
});
Althought this does not seem to work as clicking the submit button possibly stops all functions and refreshes the page.
How can I run the function before submit and then submit the form after? I've been suggested using preventDefault(); and the after calling the submit again with $('form').one('submit', ... but have been unable to implement this due to lack of skill.
View site: http://avrame.com/en (the form is at the bottom of the page)
Any suggestions appreciated.
You can actually push functions to dataLayer, and it will be executed after the first event.
I would do
delegate the submit watch event to document level (see Jquery .on() submit event)
intercept the first submit, pushing event and preventing default behavior
and insert a function inside dataLayer, which submits the form again, but this time it won't be halted
The code:
window.submitGA = false;
$(function() {
$(document).on('submit','.form_submit',function(event){
if (!window.submitGA)
{
window.submitGA = true;
dataLayer.push({
"event": "Kontakt",
"eventCategory": "Submit",
"eventAction": "Kirjuta meile",
"eventLabel": "Kirjuta meile"
});
dataLayer.push(function(){
$('.form_submit').submit();
});
event.preventDefault();
}
});
});
Working solution ended up using this callback method:
var form = document.getElementsByClassName('.footer__contact form');
form.addEventListener('submit', function(event) {
event.preventDefault();
setTimeout(submitForm, 1000);
var formSubmitted = false;
function submitForm() {
if (!formSubmitted) {
formSubmitted = true;
form.submit();
}
}
ga('send', 'event', 'submit', 'Saada', 'Kirjuta meile', {
hitCallback: submitForm
});
});
Reference from: https://developers.google.com/analytics/devguides/collection/analyticsjs/sending-hits#hitcallback
<a href="#" class="submit-form show-field" data-show-field="#Product" >View products</a>
This link is dynamically added to the dom, and I fire a jQuery function on click
$('body').on("click", 'a.show-field', function(e) {
if (!$(this).attr('data-show-field')) {
return;
}
$($(this).attr('data-show-field')).parent().show();
e.preventDefault();
});
The event fires fine, but page redirects. I cant understand what I've done wrong
You event is fired before you can prevent it.
$('body').on("click", 'a.show-field', function(e) {
e.preventDefault();
if (!$(this).attr('data-show-field')) {
return;
}
$($(this).attr('data-show-field')).parent().show();
/*e.preventDefault(); */
});
If the page redirects then I think your listener is not working well.
Here you are a plunker with a use case.
With and whithout document ready
I don´t know where you put your code, but if it's outside the "document ready" that listener never fires.
$('body').on("click", 'a.show-field', function(e) {
alert("First attemp is attached");
});
$(document).ready(function() {
$('body').on("click", 'a.show-field', function(e) {
alert("Second attemp is attached");
if (!$(this).attr('data-show-field')) {
return;
}
$($(this).attr('data-show-field')).parent().show();
e.preventDefault();
});
});
PD: sorry for my english
I'm trying to figure out how to change behaviour of a button using AJAX.
When the button is clicked, it means that user confirmed order recently created. AJAX calls /confirm-order/<id> and if the order has been confirmed, I want to change the button to redirect to /my-orders/ after next click on it. The problem is that it calls again the same JQuery function. I've tried already to remove class="confirm-button" attribute to avoid JQuery again but it does not work. What should I do?
It would be enough, if the button has been removed and replaced by text "Confirmed", but this.html() changes only inner html which is a text of the button.
$(document).ready(function () {
$(".confirm-button").click(function (b) {
b.preventDefault();
var $this = $(this);
var id = this.value;
var url = '/confirm-order/'+id;
$.ajax({
type: 'get',
url: url,
success: function (data) {
$this.empty();
$this.attr('href','/my-orders/');
$this.parent().attr("action", "/my-orders/");
$this.html('Confirmed');
}
})
});
});
The event handler will be still attached to the button, so this will run again:
b.preventDefault();
which will prevent the default, which is opening the href. You need to remove the event handler on success. You use the jQuery #off() method:
$(".confirm-button").off('click');
or more shortly:
$this.off('click');
You can add to your success function something like: $this.data('isConfirmed', true);
And then in your click handler start by checking for it. If it's true, redirect the user to the next page.
$(".confirm-button").click(function (b) {
b.preventDefault();
var $this = $(this);
if ($this.data('isConfirmed')) {
... redirect code ...
}
else {
... your regular code ...
}
}
You need to use .on() rather than .click() to catch events after the document is ready, because the "new" button appears later.
See http://api.jquery.com/on/
$(document).ready(function() {
$('.js-confirm').click(function(){
alert('Confirmed!');
$(this).off('click').removeClass('js-confirm').addClass('js-redirect').html('Redirect');
});
$(document).on('click', '.js-redirect', function(){
alert('Redirecting');
});
});
<button class="js-confirm">Confirm</button>
Not sure if this has been answered elsewhere, (apologies if so!)
But...
I have an edit field which is validated on the .change() event.
what I want to do is this:
if the user has mouse-pressed the save button directly after typing, .change() fires first, then the button .click() fires after - I want to prevent the .click() event firing if the entered value doesn't get validated, once the popup has been cleared.
This is an example of what it is doing now, but this still allows other buttons to be pressed.
validateRetention(e) {
if (someCondition) {
return true;
} else {
return false;
}
}
$('input[type="number"]').change(function () {
if (!validateRetention(this)) {
alert("bad data entered");
}
}
You need to prevent default action:
$('form').on('submit', function(event) {
if(isNotValidForm) {
event.preventDefault();
// make validation balloons
}
});
To use jquery on method instead of deprecated live method in this simple case
$("#myForm").live('submit', function() {
alert("submit");
});
would be
$(document).on('submit', '#myForm', function() {
alert("submit");
});
Now, how to do the same with "pure" on, without extra things(like e.g. assign id to form and then use that id as a selector or smth like that) in this case
$("#myInput").parents("form").live('submit', function() {
alert("submit");
});
thanks
Run the event handler on all form submissions, then test to see if the form contains the input you care about inside it.
jQuery(document).on('submit', 'form', function (evt) {
if (jQuery(evt.target).find('#myInput').length === 0) {
return;
}
// Otherwise run the rest of the function normally
});