Run AJAX function on form submit button after javascript confirm() cancel - javascript

I have a form where and AJAX function runs on form submission to make sure that the data in the form doesn't conflict with data in the database. If a conflict is found, the AJAX function pops up a confirm() box. If the user clicks "OK", the form is submitted. If they click "Cancel", the form is not submitted.
Here's where things get problematic. If they click cancel and then adjust the values in the form and submit it again, the AJAX function does not run the next time they hit the form submit button. Is there a way to make the AJAX function run every time they hit submit, even if they have previously cancelled the form submission?
Here is a truncated version of the AJAX function:
$('#publish').one('click', function (e) {
e.preventDefault();
var url = shiftajax.ajaxurl;
var shift = $('#post_ID').val();
var data = {
'action': 'wpaesm_check_for_schedule_conflicts_before_publish',
'shift': shift,
};
$.post(url, data, function (response) {
if( response.action == 'go' ) {
// submit the form
$('#post').submit();
} else {
// ask user for confirmation
if (confirm(response.message)) {
// user clicked OK - submit the form
$('#post').submit();
} else {
// user clicked cancel - do nothing
}
}
});
});
Like I said, this is working just fine, but the AJAX doesn't fire at all if you hit the submit button after hitting the "cancel" button.
For what it is worth, this AJAX function runs when you hit the "Publish" button on a WordPress custom post type.

Dont use one(it will fire ajax submit or button click only once) , use here var IsBusy to check user is not repeatedly pressing the form submit,
Try below code,
var isBusy = false; //first time, busy state is false
$('#publish').on('click', function (e) {
if(isBusy == true)
return ; //if Busy just return dont submit
else
isBusy= true; //true , tell that ajax is now busy processing a request
e.preventDefault();
var url = shiftajax.ajaxurl;
var shift = $('#post_ID').val();
var data = {
'action': 'wpaesm_check_for_schedule_conflicts_before_publish',
'shift': shift,
};
$.post(url, data, function (response) {
if( response.action == 'go' ) {
// submit the form
$('#post').submit();
} else {
// ask user for confirmation
if (confirm(response.message)) {
// user clicked OK - submit the form
$('#post').submit();
} else {
// user clicked cancel - do nothing
}
}
isBusy = false;
});
});

Related

javascript handling confirm if user selects to not allow prompting

on my wordpress site i have a table with buttons in each row that make ajax calls. each button confirms with the user before taking any action. after clicking the button and confirming more than once there's a checkbox in the confirm window that the user can click to prevent the site from prompting them again to confirm.
when i select this check box the next button i click in the table doesn't work because i have some logic in my javascript that is checking if the confirmation was true or not. any ideas or techniques on how i can code around this? i would like for the user to confirm their choice at least once, but i'm ok with them selecting to not be prompted again.
var confirmMessage='Press Ok to mark complete.';
var x = confirm(confirmMessage);
if (x == true) {
$.post(my_ajax_obj.ajax_url, { //POST request
_ajax_nonce: my_ajax_obj.nonce, //nonce
action: "all_table_complete", //action
row_result_id: trid //data
}, function(data) { //callback
var retractTdSearchFor = "retract_button_" + trid;
this2.closest('td').innerHTML = data; //insert server response
document.getElementById(retractTdSearchFor).innerHTML = "Completed"; // should find ignore td with same result id
});
} // if (x == true)
else
{
// the user did not click ok.
}

MVC - Issue with users double-clicking Submit button

I have a number of pages in my MVC app where the user clicks a Submit button to post a form. Sometimes users will click Submit and since nothing happens immediately, click it again. Therefore, the form submits twice. To prevent this, I have the following JavaScript code:
// When the user submits the form, disable the Save button so there is no chance
// the form can get double posted.
$('#form').submit(function () {
$(this).find('input[type=submit]').prop('disabled', true);
return true;
});
This code disables the Submit button so the user cannot click twice. This works fine. However, if there are client side validation errors on the form, the Submit button gets disabled but the form is never posted, and now the user cannot post the form. Is there a change I can make to the JS code to detect if there were client side validation errors, and, if so, I either don't disable the Submit button, or reenable it?
If you are using jQuery Validate, you can check to see if the form is valid before disabling the button:
$('#form').submit(function () {
if ($(this).valid()) {
$(this).find('input[type=submit]').prop('disabled', true);
}
});
You can try something like this:
<button id="subButton" /> <!-- do not use type="submit" because some browsers will automatically send the form -->
Javascript:
$('#subButton').click(function (e) {
e.preventDefault(); //prevent browser's default behaviour to submit the form
$(this).prop('disabled', true);
doValidation();
});
var pTimeout;
function doValidation() {
ajaxLoader.show(); //lock the screen with ajaxLoader
var form = $('#registerForm');
var isPending = form.validate().pendingRequest !== 0; // find out if there are any pending remote requests ([Remote] attribute on model)
if (isPending) {
if (typeof pTimeout !== "undefined") {
clearTimeout(pTimeout);
}
pTimeout = setTimeout(doValidation, 200); //do the validation again until there are no pending validation requests
}
var isValid = form.valid(); //have to validate the form itself (because form.Valid() won't work on [Remote] attributes, thats why we need the code above
if (!isPending) {
ajaxLoader.hide();
if (isValid) {
$('#registerForm').submit(); //if there are no pending changes and the form is valid, you can send it
}
else {
$('#subButton').prop('disabled', false); //else we reenable the submit button
}
}};
Switch it around.
$("input[type='submit']").on("click", function (event) {
event.preventDefault();
$(this).prop("disabled", true);
// perform error checking
if (noErrors) {
$("#form").submit();
}
else {
$(this).prop("disabled", false);
}
});

