Facebook Tracking Pixel On a Button Event - javascript

I'm trying to set up a facebook tracking pixel on my website. I need the pixel to be triggered on the submission of a contact form. My contact form does not redirect to a new page on submission, so i need to place the pixel to "track event on in-line action".
This is the snippet facebook have given me:
<button id="submitButton">Generate lead</button>
<script type="text/javascript">
$('#$submitButton').click(function() {
insert_event_code_here;
...
</script>
And this is my current button Script:
<form role="form" method="post" id="contactForm">
<!-- my form fields -->
<div class="col-md-12">
<button type="button" id="submit" name="submit" class="btn btn-primary pull-right control-submit">Send!</button>
</div>
How do i splice these two bits of code together to make a working facebook pixel triggered when the user clicks the send message button?
Also, where the facebook code says "insert_event_code_here;" what is this?
Many thanks everyone!

If you simply want to track the click on the button you can trigger an event with something like the sample code at https://developers.facebook.com/docs/marketing-api/audiences-api/pixel#inpageevents
<form role="form" method="post" id="contactForm">
<!-- my form fields -->
<div class="col-md-12">
<button type="button" id="submit" name="submit" class="btn btn-primary pull-right control-submit" onclick="fbq('track', 'Purchase');">Send!</button>
</div>

Related

Using a button with JavaScript & HTML [duplicate]

This question already has answers here:
Clicking a button within a form causes page refresh
(11 answers)
Closed 2 years ago.
I know, the title seems to lead to a repetitive/useless question, but I can't find a solution in other questions. Let me explain better and read what follows before closing my question.
I created a form by learning from different sources. It all seems to work fine, until I have to click on submit button, with "Save as TXT" written on it. It happens quite a strange thing:
if I click on the text "Save as TXT" inside the button, it submits my data correctly;
if I click on the coloured part around the text "Save as TXT" of the button, it refreshes the page.
I think I found why this happens, but I can't fix it. It seems to be something which has to do with both my HTML code and my JavaScript code. Here it is a part of it:
Javascript
$(function(){
$("#submitLink").click(function(event){
// things to do on submit...
});
});
HTML
<form method="post" name="myForm" action="" id="formToSave">
<!-- some fields to compile... -->
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="align" type="submit">Save as TXT</button>
</div>
</form>
How can I change this part of the code in order to submit successfully by clicking anywhere on the button (and do what I write in the JS function)?
Thanks in advance,
happy coding everyone!
ps. I read this "famous" question you added by after closing my question, but it is not helping me. By writing type="button" instead of type="submit" I get no results, I'm sorry
if I click on the text "Save as TXT" inside the button, it submits my data correctly;
When you click on the text itself, you are clicking the <a> element, and therefore triggering its event listener.
if I click on the coloured part around the text "Save as TXT" of the button, it refreshes the page.
When you click on any part of the button, are triggering the <button>'s event listener.
Therefore, I suggest
So it seems like the solution is to taking the <a> element's event listener and attaching it to the <button>.
One way to do this is to replace
<button class="btn btn-primary btn-lg" id="align" type="submit">Save as TXT</button>
with
<button class="btn btn-primary btn-lg" id="align" onclick="{Save as TXT}" type="button">Save as TXT</button>
where "{Save as TXT}" was the code you previously had in the <a>'s href.
The reason you need to add type="button" is so you can disable the button's default behavior submitting the form (and therefore refreshing the page).
Then, since you got rid of the <a> tag, you need to attach any listeners that used to listen for clicks on the <a> tag to the <button> instead.
To do this, replace:
$("#submitLink").click(function(event){
// things to do on submit...
});
with
$("#align").click(function(event){
// things to do on submit...
});
See it in action:
<form method="post" name="myForm" action="" id="formToSave">
<!-- some fields to compile... -->
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="align" onclick="console.log('Submitted')" type="button">Save as TXT</button>
</div>
</form>
You need for the BUTTON type 'button' but you had 'submit'. So it wants to submit the form which follows in a reloading, with button the action is needed to be done from you.
The A-tag is not needed so I deleted it. On the contrary if clicked at the corners anything happened, now this functions
<button type="button" id='btn'>Save as TXT</button>
Just test it.
$(function(){
$("#btn").click(function(event){
console.log('Submit');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" name="myForm" action="" id="formToSave">
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="btn" type="button">Save as TXT</button>
</div>
</form>

bootstrap form validation button redirection

I have create a simple form validation which uses validator.js
What actually happens after the user presses the register button data is sent and user stays on the same page.
What i really want to get is that after user pressing register button it will be redirected to other page that is info.html which shows the message thank you for registration, Check mail for confirmation etc.
Here is the button I want to have a redirect function
<form>
<div class="form-group">
<button class="btn btn-primary" type="submit">
Submit
</button>
</div>
</form>
I tried this in the following way
<div class="form-group">
<button class="register100-form-btn">
<a class="fa fa-long-arrow-right m-l-7" href="/info.html">Submit</a>
</button>
</div>
it's now redirecting it to the other page but without a check validation form
All fields can remain empty which makes no sense for register form.
one way would be to add a click event listener to the button and redirect to your desired view once clicked. Have your html as:
<div class="form-group">
<button id="submit" class="btn btn-primary" type="submit">
Submit
</button>
</div>
and then the following JS,
document.getElementById("submit").addEventListener("click", function(event){
let url = "http://mybaseurl/info.html"
window.location.href = url;
});

Django Alert message On Submit

I am trying to display a simple alert message once a user clicks the Save and Email to Corporate button inside of a modal. The modal submits the form and sends an email based on the auth.users group so the load takes a second. I need to alert the user of this after they submit so they do not continue to click the button. I don't need anything fancy, so I am using <div onsubmit="myfunction"> and <script> to display the alert. This worked the first time but that was it.
How would I code this in the <div> and <script> to work every time, or is there better solution?
template.html
</div>
<div class="modal-footer">
<div onsubmit="myFunction">
<input type="submit" form="formset" class="btn btn-primary" value="Save and Email to Corporate">
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
script
<script>
function myFunction() {
alert("The email was submitted");
}
</script>

How to show js message from html action

I have this form in html
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
What I need to do is: The user will write something in text and after click on classify button js message will appear to the user with some results, is it possible to do something in action="" or there is another way to do it?
You can use event listeners for button clicks if you'd like instead of form actions. Check out this documentation, hopefully it'll help! I'd suggest something like this:
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button id="classify" type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
and then have this in some js file
document.getElementById("classify").addEventListener("click", function () {
// do some js stuff here
});
EDIT:
Another alternative would be to use an onclick attribute, which is also documented in the link I posted before, but this is a little antiquated, and your function has to be named in the global scope and it's not really a good idea in general. I'd go with an event listener!
I would suggest you to have jQuery added into your Application. It makes your life easier in your construction.
Check this https://jsfiddle.net/dqwLv8q7/
I added id in your button and made it preventDefault() as it fire us submit action of your form as you set it "type=submit". So your "classify" click button now just shows Alert message with value of your "adsend" ID input value. You can consider to use another tag and replace it with message to your user.

Onclick javascript stops form submit in Chrome

I have the following form:
<form class="custom" method="post" action="/checkout/submit/">
...
<div class="row">
<div class="ten mobile-three columns" style="margin-top: 20px;">
<input id="previous-btn" style="margin-top: 10px;" type="submit" class="button radius" name="previous" value="Zurück" />
<input id="next-btn" style="margin-top:10px;" type="submit" class="button radius success" name="next" value="Bestätigen" onclick="disableButtons(this);"/>
<input style="margin-top:10px;" type="hidden" name="next" value="Bestätigen" />
<img id="ajax-img" style="display:none;" src="/img/ajax-loader.gif" />
</div>
</div>
</form>
...
<script type="text/javascript">
function disableButtons(elem)
{
$('#previous-btn').prop('disabled', true);
$('#next-btn').prop('disabled', true);
$('#ajax-img').css('display','inline');
return true;
}
</script>
</body>
</html>
Using onclick I disable the buttons and show ajax-loading picture while the form is submitted. So that user won't click submit twice.
The problem is that in Chrome the form is simply not submitted. So the onlclick function works fine, but that's all.
In FF and IE everything is working fine - in the beginning javascript makes changes to buttons and then normal flow of form submit is done.
Would appreciate any ideas why it breaks in Chrome.
Thanks!
Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO question and in this chrome groups discussion (may be a bug, may be the intended design).
First, when you want to allow / block a click you should use onclick="return someFunction()" and not onclick="someFunction()" - then the action will follow through only if that function returns true.
Now to make this work, you would have to submit the form from your function:
$(this).parents('form').submit()
You should use like this in your onclick="someFunctionToDoJob(); submit();" on your form.
And at your someFunctionToDoJob(); add this document.hereNameYourForm.submit();

Categories