How do I add a confirm dialog (e.g. Are you sure you want to delete this row?) to a Forms table. Clicking the "x" next to the row deletes the row with no warning or dialog.
Thanks.
Rob,
Add this javascript to your form, it should prompt you before you delete a row.
var MyFormName = document.getElementById('form1');
var handler = MyFormName.addEventListener('submit', function(event)
$('.form-del-field').click(function () {
var a;
var prompt = confirm("Make a choice to Cancel, if not choose OK");
if (prompt == true) {
a = "You pressed OK!";
alert(a);
}
else if (prompt == false){
a = "You pressed Cancel, row will not be deleted!";
alert(a);
return false;
$(this).unbind(handler);
}
});
Very handy honestly and amazing that you have this here.
But when one just copy and pastes your code it seems to be broken (for me):
I had to adjust the code slightly to make it work for me:
$(document).ready(function () {
var MyFormName = document.getElementById('form1');
var handler = MyFormName.addEventListener('submit', function(event) {
MyFormName.bind("click", handler);
event.preventDefault();
return false;
}, true)
$('.Submit').on('click', function () {
var a;
var prompt = confirm("Make a choice to Cancel, if not choose OK");
if (prompt == true) {
a = "You pressed OK!";
alert(a);
}else if (prompt == false){
a = "You pressed Cancel, form will not be submitted!";
alert(a);
return false;
$(this).unbind(handler);
}
})
});
Not sure why, but this is just to help future people looking at this thread.
Cheers and thank you
I use an HTML/CSS/JavaScript solution for creating modal dialogs on my forms. I've shared that previously in this post here. You could take that same approach, but the trick would be hiding the row delete buttons from the table and adding your own buttons to launch the dialog. I don't really have the time to adapt that code for your specific case, but it's a starting point at least.
That will work, but also if you want to prompt and keep the form from submitting if someone chooses cancel, you could use the same code just with these additional few lines inside a handler:
var MyFormName = document.getElementById('form1');
var handler = MyFormName.addEventListener('submit', function(event)
MyFormName.bind("click", handler);
event.preventDefault();
return false;
}
, true);
$('.Submit').click(function () {
var a;
var prompt = confirm("Make a choice to Cancel, if not choose OK");
if (prompt == true) {
a = "You pressed OK!";
alert(a);
}
else if (prompt == false){
a = "You pressed Cancel, form will not be submitted!";
alert(a);
return false;
$(this).unbind(handler);
}
});
I posted this as I was leaving the office and I see it didn't highlight all the lines, a few are missing. It is actually inside another function, I will post the correct code as soon as I get in in the morning, sorry about that!