I have a contact form.
Now when I need to delete a record, I need a confirmation box to ask for user's confirmation. I've achieved this, so far so good. But the record gets deleted for both OK and Cancel buttons.
My code is as follows:
<td>Edit / Delete </td>
<script>
function check(){
if(confirm("Are you sure you want to delete?")){
window.location.href = "delete.php?id=<?php echo $row["first_name"]; ?>";
return true;
}
else{
header("Location: http://localhost/test/display.php?show_details=Show+Details");
return false;
}
}
</script>
What could I do to delete the records only after clicking OK button in the confirmation box and return to display.php(same page) on clicking Cancel?
It should navigate to delete.php only on clicking OK and stay in display.php on clicking Cancel.
I'm new to PHP.. Help please...
An HTML anchor has a default action for clicks on it: open a link. Now if you add another click handler in JavaScript, you will have to prevent the default action for that element and thus prevent the link from being opened.
To prevent the default event action from within an inline event handler (one that is setup using the attribute onclick in contrast to use addEventListener() in JS) you must return false in that event handler.
See also: How to prevent default event handling in an onclick method?
The following two snippets fix that issue and are also re-using the href-attribute, so it must not be hardcoded in JS again.
variant 1:
<p>
Edit
/
Delete
</p>
<script>
function check(anchor) {
/* Only open the delete-link, if the confirm returns TRUE */
if (confirm('Are you sure you want to delete?')) {
window.location.href = anchor.href;
}
/* Return FALSE to prevent the default link action */
return false;
}
</script>
variant 2:
<p>
Edit
/
<!-- Return FALSE to prevent the default link action -->
Delete
</p>
<script>
function check(anchor) {
/* Only open the delete-link, if the confirm returns TRUE */
if (confirm('Are you sure you want to delete?')) {
window.location.href = anchor.href;
}
}
</script>
variant 3A:
Not returning false, but using event.preventDefault(). (Inspired by the comment of #ths)
<p>
Edit
/
Delete
</p>
<script>
function check(event, anchor) {
/* Prevent the default link action */
event.preventDefault();
/* Only open the delete-link, if the confirm returns TRUE */
if (confirm('Are you sure you want to delete?')) {
window.location.href = anchor.href;
}
}
</script>
variant 3B:
Not returning false, but using event.preventDefault(). (Inspired by the comment of #ths)
<p>
Edit
/
Delete
</p>
<script>
function check(anchor) {
/* Only open the delete-link, if the confirm returns TRUE */
if (confirm('Are you sure you want to delete?')) {
window.location.href = anchor.href;
}
}
</script>
Related
I'm using the following <a> tag to display a simple confirm which it does. However, when I click the Cancel button it still performs the post method. From my understanding, having the return in front of confirm should cause the form to not post if the Cancel button is clicked.
<a href="#"
data-potr-action="delete"
data-potr-val="#item.RID"
onclick="return confirm('Are you sure you want to delete this Request?');"
class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-trash"></i> Delete
</a>
I have this code at the end of the page but I don't think it has anything to do with the issue. I didn't thinking it would fire the click event when selecting Cancel in the Confirm dialog.
This just takes the values in the data-action and data-value and stores them to a hidden field. This is done on click which it shouldn't be getting to.
#section scripts {
<script>
$(document).ready(function () {
// Hook events on buttons and anchors
buildClickEvents();
});
// Hook events on buttons and anchors
function buildClickEvents() {
$("[data-potr-action]").on("click", function (e) {
e.preventDefault();
$("#EventCommand").val(
$(this).data("potr-action"));
$("#EventArgument").val(
$(this).attr("data-potr-val"));
$("form").submit();
});
}
</script>
}
To answer your question no confirm doesn't block form post. It return true if pressed "OK" or false if pressed "Cancel" button. See this from W3c
What you could is as below:
function buildClickEvents() {
$("[data-potr-action]").on("click", function (e) {
e.preventDefault();
var result = confirm('Are you sure you want to delete this Request?');
if(result == false){
return;
}
$("#EventCommand").val(
$(this).data("potr-action"));
$("#EventArgument").val(
$(this).attr("data-potr-val"));
$("form").submit();
});
}
And remove the below from a tag:
onclick="return confirm('Are you sure you want to delete this Request?');"
$("[data-potr-action]").on("click", function (e) {
if(confirm("your message")){
$("#EventCommand").val(
$(this).data("potr-action"));
$("#EventArgument").val(
$(this).attr("data-potr-val"));
$("form").submit();
}
e.preventDefault();
});
I need to confirm delete before submit form using javascript, i tried this code but it didnt work :
Delete
You should confirm first before submitting the form. And you need to set a condition whether it returned true or false
Delete
Submit form only when user confirm it otherwise set return false. So your form will not be submitted.
function confirmdelete() {
if (confirm("Are you sure?")) {
// submit form
}
return false;
}
Please check the comments against the code.
$(function () {
//Attach click event to the link. In this case all links
//You might want to update this, make it more specific by using id or name or class of the a tag
$('a').on('click', function (event) {
//prevent the default action of the tag
event.preventDefault();
//confirm
var conf = confirm('Confirm Delete');
if (conf) {
//you action if true
}
else {
return;
}
});
});
first of all, i already trying maybe all of the possible answer in this site but nothing is working for me.
i want to show pop up windows confirmation before delete my data. i use this
Delete
Maybe you need my controller
public function delete($id = 0) {
$id OR redirect(site_url('admin/barang'));
$this->barang_m->delete($id);
redirect(site_url('admin/barang'));
}
My model barang_m
public function __construct(){
parent::__construct();
parent::set_table('barang','idBarang');
}
public function delete($id = 0) {
if($data = parent::get($id)) {
parent::delete($id);
return true;
}
return false;
}
but when i click cancel it still delete the data even when i clicked 'x' to close the confirmation window. i'm so frustated please help me. Or maybe you can tell me why this problem occurs ?
**i alrady tried this possible answer Codeigniter when i click delete i want pop up notification if if click yes or not
jQuery delete confirmation box
Confirm box in CodeIgniter anchor link to delete record
and many more
try
Delete
and your function like this
function isconfirm(url_val){
alert(url_val);
if(confirm('Are you sure ?') == false)
{
return false;
}
else
{
location.href=url_val;
}
}
You could also try
Delete
And js would be
$('.confirmClick').click(()=> {
var sure = confirm('Are you sure ?');
if(sure){
return true;
}
return false;
})
You need to stop page from opening link when you press cancel.
But as seen in code its looks like you missed condition to check so.
Try this may solved you problem.
Delete
<script>
function isconfirm(){
if(!confirm('Are you sure ?')){
event.preventDefault();
return;
}
return true;
}
</script>
It's because you are running it out of the button itself and returning it. So you're saying, delete the button and return the confirmation.
Probably deleting the return will work, or make a function and make sure it doesn't return it but puts what you want in a variable or something.
<a href="javascript:;" onclick="return confirm_Action('<?php echo base_url(); ?>index.php/admin/delete_department/<?php echo $dept['Dept_id']; ?>');" ><button> DELETE</button></a>
Then, Your function confirm_Action could be like this:
//THis Allows Me To Control The Delete Actions
function confirm_Action(url){
// alert(url);
if(confirm('Are You Sure, This Action Can\'t Be Reversed?') == false)
{
return false;
}
else
{
location.href=url;
}
}
just like how #M. Deepak did it...
Thanks... Hope this helps
Is there away that the confirm box appeared, if i clicked "ok" it will go to another page and if i clicked "cancel" it will just stay and the current page will not reload again? THANK YOU.
function reload()
{
var r=confirm("Do you want to leave page!");
if (r)
{
//write redirection code
window.location = "http://www.yoururl.com";
}
else
{
//do nothing
}
}
call this function when you want to confirmation from user.........
You can use confirm() for this, which returns true on ok or false on cancel.
function myFunction(){
if(confirm("Would you like go to other page?")){
window.location = "http://yahoo.com";
}else{
alert('fine, if not want');
}
}
myFunction();
Updated
DEMO
UPDATED2
<button onclick="return logout()" >logout</button>
<script>
function logout(){
if(confirm("Would you like go to other page?")){
window.location = "failed.php";
}else{
//do your stuff on if press cancel
}
}
</script>
You may try doing
<script>
function myfunction(){
if(confirm("The confirm message")){
youDoTheThingsHere();
return false;
}else{
console.log("I cancelled the dialog!");
return false;
}
}
</script>
I'm not sure about your certain situation and the code that is involved when you call the confirm, but this has worked for me. The other option you may look at as a last resort is using something like a bootstrap modal to trigger a "confirm" modal. With the bootstrap modal you can then style it how you want... hope I could help!
Use "return None"
function myFunction(){
if (confirm("Confirm to reset your content!")){
location.reload();
}else{
return None;
}
}
In the case that a button is clicked multiple times on a page - Is there a way to figure out using javascript/jquery that a postback is already in progress and cancels the new attempt to submit the page?
Thanks
You can avoid users from double clicking by disabling whatever form elements can cause a form submit.
Checkout http://greatwebguy.com/programming/dom/prevent-double-submit-with-jquery/ for an example.
You can disable the button on first click, so that you could not click it when the post is in progress, and re enable it when the post-back has finished.
<script type="text/javascript" language="JavaScript">
var submitted = false;
function SubmitTheForm() {
if(submitted == true) { return; }
document.myform.submit();
document.myform.mybutton.value = 'Thank You!';
document.myform.mybutton.disabled = true;
submitted = true;
}
</script>
<form method="post" action="#">
<input type="submit" onclick=return SubmitTheForm()>
</form>
you could always just disable the button in the onclick handler.
$('input[type="submit"]').click(function(e) {
e.preventDefault();
var self = this;
$(self).attr('disabled', 'disabled');
$.post('url',$(self).closest('form').serialize(), function() {
$(self).removeAttr('disabled'); // re-enable after request complete.
});
});
You could have your click event set a variable in your click handler to true and only allow the handler to proceed when the value is false. Of course you will have to set it to false again when your callback finishes.
if (!processInProgress) {
processInProgress = 1
// start the process
}