Confirm box Twig, Symfony and Javascript

When a submit button is pushed, I want to give the user an alert to make sure they want to delete something.
So far, I have this to do so
In the Twig file
{{ form_start(form, {'attr': {'id': 'delete_form'}}) }}
And in the Javascript file
window.onload = function() {
confirmDelete();
};
function confirmDelete(){
var el = document.getElementById('delete_form');
if (el) {
el.addEventListener('submit', function () {
return confirm('Are you sure you want to delete this question?');
}, false);
}
else {
console.log("No form found");
}}
But now, when the cancel button of the alert is clicked, the data is still being deleted.
What am I doing wrong?
You are not preventing the form from being submited.
And in your confirm delete you will have to trigger submit event if the user clicks yes else do nothing.
// listen to the submit event
$('#delete_form').on('submit', function(e) {
// prevent form from being submitted
e.preventDefault();
confirmDelete();
});
function confirmDelete() {
var result = confirm('Are you sure you want to delete this question?');
// I do not know what result returns but in case that yes is true
if (result === true) {
$('#delete_form').submit();
}
}

Check existing mail with ajax and PHP

Is there any method to check if the mail (in a registration form) exist in my database while i'm writing it (before i click submit buttom).
This is my javascript function it work well when I click submit button:
<script type="text/javascript">
$(document).ready(function(){ //newly added
$('#_submit').click(function() {alert('in');
var emailVal = $('#mail').val(); // assuming this is a input text field
$.post('checkemail.php', {'mail' : emailVal}, function(data) {
if(data=='exist') return false;
else $('#form1').submit();
});
});
});
</script>
but I want to verify the mail before I submit (without I click any button)
I believe #_submit is a submit button. In that case, your <from> will be submitted without waiting for the ajax call to complete, since that is an asynchronous task.
In order to work around this, you should prevent the <form> submission by default, and once the ajax call completes, decide whether to submit the form or not depending on the response.
$(document).ready(function() { //newly added
$('#_submit').click(function(e) {
e.preventDefault(); // prevent default submission
alert('in, submission prevented - waiting for ajax response');
var emailVal = $('#mail').val(); // assuming this is a input text field
$.post('checkemail.php', {
'mail': emailVal
}, function(data) {
if (data == 'exist')
return false;
else
$('#form1').submit();
});
});
});
or you can simply use a type="button" button so that it doesn't trigger <form> submission.
something like that
$.ajax(url).done(function(response) {
if (response === true) {
$(form).submit();
} else {
console.log("not allowed");
});

JS/Ajax: grab input field value without refresh or button click

I am currently using js function to submit data without page refresh or button click. The input field is inside tab #2 that executes the js once the user stops typing. The problem is that the js is making the page refresh thus taking me back to tab#1. How can I prevent the page from refreshing? I thought i had included the necessary code in the JS function to stop this. EXAMPLE
<script>
$(document).ready(function() {
var timer;
$('#video-input1').on('keyup', function() {
var value = this.value;
clearTimeout(timer);
timer = setTimeout(function() {
//do your submit here
$("#ytVideo").submit()
//alert('submitted:' + value);
}, 2000);
});
//submit definition once submit is executed
$('#ytVideo').submit(function(e){
e.preventDefault(); //prevent page refresh
var form = $('#ytVideo').serialize();
//submit.php is the page where you submit your form
$.post('index.php#tab-2', form, function(data){
var x = $(data);
$("body").html(x);
});
return false;
});
return false;
});
</script>
try changing this line
//do your submit here
$("#ytVideo").submit()
to
$("#ytVideo").trigger("submit");
i believe the problem is that you define what submit should do after the form has been submitted this causes the page to reload.
Edited
try this change
$('#ytVideo').submit(function(event){
event.preventDefault(); //prevent page refresh
event.stopPropagation(); //+
var form = $('#ytVideo').serialize();
//submit.php is the page where you submit your form
$.post('index.php#tab-2', form, function(data){
var x = $(data);
$("body").html(x);
});
//- return false;
});
//- return false;
made some changes
Instead of .submit() you should use .triggerHandler('submit'). Docs and related question.

Categories