How would you go about inserting an OnSubmit attribute to a form via Javascript only?
I'm pretty new to javascript so if you're able to provide detailed example code, that would be most helpful!
Here's the situation: I'm using a hosted signup page through Chargify (a payments platform) in order to process credit cards for my app, and then send the user back to my own thank you/confirmation page.
Tracking the entire funnel through google analytics is proving quite elusive due to changing domains (my domain -> Chargify.com -> my domain), since the credit card page is hosted by Chargify on their own domain.
I'm getting close: I've been able to get cross-domain tracking working (chargify.com page gets logged in Google Analytics), and can link from my domain to chargify by adding the following onclick attribute to my signup link:
onclick="_gaq.push(['_link', 'http://my-domain.chargify.com/subscriptions/new']); return false;"
However, I cannot do the same thing on the way back (Chargify -> Confirmation page) because I do not have access to the Chargify hosted payment page code, and because the user is taken to my confirmation page via a form submission, not a normal link.
Partial Solutions (need your help to finish this up):
Chargify allows several options for their hosted pages, one of them being to add custom javascript that gets inserted right before the </body> tag in a <script> tag.
I found some resources in the Google Analytics documentation on how to link pages, and adding the following to the Chargify form tag might work: onsubmit="_gaq.push(['_linkByPost', this]);"
(source: https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._linkByPost)
The form tag does not currently have an onsubmit attribute, it's just this: <form action="/my_product/subscriptions" class="new_submission" id="hosted_payment_form" method="post">
Is there a way to use Javascript to simply append this attribute to the form tag? If you'd be able to provide a detailed example of what code I should insert inside of the <script> tag, that would be extremely appreciated.
window.onload = function() {
var form = document.getElementById('hosted_payment_form');
form.onsubmit = function() {
_gaq.push(['_linkByPost', this]);
}
}
I believe the above example is similar to what you need. We use document.getElementById to grab a reference to your form. Then set the onsubmit property to the code you want executed before the form is submitted. Remember to put this inside the window onload event if this JavaScript is executed before the page is rendered to ensure the form is built.
Related
I received a custom tag by a marketing firm to place on a Wordpress site for tracking clicks on certain buttons. I am using the Elementor page builder on the site and have given each button a unique button ID. I am new to Google Tag manager by the way. From my understanding, I would need to use the custom html tag option so that I can use the marketing firm's custom tag with their tracking code. When creating the custom html tag in GTM, I'm presented with html box and am stuck as to how to get the tracking code to fire. I've set up the trigger to correspond with the button ID but that isn't enough. Here's what I've tried:
I've tried just entering (see below) in the HTML field: (the example is for the newsletter button). I thought maybe there is some "magic" that tag manager uses to build the event listener but I couldn't get anything to fire.
'''<noscript><img src="https://tags.srv............." width="1" height="1"/></noscript>'''
Next I tried to inject something like this to no avail (see my note as I was guessing here):
<script>
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('#newsletter_send_button a').click(function(){
//tracking code here
//for example Facebook Pixel:
fbq('trackCustom','newsletter_send_button'); <<<HERE IS WHERE I'M UNSURE
OF WHAT TO PUT IN.>>>
</scipt>
<noscript>
<img src="https://tags.srv...................."
width="1"
height="1"/>
</noscript>
Google tag manager is installed on the site. I see my universal tag firing so I know I'm good. Now how do I add this custom tracker to individual buttons on the site? Maybe I'm headed in the wrong direction but I think I have to use the Custom HTML option in Google Tag Manager because the tracker info is being sent to the marketing agency and not the business's individual GTM account. I'm just at a loss. I "think" the tracker is a Facebook pixel because of the tag (just guessing here). Any ideas?
In case anyone else runs across this thread, I as able to get it to work. If a 3rd party agency (marketing) sends you a img pixel, use the Custom Image tag in Google Tag Manager and input only the URL (no img tag or height/width) in the Image URL area and leave Cachebusting on. Sounds simple after you figure. Also, if you are using Elementor forms and are looking to fire the tag based on a successful form submission, one word of recommendation is to create a separate redirect page and set the trigger to be the page url of the redirect page. You can use the div.elementor-message-success css tag as the element trigger but that works for all successful form submissions and getting GTM to read the form ID after the submit button has been clicked didn't work for me hence why I just used the redirect url as the trigger.
I want to put the tracking code on my website but the instructions on Google's Instructions tells you how to do it by a normal link. I have my form set up with the post method that goes to a php include that emails the form results and then it goes to an thank you page. How do I set it up for the submit button/form to properly work?
You actually use a javascript onClick function, which is added to your form's submit button.
If you scroll down a bit on the link that you posted (https://support.google.com/adwords/answer/6095821) you should see the section titled "Tracking clicks on links or buttons as conversions". Look for and click "Setting up an onclick handler for conversions" and you will see the instructions.
Nowadays there is a built-in way for AdWords to do async tag firing. It is described in this article.
In brief you would need to change setting in AdWords it would generate you async tag, which you load with the DOM, and activate with onClick handler.
Example:
<a onclick="goog_report_conversion ('http://example.com/your-link')"
href="http://example.com/your-link">Download now!</a>
I'm working on application which uses iframe overlays in addition to its main window. One of these overlays is used to modify user settings, some of which affect the display of the main window. So after saving these settings I would like to update the main window so that the user can see their new settings in action without having to log back into the application, but I have yet to find a way that is both consistent and renders the updated main window correctly...
The specifics are that a click on the Save button calls a JavaScript function. This function submits an HTML form to invoke the appropriate Spring-MVC action (saveXXXSettings.do). In the corresponding server-side method (saveXXXSettings()), a post-save call to another method to redraw the main page will render an updated version of that page but within the iframe overlay instead of the top frame of the browser. So I just tried to set window.top.location.href to the form submisssion, i.e.,
window.top.location.href = settingsForm.submit();
and got an HTTP error page with no helpful information. In looking at this site and the W3 School page, I see that the default method-type for HTML forms is GET, so I'm wondering if the only way to get around my error to use the corresponding Spring action and a parameter string, i.e.,
window.top.location.href = saveSettings.do?formParam1=xxxx&formParam2=yyyy
I'm trying to avoid having to assemble a parameter string just to achieve the window-refresh I want, so any advice or suggestions are appreciated...
I would recommend using iframe event listeners instead. From the main frame add a listener to messages. Might look something like this...
window.addEventListener('message', function(e) {
var submitParamters = e.data;
});
Then when the user clicks submit in the overlay iframe, post a message to the main window. Might look something like this...
mainWindow.postMessage(submitData, targetOrigin);
You can read more about this here... http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage.
This is capable of performing cross-domain messaging, but will work with same domain as well.
Thanks for the answer, CurtisJD, but I decided to go with a different approach: I'm copying the values entered in the iframe overlay into a form on the main page, then I submit that form to save the values then refresh the home page, which it does automatically at the top (i.e., browser) level. Thanks again for your quick response...
I want to show a acknowledgement (more precisely a popup) when form is successfully submitted.Previously I was using Ajax to validate form and display pop up but now I want to achieve same without Ajax.
Is there any event in javascript/Jquery which is invoked after successful form submission? or Is there any other alternative available?
Thanks!
EDIT 1 :
I am using Spring 3.0.
Here is the detailed scenario
1. User fill the form and click on submit
2. Request will be sent to controller (Server side)
3. Validation will be done at server side
4. If errors are present I am using Spring validation to show it and goto Step 1
5. else successfully submit the form and show a popup.
6. After user clicks on popup redirect to other page.
EDIT 2:
I am completely agree with the opinion that Ajax is the right/best way to do it and I already implemented it using Ajax. But client want to use non-ajax approach and I cannot go beyond his words.
This question piqued my curiosity, as I was trying to do something similar using the iframe solution suggested by Leon. Eventually I succeeded, however, I would like to suggest that rather than using a direct onload property, you make use of the jQuery .load() event on the iframe.
Edit: So here's how I set up the form (using HTML5, so quotes aren't necessary):
<div id=message></div> /* Example-specific, see below */
<form method=post action=backend.php target=iframe>
// Form data here
</form>
<iframe name=iframe></iframe>
I added the following CSS code to hide the iframe:
iframe {
border:0px;
height:0px;
visibility:hidden;
width:0px;
}
Don't use display:none, as some browsers will refuse to submit to an element that's not displayed.
Then in my $(document).ready() JavaScript...
$('iframe').load(function(){
// Your load event here.
});
You could also change that about, so that it specifically only triggers after a specific event (if you're using dynamic forms, for example). In such a case, you may want to use .unbind('load') before .load() to prevent previously-added .load() functions from calling.
Now when the form is submitted, it loads into the hidden iframe. When the iframe loads the page (backend.php, in my example), it triggers the .load() function. In my specific case, I set up a <div id=message> to display a message:
$('iframe').load(function(){
$('#message').html('The form successfully submitted.');
});
Without Ajax? No Problem - let's go back to how the Web really used to work in the past ;-)
Since I am getting you don't want to refresh the current page, how about this approach:
have a hidden iframe on the same page, with a name & id
point the target property of your form to the name given in the previous step
submitting the form will now be "hidden"
you can have an onload property on the iframe set to a javascript method of your liking to get called once the form finished submitting
that javascript code could also retrieve the contents of the iframe and check for your server-side response (maybe even including an error msg)
notify the user about the result
This is all fairly easy to setup, let us know how it works for ya..
I am not sure which language you are coding in.
One option - use javascript.
On the submit button onclick event (client side event), perform the page validation and display alert pop up, if the page is valid.
<script type="text/javascript">
function OnSubmitClientClick() {
Page_ClientValidate();
if (Page_IsValid) {
alert('Form has been successfully submitted.');
return true;
}
}
</script>
Why do you want to drop AJAX approach? Without AJAX, server side validation implies page reload. On page reload you would lose client side (JS) state.
One alternative is to use hidden frame/iframe/a new window to perform server side validation on form submit(possibly use the pop up you are referring to in your question). Which in my opinion is not the right approach(A BIG NO). You may rather stick to AJAX or go with non AJAX way of form submit.
I've been researching this on and off for a number of months now, but I am incapable of finding clear direction.
My goal is to have a page which has a form on it and a graph on it. The form can be filled out and then sent to the CGI Python script (yeah, I'll move to WSGI or fast_cgi later, I'm starting simple!) I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that. I have a form and a graph now, but they're on separate pages and work as a conventional script.
I'd like to avoid ALL frameworks except JQuery (as I love it, don't like dealing with the quirks of different browsers, etc).
A nudge in the right direction(s) is all I'm asking for here, or be as specific as you care to.
(I've found similar guides to doing this in PHP, I believe, but for some reason, they didn't serve my purpose.)
EDIT: The graph is generated using Flot (a JQuery plugin) using points generated from the form input and processed in the Python script. The Python script prints the Javascript which produces the graph in the end. It could all be done in Javascript, but I want the heavier stuff to be handled server-side, hence the Python.
Thanks!
I'm assuming that you have two pages at the moment - a page which shows the form, and a page which receives the POST request and displays the graph.
Will a little jQuery you can do exactly what you want.
First add to your form page an empty div with id="results". Next in your graph plotting page put the output you want to show to the user in a div with the same id.
Now attach an onclick handler to the submit button (or to the individual parts of the form if you want it to be more dynamic). This should serialize the form, submit it to the plotting page snatch the contents of the id="results" div and stuff them into the id="results" div on the the form page.
This will appear to the user as the graph appearing on the page whenever they click submit.
Here is a sketch of the jQuery code you will need
$(function(){
// Submit form
// Get the returned html, and get the contents of #results and
// put it into this page into #results
var submit = function() {
$.ajax({
type: "POST",
data: $("form").serialize(),
success: function(data, textStatus) {
$("#results").replaceWith($("#results", $(data)));
}
});
};
$("form input[type=submit]").click(submit);
// I think you'll need this as well to make sure the form doesn't submit via the browser
$("form").submit(function () { return false; });
});
Edit
Just to clarify on the above, if you want the form to redraw the graph whenever the user clicks any of the controls not just when the user clicks submit, add a few more things like this
$("form input[type=text]").keypress(submit);
$("form input[type=checkbox], form select").change(submit)
If you'll be loading HTML and Javascript that needs to be executed, and your only reason for not wanting to load a new page is to preserve the surrounding elements, you could probably just stick the form in an IFRAME. When the form is POSTed, only the contents of the IFRAME are replaced with the new contents. No AJAX required either. You might find that the answers here give you sufficient direction, or Google for things like "form post to iframe".
I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that.
The general pattern goes like that:
Generate an XMLHttpRequest (in form's onsubmit or it's 'submit' button onclick handler) that goes to your Python script. Optionally disable the submit button.
Server side - generate the graph (assuming raw HTML+JS, as hinted by your comment to another answer)
Client side, XmlHttp response handler. Replace the necessary part of your page with the HTML obtained via the response. Get responseText from the request (it contains whatever your Python script produced) and set innerHtml of a control that displays your graph.
The key points are:
using XMLHttpRequest (so that the browser doesn't automatically replace your page with the response).
manipulating the page yourself in the response handler. innerHtml is just one of the options here.
Edit: Here is a simple example of creating and using an XMLHttpRequest. JQuery makes it much simpler, the value of this example is getting to know how it works 'under the hood'.
Update img.src attribute in onsubmit() handler.
img.src url points to your Python script that should generate an image in response.
onsubmit() for your form could be registered and written using JQuery.