Cancel on confirm still submits form

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)
);

edited May 23 '17 at 12:00

Community♦

asked Mar 9 '17 at 12:27

Code

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 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

@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

|
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;
 
;

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)
);

edited May 23 '17 at 12:00

Community♦

asked Mar 9 '17 at 12:27

Code

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 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

@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

|
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;
 
;

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)
);

edited May 23 '17 at 12:00

Community♦

asked Mar 9 '17 at 12:27

Code

664728

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;
 
;

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

edited May 23 '17 at 12:00

Community♦

asked Mar 9 '17 at 12:27

Code

664728

edited May 23 '17 at 12:00

Community♦

asked Mar 9 '17 at 12:27

Code

664728

edited May 23 '17 at 12:00

Community♦

edited May 23 '17 at 12:00

Community♦

edited May 23 '17 at 12:00

Community♦

asked Mar 9 '17 at 12:27

Code

664728

asked Mar 9 '17 at 12:27

Code

664728

asked Mar 9 '17 at 12:27

Code

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 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

@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

|
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 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

@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

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

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 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>

edited Mar 9 '17 at 17:59

answered Mar 9 '17 at 12:39

user7417866

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

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

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!

answered Mar 9 '17 at 12:38

David R

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 |

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>

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

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" />

answered Jan 27 at 16:43

KVigor

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.

edited Nov 10 at 0:01

answered Nov 6 at 19:33

Bengall

509

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

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

Name

Required, but never shown

5 Answers
5

active

oldest

votes

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>

edited Mar 9 '17 at 17:59

answered Mar 9 '17 at 12:39

user7417866

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

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

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>

edited Mar 9 '17 at 17:59

answered Mar 9 '17 at 12:39

user7417866

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

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

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>

edited Mar 9 '17 at 17:59

answered Mar 9 '17 at 12:39

user7417866

9161311

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

edited Mar 9 '17 at 17:59

answered Mar 9 '17 at 12:39

user7417866

9161311

answered Mar 9 '17 at 12:39

user7417866

9161311

answered Mar 9 '17 at 12:39

user7417866

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

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

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

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

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

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

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!

answered Mar 9 '17 at 12:38

David R

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 |

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!

answered Mar 9 '17 at 12:38

David R

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 |

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!

answered Mar 9 '17 at 12:38

David R

6,84642450

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

answered Mar 9 '17 at 12:38

David R

6,84642450

answered Mar 9 '17 at 12:38

David R

6,84642450

answered Mar 9 '17 at 12:38

David R

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

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>

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

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>

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

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>

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

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>

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

edited Mar 9 '17 at 13:19

answered Mar 9 '17 at 12:38

Gunnar

178112

answered Mar 9 '17 at 12:38

Gunnar

178112

answered Mar 9 '17 at 12:38

Gunnar

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 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" />

answered Jan 27 at 16:43

KVigor

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" />

answered Jan 27 at 16:43

KVigor

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" />

answered Jan 27 at 16:43

KVigor

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

answered Jan 27 at 16:43

KVigor

answered Jan 27 at 16:43

KVigor

answered Jan 27 at 16:43

KVigor

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.

edited Nov 10 at 0:01

answered Nov 6 at 19:33

Bengall

509

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.

edited Nov 10 at 0:01

answered Nov 6 at 19:33

Bengall

509

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.

edited Nov 10 at 0:01

answered Nov 6 at 19:33

Bengall

509

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

edited Nov 10 at 0:01

answered Nov 6 at 19:33

Bengall

509

answered Nov 6 at 19:33

Bengall

509

answered Nov 6 at 19:33

Bengall

509

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb