I have an embed marketing form in my code.
This form includes a submit button which sends data to the database of the marketing services provider.
Since, I want to trigger my own code after clicking the iframe's submit button, I created an event listener which looks like this:
iframe = initialize_iframe();
iframe.contentWindow.document.getElementsByTagName("input")[7].addEventListener('click', function() {
console.log("I'm listening");
blablabla();
});
It seems that by doing that I override the original functionality.[pic] 1
Any ideas how to deal with it?
Related
This is legacy code.
I'm working on a project where we're using iframes to simulate AJAX.
Basically, we're using the target attribute to submit the <form> in an iframe, resulting in the request not opening a new tab. Also, we echo a <script></script> in the response from the PHP, and the result is executed since it populates the iframe.
Here's an example of such <form> :
<form id="form_to_submit" method="POST" action="ajax/createUser" target="iframe_name">
<input type="text" name="input_to_send">
<button type="button" onclick="$('#form_to_submit').submit()">Submit With Onclick!</button>
</form>
Nowadays, not only this looks evil, but it has one (perhaps others) huge pitfall. If one request is made through this process, and the client goes somewhere, and then goes back in his browser history, it'll send the request again.
To fix this last problem, there are many solutions. I think the one I prefer the most is to use real AJAX instead of iframes. Now, in theory, I could change every single form in the source code to make it use AJAX, but I know I won't have 1 straight week of work just for this purpose.
I'm looking for a "quick" way to intercept these requests before they're sent to the iframe, and send them with AJAX instead.
So far, I tried to target <form> tags which have a target="iframe_name" and listen to the submit event to then send the request again with a same method/URL/data.
$('form[target=iframe_name]').on('submit', function (event) {
event.preventDefault(event);
var url = $(this).attr('action'),
datas = $(this).serialize();
$.post(url, datas).done(function (response) {
eval($(response).text());
});
});
But that only works if they're submitted through a real click on a submit button. I'd say 95% of these cases are submitted through onclick tags which will .submit() the forms, and in these cases, the submit event won't trigger it appears.
I'm stuck, any idea ?
Note : I'm tagging jquery only to let you know it's available to be used, even though the question is still relevant with any lib/framework of JS.
You can actually remove the onclick attributes just by doing a general jQuery action on document ready:
<script>
$(document).ready(function() {
var getButton = $('form').find('button');
getButton.prop('onclick',null);
// put listener script here for new form submit (using ajax)...
});
</script>
This piece of code just does a general lookup on the page for all forms, finds the buttons, then removes the onclick attribute. Once you do this the form should not submit anymore with that inline javascript.
I would suggest this be temporary as you incrementally change the forms over time to natively work using the jQuery listener (like the other 5% of forms you have created with no onclick).
Been searching around on this for a while and can't come up with any documentation to outline what i want to achieve.
I'm using wordpress and the Contact Form 7 plugin, all is working perfectly, what i want to achieve is to run some particular javascript upon form submit, i know we can use "on_sent_ok:" in the additional settings, but this only performs if the form is actually submitted.
What i'd like to do is to do some other javascript when the form doesn't submit ok, which throws the user back to the section which didn't validate.
I can use the following code to run after 1.7s of the form submit being clicked, however it's a bit sloppy as if the user was running with a slow connection, there's potential this could run before the form is submitted properly.
$('.wpcf7-submit').click(function() {
setTimeout(function() {
if ($('.fs1 input,.fs1 textarea').hasClass('wpcf7-not-valid')) {
$('.pop-up-form').removeClass('pustep2').removeClass('pu-closing');
$('.form-step').hide();
$('.fs1').show();
}
if ($('.fs2 *').hasClass('wpcf7-not-valid')) {
alert('error on page 2 - take user back to the area with issues')
}
}, 1700);
});
Is there any particular function or hook i can use to run JS when the form AJAX has completed?
Thanks!
In version 3.3 new jQuery custom event triggers were introduced:
New: Introduce 5 new jQuery custom event triggers
wpcf7:invalid
wpcf7:spam
wpcf7:mailsent
wpcf7:mailfailed
wpcf7:submit
You can use wpcf7:invalid like the example below:
$(".wpcf7").on('wpcf7:invalid', function(event){
// Your code here
});
Given the variety of responses on this topic the plugin developer seems to change their mind about how this should work every 5 minutes. Currently (Q1 2017) this is the working method:
document.addEventListener( 'wpcf7mailsent', function( event ) {
alert( "Fire!" );
}, false );
And the valid events are:
wpcf7invalid — Fires when an Ajax form submission has completed
successfully, but mail hasn’t been sent because there are fields with
invalid input.
wpcf7spam — Fires when an Ajax form submission has
completed successfully, but mail hasn’t been sent because a possible
spam activity has been detected.
wpcf7mailsent — Fires when an Ajax
form submission has completed successfully, and mail has been sent.
wpcf7mailfailed — Fires when an Ajax form submission has completed
successfully, but it has failed in sending mail.
wpcf7submit — Fires
when an Ajax form submission has completed successfully, regardless
of other incidents.
Sauce: https://contactform7.com/dom-events/
Sometimes it may not work, as Martin Klasson pointed out, only 'submit' event works, most probable because it's triggered by a form and bubbles up to the selected object. Also as I can understand, now events have other names, like "invalid.wpcf7", "mailsent.wpcf7", etc. In short, this should work:
jQuery('.wpcf7').on('invalid.wpcf7', function(e) {
// your code here
});
More detailed explanation here: How to add additional settings on error in Contact form 7?
This code works since 5.8.x version:
$('.wpcf7').on('wpcf7invalid wpcf7spam wpcf7mailsent wpcf7mailfailed', function () {
// your code here
});
I had quite a go at this, and I found that when only the Submit event works, it means that there is a js problem / conflict in your theme.
If it's a custom theme you built, make sure jQuery and jQuery migrate are both loaded, in this order, and that the Contact form 7 js is also loaded in the footer.
Make sure you have wp_head, and wp_footer in your php templates.
For DOM events to work, your form must be in Ajax mode. If the page reloads upon submission, forget about DOM events. If you have the form ID showing up in the URL, same thing. My form was initially not in Ajax mode because the Contact Form JS was not loaded, and jQuery Migrate either.
The form must behave exactly like shown on this page for the DOM events to be fired properly. Once you have that, it should be working.
I've tested this with jQuery 3.3.1 and Migrate 3.0.1 and the following event listener worked:
document.addEventListener( 'wpcf7mailsent', function( event ) {
console.log('mail sent OK');
// Stuff
}, false );
To check if your theme is the culprit, test your form using Wordpress' default theme, if it works, you know the issue is on your end and not so much in the dev's doc!
I tried to implement the dom event behavior in wordpress contact form 7 plugin as described here, but after trying numerous methods which are given as fixes in different forums I implemented a method of my own.
I m describing the method here below. The method involves some steps which are listed below:
Creating the contact form
Scripting for the contact form to capture event triggers and form data
Loading the script
1. Creating the contact form
<label> Your name
[text* cform7-name id:cform7-name autocomplete:name] </label>
<label> Your Number
[tel* cform7-contact id:cform7-contact] </label>
<label> Course You are interested (Press Ctrl + Select to select Mutiple)
[select* cform7-courses id:cform7-courses multiple "JAVA" "Python" "C#" "Others"] </label>
<label> Your message (optional)
[textarea cform7-submit id:cform7-message] </label>
[submit id:cform7Submit "Submit"]
Above is a sample script with ids so that we can easily retreive those elements from DOM tree using JS. [You can modify the field ids as your need]
2. Scripting for the contact form to capture event triggers and form data
document.addEventListener('DOMContentLoaded', function() {
var frmButton = document.getElementById('cform7Submit');
frmButton.addEventListener( 'click', function( event ) {
var data = {
name: document.getElementById('cform7-name').value,
contact: document.getElementById('cform7-contact').value,
courses: document.getElementById('cform7-courses').value,
comment: document.getElementById('cform7-message').value
};
event.preventDefault();
console.log('Event Data ', event);
console.log('Data ', data);
}, false );
}, false);
Save the above script in wordpress deployment directoty. In my case I placed the script in the root deployment directory itself(<worpress-root-directory>) and saved the file as cform7.js.
Ex: /var/www/wordpress-site/cform7.js
After finishing this we need to load the script.
3. Loading the script
function cform7_script() {
wp_enqueue_script( 'cform7-js', '/cform7.js');
}
add_action('wp_enqueue_scripts', 'cform7_script');
Place the above code in the <worpress-root-directory>/wp-includes/functions.php file
That's done! On clicking the form submit button(cform7-submit) you must see the data logged in the console.
I am trying to submit a mailchimp form from within my DNN (DotNetNuke) site. Typically, you just remove the form tags and put some javascript in the onclick event of the submit button...like here. This works and you can see as such here.
But, I am using this popup module, as I want this form to pop up when someone comes to the site. And in this configuration it does not work. It will submit the form to the designated URL, but no form data is passed. This page is here.
A couple of observations:
When you view the page source, the popup form is within the form tags, yet a this.form returns null in the script.
When you inspect the submit button element in Chrome, you see that the html form is then OUTSIDE the form tags.
So maybe there is some javascript with this popup module that is moving the DOM element on page load???
I created a js function to call on the input button submit; code is as follows:
function submitSubscription(clickedElement){
$form = $('body').find('form');
$form.attr('action', 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4');
$form.submit();
}
Note: in this function clickedElement.form is returning null.
Because your content is not in a <form>, you're going to put it inside a <form> in order for your script to work. You can either dynamically create a <form> element, or move your content back inside the main <form> when you submit. Try something like this:
function submitSubscription(clickedElement){
var $form = $('<form></form>', { action: 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4' });
$('#mc_embed_signup').wrap($form);
$form.submit();
}
I have a Form like this in asp Classic ..
<form method="post" name="AddItemForm" id="AddItemForm" action="/files/includes/CartControl.asp" style="display:inline;">
// bunch of Hidden Fields.
Then a SUBMIT button.
action of the form takes all the hidden fields and then after processing them redirects user to a CART page.
now what I want to do is....I want user to click on ADD TO CART button, however I want user to stay on the product page while form submits to a new window (not a javascript new window...something like lightbox/colorbox/fancybox DIV etc).
I looked into many jQuery plugins but could not get a satisfied answer...which plugin is BEST for my case? any simple example?
basicly I want to submit to a new overlay div and within that DIV redirect user to a new page to show Product Info.
Thanks
It seems that you are looking for some functionality for asynchronous form submission. There is this jQuery AJAX Form plugin that provides AJAX functionality for forms. You will have something like:
$('#AddItemForm').submit( function() {
// Submit asynchronously
$( this ).ajaxSubmit( function() {
// Form processing is done
// Redirect to the shopping cart page
});
// Show a modal or a fancy "please wait" message
// Prevent default submission
return false;
});
You can find some info in this answer, the code from one of the answers:
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
... do something with response from server
},
'json' // I expect a JSON response
);
});
In "do something with response" you can take the data or url and load it into an overlay div.
If it's a URL, you can use jquery .load :
$('#result').load('ajax/test.html');
If it's html (or data which you wrap in html), just do
$('#result').html(theHTML)
the simplest way (in my view) is to add target attribute to the form which will open new window while the current page won't chage...
I have a large .aspx page, with multiple server controls. And, there is also a JavaScript file referenced by this .aspx page. I want to have a JavaScript function within this existing .js file, that will get called before any postback that happens to the server.
[note: I have seen another post that mention how to do this in JQuery ( How to capture submit event using jQuery in an ASP.NET application? ), but I would like that to be done through the existing JavaScript file, rather than using a new technology like JQuery]
[Edited] Solution of using OnSubmit handler will not work for me...because it will not get called for postbacks that get triggered by server controls.
You need something like this:
/*
usually there is only one form in asp.net, but if you know you can have
more than one, you can get main form with document.getElementById
*/
var form = document.getElementsByTagName("form")[0];
if (form.addEventListener) {
form.addEventListener('submit', functionThatShouldBeCalledBeforeSubmit, false);
} else if (form.attachEvent) {
form.attachEvent('onsubmit', functionThatShouldBeCalledBeforeSubmit);
}
onsubmit event will rise any time form is submitted. No matter how.
More details about attaching events with JS: https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener