Cancel on confirm still submits form
Multi tool use
up vote
2
down vote
favorite
I have a form with a submit and cancel button and I want to show a different confirm
message bepending on which button is clicked so this is what I've come up with.
function confirmDialog(buttonId)
switch (buttonId)
case "cancel":
var result = confirm("cancel message");
submitForm(result);
break;
case "submit":
var result = confirm("Submit message");
submitForm(result);
break;
;
And my submitForm
function looks like
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
return false;
;
Now my issue is that when I click cancel the form still gets submited. Can someone tell me what I'm doing wrong please. I have return false;
in my else
condition so I really don't know why it still submits the forms.
I've looked at the following questions but I'm still facing the issue
jQuery Still Submits Ajax Post Even When “Cancel” is clicked on Confirm Dialog
javascript confirm (cancel) still submits form when returning false
Edit: Cancel button html as requested
<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
Further Edit
I call the confirmDialog
function in the click event the appropriate button as follows:
$("#cancel").click(function ()
var buttonId = $(this).attr("id");
confirmDialog(buttonId)
);
javascript jquery forms
|
show 1 more comment
up vote
2
down vote
favorite
I have a form with a submit and cancel button and I want to show a different confirm
message bepending on which button is clicked so this is what I've come up with.
function confirmDialog(buttonId)
switch (buttonId)
case "cancel":
var result = confirm("cancel message");
submitForm(result);
break;
case "submit":
var result = confirm("Submit message");
submitForm(result);
break;
;
And my submitForm
function looks like
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
return false;
;
Now my issue is that when I click cancel the form still gets submited. Can someone tell me what I'm doing wrong please. I have return false;
in my else
condition so I really don't know why it still submits the forms.
I've looked at the following questions but I'm still facing the issue
jQuery Still Submits Ajax Post Even When “Cancel” is clicked on Confirm Dialog
javascript confirm (cancel) still submits form when returning false
Edit: Cancel button html as requested
<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
Further Edit
I call the confirmDialog
function in the click event the appropriate button as follows:
$("#cancel").click(function ()
var buttonId = $(this).attr("id");
confirmDialog(buttonId)
);
javascript jquery forms
1
please post your html code and from where you are calling confirmDialog funciton?
– user7417866
Mar 9 '17 at 12:31
Looks like because if you click cancel soconfirmDialog('cancel')
runs, and then in the confirm dialogue you click "OK", this will send a booltrue
value to thesubmitForm
function?
– Stu
Mar 9 '17 at 12:32
Please post your html code. I would like see how you declared yourCancel
button
– David R
Mar 9 '17 at 12:33
@DavidR I've updated my question
– Code
Mar 9 '17 at 12:36
@Stu If I click on theCancel
button with the id of#cancel
then I will get theconfirm ("cancel message")
alert. From which I click cancel and this is where the form submits. In myconsole.log(result)
is false so it should not submit the form
– Code
Mar 9 '17 at 12:38
|
show 1 more comment
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I have a form with a submit and cancel button and I want to show a different confirm
message bepending on which button is clicked so this is what I've come up with.
function confirmDialog(buttonId)
switch (buttonId)
case "cancel":
var result = confirm("cancel message");
submitForm(result);
break;
case "submit":
var result = confirm("Submit message");
submitForm(result);
break;
;
And my submitForm
function looks like
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
return false;
;
Now my issue is that when I click cancel the form still gets submited. Can someone tell me what I'm doing wrong please. I have return false;
in my else
condition so I really don't know why it still submits the forms.
I've looked at the following questions but I'm still facing the issue
jQuery Still Submits Ajax Post Even When “Cancel” is clicked on Confirm Dialog
javascript confirm (cancel) still submits form when returning false
Edit: Cancel button html as requested
<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
Further Edit
I call the confirmDialog
function in the click event the appropriate button as follows:
$("#cancel").click(function ()
var buttonId = $(this).attr("id");
confirmDialog(buttonId)
);
javascript jquery forms
I have a form with a submit and cancel button and I want to show a different confirm
message bepending on which button is clicked so this is what I've come up with.
function confirmDialog(buttonId)
switch (buttonId)
case "cancel":
var result = confirm("cancel message");
submitForm(result);
break;
case "submit":
var result = confirm("Submit message");
submitForm(result);
break;
;
And my submitForm
function looks like
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
return false;
;
Now my issue is that when I click cancel the form still gets submited. Can someone tell me what I'm doing wrong please. I have return false;
in my else
condition so I really don't know why it still submits the forms.
I've looked at the following questions but I'm still facing the issue
jQuery Still Submits Ajax Post Even When “Cancel” is clicked on Confirm Dialog
javascript confirm (cancel) still submits form when returning false
Edit: Cancel button html as requested
<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
Further Edit
I call the confirmDialog
function in the click event the appropriate button as follows:
$("#cancel").click(function ()
var buttonId = $(this).attr("id");
confirmDialog(buttonId)
);
javascript jquery forms
javascript jquery forms
edited May 23 '17 at 12:00
Community♦
11
11
asked Mar 9 '17 at 12:27
Code
664728
664728
1
please post your html code and from where you are calling confirmDialog funciton?
– user7417866
Mar 9 '17 at 12:31
Looks like because if you click cancel soconfirmDialog('cancel')
runs, and then in the confirm dialogue you click "OK", this will send a booltrue
value to thesubmitForm
function?
– Stu
Mar 9 '17 at 12:32
Please post your html code. I would like see how you declared yourCancel
button
– David R
Mar 9 '17 at 12:33
@DavidR I've updated my question
– Code
Mar 9 '17 at 12:36
@Stu If I click on theCancel
button with the id of#cancel
then I will get theconfirm ("cancel message")
alert. From which I click cancel and this is where the form submits. In myconsole.log(result)
is false so it should not submit the form
– Code
Mar 9 '17 at 12:38
|
show 1 more comment
1
please post your html code and from where you are calling confirmDialog funciton?
– user7417866
Mar 9 '17 at 12:31
Looks like because if you click cancel soconfirmDialog('cancel')
runs, and then in the confirm dialogue you click "OK", this will send a booltrue
value to thesubmitForm
function?
– Stu
Mar 9 '17 at 12:32
Please post your html code. I would like see how you declared yourCancel
button
– David R
Mar 9 '17 at 12:33
@DavidR I've updated my question
– Code
Mar 9 '17 at 12:36
@Stu If I click on theCancel
button with the id of#cancel
then I will get theconfirm ("cancel message")
alert. From which I click cancel and this is where the form submits. In myconsole.log(result)
is false so it should not submit the form
– Code
Mar 9 '17 at 12:38
1
1
please post your html code and from where you are calling confirmDialog funciton?
– user7417866
Mar 9 '17 at 12:31
please post your html code and from where you are calling confirmDialog funciton?
– user7417866
Mar 9 '17 at 12:31
Looks like because if you click cancel so
confirmDialog('cancel')
runs, and then in the confirm dialogue you click "OK", this will send a bool true
value to the submitForm
function?– Stu
Mar 9 '17 at 12:32
Looks like because if you click cancel so
confirmDialog('cancel')
runs, and then in the confirm dialogue you click "OK", this will send a bool true
value to the submitForm
function?– Stu
Mar 9 '17 at 12:32
Please post your html code. I would like see how you declared your
Cancel
button– David R
Mar 9 '17 at 12:33
Please post your html code. I would like see how you declared your
Cancel
button– David R
Mar 9 '17 at 12:33
@DavidR I've updated my question
– Code
Mar 9 '17 at 12:36
@DavidR I've updated my question
– Code
Mar 9 '17 at 12:36
@Stu If I click on the
Cancel
button with the id of #cancel
then I will get the confirm ("cancel message")
alert. From which I click cancel and this is where the form submits. In my console.log(result)
is false so it should not submit the form– Code
Mar 9 '17 at 12:38
@Stu If I click on the
Cancel
button with the id of #cancel
then I will get the confirm ("cancel message")
alert. From which I click cancel and this is where the form submits. In my console.log(result)
is false so it should not submit the form– Code
Mar 9 '17 at 12:38
|
show 1 more comment
5 Answers
5
active
oldest
votes
up vote
2
down vote
your button have default behavior of submit
replace
<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
with
<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
... Edit after your update Try this code ....
replace your code
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
return false;
;
with
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
const element = document.querySelector('myform');
element.addEventListener('submit', event =>
event.preventDefault();
console.log('Form submission cancelled.');
);
;
----- Alternative working code if you consider changing your HTML structure ---
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<form id="MyForm">
<button id="btnSubmit" class="btn btn-primary">Submit</button>
<button id="btnCancel" class="btn btn-danger">Cancel</button>
</form>
<script type="text/javascript">
$(function ()
$("#btnSubmit").click(function (e)
e.preventDefault();
$('#MyForm').submit();
);
$("#btnCancel").click(function (e)
e.preventDefault();
var result = confirm("Sure Cancel?");
if (result)
const element = document.querySelector('#MyForm');
element.addEventListener('submit', function (e)
e.preventDefault();
);
alert("Form Submission Canceled");
else
$("#MyForm").submit();
alert("Form Submitted");
);
)
</script>
</body>
</html>
still the same issue
– Code
Mar 9 '17 at 12:44
from where you are calling confirmDialog function?
– user7417866
Mar 9 '17 at 12:50
TheconfirmDialog
is called int the click event of the appropriate button
– Code
Mar 9 '17 at 12:51
could you please post the same, I guess you are calling function in wrong way..
– user7417866
Mar 9 '17 at 12:52
Ok, one sec i'll add the code
– Code
Mar 9 '17 at 12:52
|
show 8 more comments
up vote
0
down vote
Your <button>
tag's type
attribute seems to have submit
as its value, just remove the type="submit"
attribute in your HTML code and keep it just <button id="cancel".... />
<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
This will resolve your issue. Hope this helps!
I've just tried this and I still get the same issue :/
– Code
Mar 9 '17 at 12:43
Can you please try clearing your browser cache and execute the page once again?
– David R
Mar 9 '17 at 13:21
Still the same problem
– Code
Mar 9 '17 at 14:18
add a comment |
up vote
0
down vote
The form submit is only omitted when "onsubmit" gets "false" from the Javascript handler.
Try this
- "return submitForm..." (instead of just "submitForm...")
(2. Remove semicolons after function's closing brackets)
Update
Maybe the problem is the combination of input type=submit
and $("#myform").submit();
If <form onsubmit=...
receives no false
(for example from a function return), the form will be submitted.
If <input type=submit onclick=...
receives no false
(for example from a function return), the button action (form submission) will be performed.
Raw (unchecked) solution option without using input type=submit
:
HTML
<form id="myform" onsubmit="formValidation()">
<button value="Submit" onclick="buttonHandler(true)">
<button value="Cancel" onclick="buttonHandler(false)">
</form>
JS
function formValidation()
return $("#myform").valid();
function buttonHandler(isSubmit)
if (isSubmit ==== true)
if (confirm(submitMessage) === true)
$("#myform").submit();
else
if (confirm(cancelMessage) === true)
$("#myform").submit();
after submitForm function?
– Code
Mar 9 '17 at 12:44
After each function, function definitions just need semicolons when assigned as var x = function() ; Otherwise they are at least obsolete / not needed. (as far as I know)
– Gunnar
Mar 9 '17 at 12:46
Thanks but I still have the same issue after trying your suggestion
– Code
Mar 9 '17 at 12:49
add a comment |
up vote
0
down vote
You can get this to work if you use an input tag instead of button tag and retain your styles by keeping your classes. e.g.
<input id="SomeId"
class="btn btn-danger btn-block"
onclick="return confirm('Are you sure you want to delete: X');"
value="Delete" />
add a comment |
up vote
0
down vote
I had similar problem and solved it with click event, which is very similar to your problem.
Try this:
$("#cancel").click(function ()
var buttonId = $(this).attr("id");
confirmDialog(buttonId);
return false;
);
Hope it helps.
add a comment |
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
your button have default behavior of submit
replace
<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
with
<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
... Edit after your update Try this code ....
replace your code
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
return false;
;
with
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
const element = document.querySelector('myform');
element.addEventListener('submit', event =>
event.preventDefault();
console.log('Form submission cancelled.');
);
;
----- Alternative working code if you consider changing your HTML structure ---
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<form id="MyForm">
<button id="btnSubmit" class="btn btn-primary">Submit</button>
<button id="btnCancel" class="btn btn-danger">Cancel</button>
</form>
<script type="text/javascript">
$(function ()
$("#btnSubmit").click(function (e)
e.preventDefault();
$('#MyForm').submit();
);
$("#btnCancel").click(function (e)
e.preventDefault();
var result = confirm("Sure Cancel?");
if (result)
const element = document.querySelector('#MyForm');
element.addEventListener('submit', function (e)
e.preventDefault();
);
alert("Form Submission Canceled");
else
$("#MyForm").submit();
alert("Form Submitted");
);
)
</script>
</body>
</html>
still the same issue
– Code
Mar 9 '17 at 12:44
from where you are calling confirmDialog function?
– user7417866
Mar 9 '17 at 12:50
TheconfirmDialog
is called int the click event of the appropriate button
– Code
Mar 9 '17 at 12:51
could you please post the same, I guess you are calling function in wrong way..
– user7417866
Mar 9 '17 at 12:52
Ok, one sec i'll add the code
– Code
Mar 9 '17 at 12:52
|
show 8 more comments
up vote
2
down vote
your button have default behavior of submit
replace
<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
with
<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
... Edit after your update Try this code ....
replace your code
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
return false;
;
with
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
const element = document.querySelector('myform');
element.addEventListener('submit', event =>
event.preventDefault();
console.log('Form submission cancelled.');
);
;
----- Alternative working code if you consider changing your HTML structure ---
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<form id="MyForm">
<button id="btnSubmit" class="btn btn-primary">Submit</button>
<button id="btnCancel" class="btn btn-danger">Cancel</button>
</form>
<script type="text/javascript">
$(function ()
$("#btnSubmit").click(function (e)
e.preventDefault();
$('#MyForm').submit();
);
$("#btnCancel").click(function (e)
e.preventDefault();
var result = confirm("Sure Cancel?");
if (result)
const element = document.querySelector('#MyForm');
element.addEventListener('submit', function (e)
e.preventDefault();
);
alert("Form Submission Canceled");
else
$("#MyForm").submit();
alert("Form Submitted");
);
)
</script>
</body>
</html>
still the same issue
– Code
Mar 9 '17 at 12:44
from where you are calling confirmDialog function?
– user7417866
Mar 9 '17 at 12:50
TheconfirmDialog
is called int the click event of the appropriate button
– Code
Mar 9 '17 at 12:51
could you please post the same, I guess you are calling function in wrong way..
– user7417866
Mar 9 '17 at 12:52
Ok, one sec i'll add the code
– Code
Mar 9 '17 at 12:52
|
show 8 more comments
up vote
2
down vote
up vote
2
down vote
your button have default behavior of submit
replace
<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
with
<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
... Edit after your update Try this code ....
replace your code
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
return false;
;
with
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
const element = document.querySelector('myform');
element.addEventListener('submit', event =>
event.preventDefault();
console.log('Form submission cancelled.');
);
;
----- Alternative working code if you consider changing your HTML structure ---
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<form id="MyForm">
<button id="btnSubmit" class="btn btn-primary">Submit</button>
<button id="btnCancel" class="btn btn-danger">Cancel</button>
</form>
<script type="text/javascript">
$(function ()
$("#btnSubmit").click(function (e)
e.preventDefault();
$('#MyForm').submit();
);
$("#btnCancel").click(function (e)
e.preventDefault();
var result = confirm("Sure Cancel?");
if (result)
const element = document.querySelector('#MyForm');
element.addEventListener('submit', function (e)
e.preventDefault();
);
alert("Form Submission Canceled");
else
$("#MyForm").submit();
alert("Form Submitted");
);
)
</script>
</body>
</html>
your button have default behavior of submit
replace
<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
with
<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
... Edit after your update Try this code ....
replace your code
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
return false;
;
with
function submitForm(result)
console.log(result); //this is false when I click cancel in the confirm box
if (result && $("#myform").valid())
$("#myform").submit();
else
const element = document.querySelector('myform');
element.addEventListener('submit', event =>
event.preventDefault();
console.log('Form submission cancelled.');
);
;
----- Alternative working code if you consider changing your HTML structure ---
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<form id="MyForm">
<button id="btnSubmit" class="btn btn-primary">Submit</button>
<button id="btnCancel" class="btn btn-danger">Cancel</button>
</form>
<script type="text/javascript">
$(function ()
$("#btnSubmit").click(function (e)
e.preventDefault();
$('#MyForm').submit();
);
$("#btnCancel").click(function (e)
e.preventDefault();
var result = confirm("Sure Cancel?");
if (result)
const element = document.querySelector('#MyForm');
element.addEventListener('submit', function (e)
e.preventDefault();
);
alert("Form Submission Canceled");
else
$("#MyForm").submit();
alert("Form Submitted");
);
)
</script>
</body>
</html>
edited Mar 9 '17 at 17:59
answered Mar 9 '17 at 12:39
user7417866
9161311
9161311
still the same issue
– Code
Mar 9 '17 at 12:44
from where you are calling confirmDialog function?
– user7417866
Mar 9 '17 at 12:50
TheconfirmDialog
is called int the click event of the appropriate button
– Code
Mar 9 '17 at 12:51
could you please post the same, I guess you are calling function in wrong way..
– user7417866
Mar 9 '17 at 12:52
Ok, one sec i'll add the code
– Code
Mar 9 '17 at 12:52
|
show 8 more comments
still the same issue
– Code
Mar 9 '17 at 12:44
from where you are calling confirmDialog function?
– user7417866
Mar 9 '17 at 12:50
TheconfirmDialog
is called int the click event of the appropriate button
– Code
Mar 9 '17 at 12:51
could you please post the same, I guess you are calling function in wrong way..
– user7417866
Mar 9 '17 at 12:52
Ok, one sec i'll add the code
– Code
Mar 9 '17 at 12:52
still the same issue
– Code
Mar 9 '17 at 12:44
still the same issue
– Code
Mar 9 '17 at 12:44
from where you are calling confirmDialog function?
– user7417866
Mar 9 '17 at 12:50
from where you are calling confirmDialog function?
– user7417866
Mar 9 '17 at 12:50
The
confirmDialog
is called int the click event of the appropriate button– Code
Mar 9 '17 at 12:51
The
confirmDialog
is called int the click event of the appropriate button– Code
Mar 9 '17 at 12:51
could you please post the same, I guess you are calling function in wrong way..
– user7417866
Mar 9 '17 at 12:52
could you please post the same, I guess you are calling function in wrong way..
– user7417866
Mar 9 '17 at 12:52
Ok, one sec i'll add the code
– Code
Mar 9 '17 at 12:52
Ok, one sec i'll add the code
– Code
Mar 9 '17 at 12:52
|
show 8 more comments
up vote
0
down vote
Your <button>
tag's type
attribute seems to have submit
as its value, just remove the type="submit"
attribute in your HTML code and keep it just <button id="cancel".... />
<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
This will resolve your issue. Hope this helps!
I've just tried this and I still get the same issue :/
– Code
Mar 9 '17 at 12:43
Can you please try clearing your browser cache and execute the page once again?
– David R
Mar 9 '17 at 13:21
Still the same problem
– Code
Mar 9 '17 at 14:18
add a comment |
up vote
0
down vote
Your <button>
tag's type
attribute seems to have submit
as its value, just remove the type="submit"
attribute in your HTML code and keep it just <button id="cancel".... />
<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
This will resolve your issue. Hope this helps!
I've just tried this and I still get the same issue :/
– Code
Mar 9 '17 at 12:43
Can you please try clearing your browser cache and execute the page once again?
– David R
Mar 9 '17 at 13:21
Still the same problem
– Code
Mar 9 '17 at 14:18
add a comment |
up vote
0
down vote
up vote
0
down vote
Your <button>
tag's type
attribute seems to have submit
as its value, just remove the type="submit"
attribute in your HTML code and keep it just <button id="cancel".... />
<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
This will resolve your issue. Hope this helps!
Your <button>
tag's type
attribute seems to have submit
as its value, just remove the type="submit"
attribute in your HTML code and keep it just <button id="cancel".... />
<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>
This will resolve your issue. Hope this helps!
answered Mar 9 '17 at 12:38
David R
6,84642450
6,84642450
I've just tried this and I still get the same issue :/
– Code
Mar 9 '17 at 12:43
Can you please try clearing your browser cache and execute the page once again?
– David R
Mar 9 '17 at 13:21
Still the same problem
– Code
Mar 9 '17 at 14:18
add a comment |
I've just tried this and I still get the same issue :/
– Code
Mar 9 '17 at 12:43
Can you please try clearing your browser cache and execute the page once again?
– David R
Mar 9 '17 at 13:21
Still the same problem
– Code
Mar 9 '17 at 14:18
I've just tried this and I still get the same issue :/
– Code
Mar 9 '17 at 12:43
I've just tried this and I still get the same issue :/
– Code
Mar 9 '17 at 12:43
Can you please try clearing your browser cache and execute the page once again?
– David R
Mar 9 '17 at 13:21
Can you please try clearing your browser cache and execute the page once again?
– David R
Mar 9 '17 at 13:21
Still the same problem
– Code
Mar 9 '17 at 14:18
Still the same problem
– Code
Mar 9 '17 at 14:18
add a comment |
up vote
0
down vote
The form submit is only omitted when "onsubmit" gets "false" from the Javascript handler.
Try this
- "return submitForm..." (instead of just "submitForm...")
(2. Remove semicolons after function's closing brackets)
Update
Maybe the problem is the combination of input type=submit
and $("#myform").submit();
If <form onsubmit=...
receives no false
(for example from a function return), the form will be submitted.
If <input type=submit onclick=...
receives no false
(for example from a function return), the button action (form submission) will be performed.
Raw (unchecked) solution option without using input type=submit
:
HTML
<form id="myform" onsubmit="formValidation()">
<button value="Submit" onclick="buttonHandler(true)">
<button value="Cancel" onclick="buttonHandler(false)">
</form>
JS
function formValidation()
return $("#myform").valid();
function buttonHandler(isSubmit)
if (isSubmit ==== true)
if (confirm(submitMessage) === true)
$("#myform").submit();
else
if (confirm(cancelMessage) === true)
$("#myform").submit();
after submitForm function?
– Code
Mar 9 '17 at 12:44
After each function, function definitions just need semicolons when assigned as var x = function() ; Otherwise they are at least obsolete / not needed. (as far as I know)
– Gunnar
Mar 9 '17 at 12:46
Thanks but I still have the same issue after trying your suggestion
– Code
Mar 9 '17 at 12:49
add a comment |
up vote
0
down vote
The form submit is only omitted when "onsubmit" gets "false" from the Javascript handler.
Try this
- "return submitForm..." (instead of just "submitForm...")
(2. Remove semicolons after function's closing brackets)
Update
Maybe the problem is the combination of input type=submit
and $("#myform").submit();
If <form onsubmit=...
receives no false
(for example from a function return), the form will be submitted.
If <input type=submit onclick=...
receives no false
(for example from a function return), the button action (form submission) will be performed.
Raw (unchecked) solution option without using input type=submit
:
HTML
<form id="myform" onsubmit="formValidation()">
<button value="Submit" onclick="buttonHandler(true)">
<button value="Cancel" onclick="buttonHandler(false)">
</form>
JS
function formValidation()
return $("#myform").valid();
function buttonHandler(isSubmit)
if (isSubmit ==== true)
if (confirm(submitMessage) === true)
$("#myform").submit();
else
if (confirm(cancelMessage) === true)
$("#myform").submit();
after submitForm function?
– Code
Mar 9 '17 at 12:44
After each function, function definitions just need semicolons when assigned as var x = function() ; Otherwise they are at least obsolete / not needed. (as far as I know)
– Gunnar
Mar 9 '17 at 12:46
Thanks but I still have the same issue after trying your suggestion
– Code
Mar 9 '17 at 12:49
add a comment |
up vote
0
down vote
up vote
0
down vote
The form submit is only omitted when "onsubmit" gets "false" from the Javascript handler.
Try this
- "return submitForm..." (instead of just "submitForm...")
(2. Remove semicolons after function's closing brackets)
Update
Maybe the problem is the combination of input type=submit
and $("#myform").submit();
If <form onsubmit=...
receives no false
(for example from a function return), the form will be submitted.
If <input type=submit onclick=...
receives no false
(for example from a function return), the button action (form submission) will be performed.
Raw (unchecked) solution option without using input type=submit
:
HTML
<form id="myform" onsubmit="formValidation()">
<button value="Submit" onclick="buttonHandler(true)">
<button value="Cancel" onclick="buttonHandler(false)">
</form>
JS
function formValidation()
return $("#myform").valid();
function buttonHandler(isSubmit)
if (isSubmit ==== true)
if (confirm(submitMessage) === true)
$("#myform").submit();
else
if (confirm(cancelMessage) === true)
$("#myform").submit();
The form submit is only omitted when "onsubmit" gets "false" from the Javascript handler.
Try this
- "return submitForm..." (instead of just "submitForm...")
(2. Remove semicolons after function's closing brackets)
Update
Maybe the problem is the combination of input type=submit
and $("#myform").submit();
If <form onsubmit=...
receives no false
(for example from a function return), the form will be submitted.
If <input type=submit onclick=...
receives no false
(for example from a function return), the button action (form submission) will be performed.
Raw (unchecked) solution option without using input type=submit
:
HTML
<form id="myform" onsubmit="formValidation()">
<button value="Submit" onclick="buttonHandler(true)">
<button value="Cancel" onclick="buttonHandler(false)">
</form>
JS
function formValidation()
return $("#myform").valid();
function buttonHandler(isSubmit)
if (isSubmit ==== true)
if (confirm(submitMessage) === true)
$("#myform").submit();
else
if (confirm(cancelMessage) === true)
$("#myform").submit();
edited Mar 9 '17 at 13:19
answered Mar 9 '17 at 12:38
Gunnar
178112
178112
after submitForm function?
– Code
Mar 9 '17 at 12:44
After each function, function definitions just need semicolons when assigned as var x = function() ; Otherwise they are at least obsolete / not needed. (as far as I know)
– Gunnar
Mar 9 '17 at 12:46
Thanks but I still have the same issue after trying your suggestion
– Code
Mar 9 '17 at 12:49
add a comment |
after submitForm function?
– Code
Mar 9 '17 at 12:44
After each function, function definitions just need semicolons when assigned as var x = function() ; Otherwise they are at least obsolete / not needed. (as far as I know)
– Gunnar
Mar 9 '17 at 12:46
Thanks but I still have the same issue after trying your suggestion
– Code
Mar 9 '17 at 12:49
after submitForm function?
– Code
Mar 9 '17 at 12:44
after submitForm function?
– Code
Mar 9 '17 at 12:44
After each function, function definitions just need semicolons when assigned as var x = function() ; Otherwise they are at least obsolete / not needed. (as far as I know)
– Gunnar
Mar 9 '17 at 12:46
After each function, function definitions just need semicolons when assigned as var x = function() ; Otherwise they are at least obsolete / not needed. (as far as I know)
– Gunnar
Mar 9 '17 at 12:46
Thanks but I still have the same issue after trying your suggestion
– Code
Mar 9 '17 at 12:49
Thanks but I still have the same issue after trying your suggestion
– Code
Mar 9 '17 at 12:49
add a comment |
up vote
0
down vote
You can get this to work if you use an input tag instead of button tag and retain your styles by keeping your classes. e.g.
<input id="SomeId"
class="btn btn-danger btn-block"
onclick="return confirm('Are you sure you want to delete: X');"
value="Delete" />
add a comment |
up vote
0
down vote
You can get this to work if you use an input tag instead of button tag and retain your styles by keeping your classes. e.g.
<input id="SomeId"
class="btn btn-danger btn-block"
onclick="return confirm('Are you sure you want to delete: X');"
value="Delete" />
add a comment |
up vote
0
down vote
up vote
0
down vote
You can get this to work if you use an input tag instead of button tag and retain your styles by keeping your classes. e.g.
<input id="SomeId"
class="btn btn-danger btn-block"
onclick="return confirm('Are you sure you want to delete: X');"
value="Delete" />
You can get this to work if you use an input tag instead of button tag and retain your styles by keeping your classes. e.g.
<input id="SomeId"
class="btn btn-danger btn-block"
onclick="return confirm('Are you sure you want to delete: X');"
value="Delete" />
answered Jan 27 at 16:43
KVigor
85
85
add a comment |
add a comment |
up vote
0
down vote
I had similar problem and solved it with click event, which is very similar to your problem.
Try this:
$("#cancel").click(function ()
var buttonId = $(this).attr("id");
confirmDialog(buttonId);
return false;
);
Hope it helps.
add a comment |
up vote
0
down vote
I had similar problem and solved it with click event, which is very similar to your problem.
Try this:
$("#cancel").click(function ()
var buttonId = $(this).attr("id");
confirmDialog(buttonId);
return false;
);
Hope it helps.
add a comment |
up vote
0
down vote
up vote
0
down vote
I had similar problem and solved it with click event, which is very similar to your problem.
Try this:
$("#cancel").click(function ()
var buttonId = $(this).attr("id");
confirmDialog(buttonId);
return false;
);
Hope it helps.
I had similar problem and solved it with click event, which is very similar to your problem.
Try this:
$("#cancel").click(function ()
var buttonId = $(this).attr("id");
confirmDialog(buttonId);
return false;
);
Hope it helps.
edited Nov 10 at 0:01
answered Nov 6 at 19:33
Bengall
509
509
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42695400%2fcancel-on-confirm-still-submits-form%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
vjekmSw8,lF2p2Xf ZrlaSuc7Koi0GZKSassJ,XA2
1
please post your html code and from where you are calling confirmDialog funciton?
– user7417866
Mar 9 '17 at 12:31
Looks like because if you click cancel so
confirmDialog('cancel')
runs, and then in the confirm dialogue you click "OK", this will send a booltrue
value to thesubmitForm
function?– Stu
Mar 9 '17 at 12:32
Please post your html code. I would like see how you declared your
Cancel
button– David R
Mar 9 '17 at 12:33
@DavidR I've updated my question
– Code
Mar 9 '17 at 12:36
@Stu If I click on the
Cancel
button with the id of#cancel
then I will get theconfirm ("cancel message")
alert. From which I click cancel and this is where the form submits. In myconsole.log(result)
is false so it should not submit the form– Code
Mar 9 '17 at 12:38