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();
}
}
Related
I am trying to create an alert, to insure that the user is submitting the correct information and if 'Ok' is clicked rather than cancel, the link is clicked and <a> sent. I have nearly achieved it, the alert activates, however does not activate if ok is clicked. Unfortunately, I am not a js wizard, yet..
EDIT :
click => preventDefault => alert (yes, no) if yes(send) if no dont.
<script>
jQuery(document).ready(function($){
$("input.btn-default").click(function(e){
e.preventDefault();
var answer=confirm('Are you sure that you want to do this?');
if(answer == true){
///not sure how to remove the prevent default and send link?!
}
else{
return;
}
});
});
</script>
Try the following code using return false; if the user cancel confirm dialog and window.open( $(this).att('href') ); to open the link when he user click OK :
$("input.btn-default").click(function(e)
{
e.preventDefault();
if( confirm('Are you sure that you want to do this?') )
{
window.open( $(this).att('href') );
}
else
{
return false;
}
});
Hope this helps.
confirm() is modal, so you just need to check for answer:
jQuery(document).ready(function ($) {
$("input.btn-default").click(function (e) {
var answer = confirm('Are you sure that you want to do this?');
if (!answer) {
e.preventDefault();
}
});
});
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;
});
});
After my button click, I would check if my text fields are not empty. My check works, but if I show my message it's show for a few seconds. Probably the duration of my button click. Here is some code I've tried.
<form>
<div id="errorblock">
<p id="errortext">Error.</p>
</div>
<!-- here are my input fields-->
<button>Send</button>
</form>
This is where I add my event listener after initialisation of the page:
document.getElementsByTagName("button")[0].addEventListener("click", function(){
sendEmail();
});
function sendEmail() {
//check if all fields are fill in. If not do this code;
document.getElementById("errortext").innerHTML = "Fill in all the fields please.";
var errorblock = document.getElementById("errorblock");
errorblock.style.visibility = "visible";
errorblock.style.height = "46px";
}
Can anyone help me?
Thanks
By default HTMLButtonElement has type="submit". It means that on button click the form is submitted. You need to make sure you prevent this submission in case of errors in the form. For example by calling preventDefault methods of the event object:
document.getElementsByTagName("button")[0].addEventListener("click", function (e) {
if (!sendEmail()) {
e.preventDefault();
}
});
function sendEmail() {
//check if all fields are fill in. If not do this code;
document.getElementById("errortext").innerHTML = "Fill in all the fields please.";
var errorblock = document.getElementById("errorblock");
errorblock.style.visibility = "visible";
errorblock.style.height = "46px";
// if there are errors return false
// return true if input is correct
return false;
}
Also I recommend to listen onsubmit event on the form instead of button click event:
document.querySelector("form").addEventListener("submit", function (e) {
if (!sendEmail()) {
e.preventDefault();
}
});
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");
});
I ask the user "Are you sure?" when clicking on a form submit button:
{{ Form::open(array('url' => 'myhome/pic-remove', 'onsubmit' => 'return confirm(\'Are you sure?\');')) }}
And I deactivate the submit button on click:
$('#submitbutton').click(function() {
$('#submitbutton').hide();
$('#isloading').show();
});
The Problem is, the submit button is also deactivated, if the user 'is not sure' and clicks 'cancel'.
How can I deactivate the submit button only if user 'is sure' on the first question and clicks 'ok' ?
edit:
ok i have it like this now, seems to work
$('#submitbuttonconfirm').click(function() {
var r = confirm('Are you sure?');
if (r == true)
{
$('#submitbuttonconfirm').hide();
$('#isloading').show();
return true;
}
else
{
return false;
}
});
I think the problem is, that the click event is fired before the submit event, so you hide the submit button before you even ask the user.
You can use jQuery to handle submit event instead of of using click and disable the button there:
{{ Form::open(array('url' => 'myhome/pic-remove')) }}
$('form').submit(function(e) { // Use the id of the form here, if you have more than one
if(confirm('Are you sure?')) {
$('#submitbutton').hide();
$('#isloading').show();
} else {
return false;
}
});
I assume the top section is you sending the JavaScript to be executed from the server to the client. I'm not sure why you're doing that instead of writing it as JavaScript directly but I suppose it doesn't matter. As Givi said, get the response from the confirm dialog and then use it as a decision point. Since I'm not sure what this is, I'm only guessing as to this code but it should give you an idea.
{
{ Form::open(
array(
'url' => 'myhome/pic-remove',
'onsubmit' => 'if(confirm(\'Are you sure?\')){ $(\'#submitbutton\').hide(); $(\'#isloading\').show(); return true; } return false; '
)
) }
}