Submit on enter key and submission confirmation issue

[fife]

Hi.  I have written my first ever js and to be honest.  I can just about read it let alone understand how to fix the error.  Basically I want to change details in a field, on pressing the enter key submit the form but so a confirmation dialog before the form actually submits.  If all is good submit the actual form.

 

here is my js

 

         <script>       
$(document).ready(function() {
    $(document).keyup(function(event) {
        if (event.keyCode == 13) {


		  submitHandler: function( ){
                            answer = confirm("Are you sure you want to submit?");
                            if (answer == true){
                          $("#v21frm").submit();
                            }
                            else{
                            return false;
                            }
        }

        }
    })
});
</script>

 

Now to issue I'm having is the form is updating like it should be but the confirmation box is not appearing.  Its just going straight through.

[goodacre.liam]

I find your code to be a little strange; so here are a few pointers!

 

Always declare your variables in the scope they are needed.  In your code 'answer' was used without declaration – this means it would be a property of the global object and accessible anywhere (i.e. a global variable).  This means it could possibly interfere with other code and cause other problems.

 

'submitHandler' is used as a label, I'm unsure if that is what you meant or if it was supposed to be a variable.

You are declaring an anonymous function after the 'submitHandler' label, which isn't being called (therefore the confirmation and submit code isn't being executed).

 

Here is my rewrite of your code (btw, I haven't tested it):

 

$(function() {
// constant data
var
CONFIRM_MESSAGE = "Are you sure you want to submit?",
FORM_ID = "#v21frm",
ENTER_KEY = 13;

// on keyup
$(document).keyup(function (event) {

	var answer;

	// if enter key released
	if (event.keyCode === ENTER_KEY) {

		// confirm the form submission
		answer = confirm(CONFIRM_MESSAGE);

		// on confirmation
		if (answer) {
			// submit the form
			$(FORM_ID).submit();
		}

		return false;
	}
});
});

 

I hope this helps,

Liam Goodacre

[fife]

Thanks liam.  Sorry Im totally new to javascript and was following a tut that obviously didnt understand properly.  I thought the submit handler was a function to bring up the dialog box. lol.  Thank you for rewriting the code. however it produces the same issue.  The form just submits without the confirmation having chance to stop it.

[goodacre.liam]

How about something like this? (I've tested this one and it works for me!)

 

$(function() {
// constant data
var
CONFIRM_MESSAGE = "Are you sure you want to submit?",
FORM_ID = "#v21frm";

// on submission
$(FORM_ID).submit(function (e) {
	var answer;

	// confirm the form submission
	answer = confirm(CONFIRM_MESSAGE);

	// cancel submission?
	if (!answer) {
		e.preventDefault();
		return false;
	}
});
});

 

Ignore the enter press and just run the code on form submission.  If the confirmation returns false, then the submission is aborted!

 

I hope this helps,

Liam Goodacre

[fife]

Thank you very very much it works great