I have a submit function:
jQ("webform-client-form-' . $form['#node']->nid . '").submit(function(event)
var curElement = document.activeElement;
console.log(curElement);
var $btn = curElement.attr("class");
$webform = $btn.split(\' \')[0];
console.log($webform);
if($webform == "webform-submit") {
console.log("yeahah");
}
var $form = jQ(this);
if ($form.find("[data-stripe=\"token\"]").attr("value") == "") {
$form.find("button").prop("disabled", true)
Stripe.card.createToken($form, stripeResponseHandler);
return false;
}
else {
return true;
}
});
and try do fire that function only on pressing a certain button. Problem is that when pressing the button, document.activeElement is the <html> tag and not the button I pressed. Does anyone know if I did something wrong?
Thanks
Related
I have the following function that gives a warning to the user if they are exiting the page when the $('.article_div textarea') form field is populated.
$(window).on('beforeunload', function(event) {
var unsaved = "Are you sure you want to exit?";
var text = $('.article_div textarea').val();
if (text.length > 0){
return unsaved;
}
});
However, I would like to prevent this popup from executing when they click the submit button to the actual form.
How can I ammend the function to account for this? The element of the submit button is
$('button.submit_post').
You can create a boolean which gets positive when you click on submit Or remove the event of unload when clicked. The code will be as follows:
var isSubmitClicked = false;
$('button .submit_post').on("click",onClick);
function onClick(e){
isSubmitClicked = true;
}
$(window).on('beforeunload', function(event) {
if(isSubmitClicked){
isSubmitClicked = false;
return;
}
// Rest of your method.
}
How about binding a event handler to the submit event instead of the submit button element?
Maybe like this:
var submitted = false;
$('form').on("submit", function() {
submitted = true;
console.log('submitted');
});
$(window).on('beforeunload', function(event) {
if(submitted){
submitted = false;
console.log('aborted because of submit');
return;
}
console.log('rest of code');
// Rest of your method.
});
I'm currently building a chrome extension and I'm trying to get it to be able to stop a like on Facebook from going through even after the like button has been clicked. In my content.js, I currently have the code:
document.querySelectorAll('a[data-testid="fb-ufi-likelink"]').forEach(function(element) {
element.addEventListener('click', function() {
var r = confirm("You clicked like");
if (r == true) {
alert("you clicked OK");
} else {
alert("you clicked Cancel")
}
})
});
As of now, when the like button is clicked, a confirm box pops up but the like does not go through until "OK" or "Cancel" is clicked.
How do I prevent the like action from going through when the 'cancel' button is clicked? Thanks!
Try the following.
document.querySelectorAll('a[data-testid="fb-ufi-likelink"]').forEach(function(element)
{
element.addEventListener('click', function(e) {
var r = confirm("You clicked like");
if (r == true) {
alert("you clicked OK");
} else {
alert("you clicked Cancel");
e.preventDefault();
}
});
});
For reference : https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
You could try replacing the original function with a different function of your own.
document.querySelectorAll('a[data-testid="fb-ufi-likelink"]')[0].onclick =
e => console.log('blablabla!')
document.querySelectorAll('a[data-testid="fb-ufi-likelink"]').forEach(function(element) {
let originalOnClick = element.onclick
element.onclick = null
element.addEventListener('click', function(e) {
console.log('look ma, no hands!')
originalOnClick(e)
})
})
Like
I tested it on Facebook and it works there too.
Obviously you have to adapt this concept to your needs.
You can use event.preventDefault()
Just add the parameter to your listener function
function(event){
...
event.preventDefault();
}
I have a code that execute the submit event from the form and I want the modal stay open if the validation is false, but it doesn't work.
var myForm = document.updteform;
var condition = true;
if(myForm.pass1.value !== myForm.pass.value){
alert("Password Doesn't Match, Please try again.");
myForm.pass1.focus();
condition = false; //it will return the value
}
After that... this code below will execute.
if(!condition) {
if(evt.preventDefault) { event.preventDefault(); }
else if(evt.returnValue) { evt.returnValue = false; }
else { return false; }
}
}
This one works...
Step 1: create an onlick that calls the function to your JavaScript
Step 2: create a function:
function changePass(){
var oldpass = document.getElementById("password1").value;
var newpass = document.getElementById("password2").value;
if (oldpass != newpass) {
alert("Password Doesn't Match Please try again.");
return false; //the modal will not close because it doesn't return a value.
} else {
document.getElementById("form_id").action = "<?= base_url('index.php/Employee/updateUser'); ?>"; // Setting form action to your Controller page.
document.getElementById("form_id").submit(); // Submitting form
}
}
That say so.. Hopefully it'll help :)
I have the below code in my jsp where we enter subject and message and click on a button which causes form submit, when we do a page refresh by clicking F5, it is causing multiple form submissions.
I added the below line $('form').preventDoubleSubmission(); and the function corresponding to it in my jsp but it is still not working. Please assist.
function validateXYZ() {
var frm = document.forms["update-xyz"];
frm.actionType.value=message;
if (message == "submit_new") {
if (frm.subject.value == "" || frm.content.value == "") {
alert ("Please fill in Subj and Msg");
return false;
}
}
$('form').preventDoubleSubmission();
frm.submit();
}
//jQuery plugin to prevent double submission of forms
/*jQuery.fn.preventDoubleSubmission = function() {
$(this).on('submit',function(e){
var $form = $(this);
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
e.preventDefault();
} else {
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
}
});
Thanks,
Praseel.
Im having problem altering jQuerys beforeunload() functionality, depending on user actions.
$(document).ready(function() {
$(window).bind('beforeunload', function() {
if (billChanged == false) {
return false;
}
else if ( savebutton was clicked ) {
return false;
}
else {
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
The issue im having, that i can't come up with a way to check if 'savebutton' was clicked, as typed in else if clause in the snippet above.
The form itself is quite complicated, and i'm not able to alter it that much.
$(document).ready(function() {
var not_saved = true;
$('#saveButtonId').on('click', function() {
not_saved = false;
})
$(window).on('beforeunload', function() {
if (not_saved && billChanged)
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
you can define a global variable. Change it's value onclick of the button, and then check it in your function
var clickedButton = false;
Then your html
<input type="button" .... onclick="clickedButton=true;">
and then in your function
else if ( clickedButton ) {
return false;
}