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
Related
I'm trying to disable some buttons on submit of form but I can't seem to get the function to work with my setup. Here is my Javascript:
JS
$(document).ready(function() {
$("form.upload-data-form").submit(function(e) {
e.preventDefault();
debugger;
});
});
HTML
<%= form_for #changeset, upload_path(#conn, :create), [class: "upload-data-form", multipart: true], fn f -> %>
That ends up having this class .upload-data-form When I submit the form the debugger in my Javascript is not working. What am I doing wrong?
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to event handlers. try delegating events on children of the document object
$(document).on("submit","form.upload-data-form", function(e) {
e.preventDefault();
debugger;
});
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("form.upload-data-form").submit(function(e) {
e.preventDefault();
debugger;
});
});
I'm trying to create a function in javascript that gets an alert to show up when you click the submit button. I managed to get the alert to show but it only pops up when you open the page but doesn't work when you click the submit button.
heres the function i created in javascript
function orderTics(){
//creates alert
var orderTotal=35;
alert("Your order total is $"+orderTotal);
}
I called the function in html like this:
<script>
orderTics();
</script>
I'm still very much a beginner so any and all tips will be greatly appreciated
You can use the below.
$("#FormSelector").on("submit", function() {
//Your code goes here
});
You could use the on submit function like this:
$("form.class-name").on("submit", function() {
alert("I've been submitted.");
});
Vanilla JS onsubmit event:
document.querySelector("form.class-name").addEventListener("submit", function() {
alert("I've been submitted.");
}, false);
You can also use the event.preventDefault(); method to prevent the form from going to another page, like this:
$("form.class-name").on("submit", function(event) {
even.preventDefault();
alert("Do stuff");
});
Vanilla JS onsubmit event with event.preventDefault(); method:
document.querySelector("form.class-name").addEventListener("submit", function(event) {
event.preventDefault();
alert("I've been submitted.");
}, false);
NOTE: when you use the event.preventDefault(); method the form won't redirect to the target page, even if you click the ok button in the alert box.
Finally you can just use the click event on the submit button, like this:
$("button.submit-button-class").on("click", function() {
alert("I've been clicked!");
});
Vanilla JS onclick event:
document.querySelector("button.submit-button-class").addEventListener("click", function() {
alert("I've been clicked!");
}, false);
Call your function like this:
<input type="button" value="myButton" onclick="orderTopics();">
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>
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.
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
}
});