Jump to content

confirm submit problem


funbinod

Recommended Posts

the following script to ask for confirmation before submitting a form is not working while clicking yes. please guide me find the error...

<script>$(function () {    'use strict';    function confirmDialog(title, message, success) {        var confirmdialog = $('<div></div>').appendTo('body')            .html('<div><h6>' + message + '</h6></div>')            .dialog({                modal: true,                title: title,                zIndex: 10000,                autoOpen: false,                width: 'auto',                resizable: false,                buttons: {                    Yes: function () {                        success();                        $(this).dialog("close");                    },                    No: function () {                        $(this).dialog("close");                    }                },                close: function() {                    $(this).remove();                }            });        return confirmdialog.dialog("open");    }    $('form').on('submit', function (e) {        e.preventDefault();        var form = this;        confirmDialog('Confirm', 'Are you sure?', function () {			form.submit();        });    });});</script>
Link to comment
Share on other sites

I think the line breaks in this part are causing each line to be interpretted as a separate line of code:

confirmdialog = $('<div></div>').appendTo('body').html('<div><h6>' + message + '</h6></div>').dialog({

Try putting them all one one line.

 

Also, check the browser's error console anytime your code isn't working.

Link to comment
Share on other sites

Well, time to start looking for problems:

 

Find out what's happening when the "Yes" button is clicked by sending data to the console:

Yes: function () {console.log("The function is running", success);success();$(this).dialog("close");},
Link to comment
Share on other sites

Hmm, that's odd. Well, you're getting an error message.

 

On what line is the Uncaught TypeError and what code is on that line?

Link to comment
Share on other sites

on line 87

                buttons: {                    Yes: function () {			console.log("The function is running", success);                        success();                        $(this).dialog("close");                    },                    No: function () {                        $(this).dialog("close");                    }                },                close: function() {                    $(this).remove(); // line 87
Edited by funbinod
Link to comment
Share on other sites

I would check to see what value this has, then. If this isn't referring to an element then there will be a problem.

 

Can you see how this process is going yet? If at every step of the debugging process you continue asking me what to do next you're not going to learn how to do it yourself. Try to figure out what to do next, which I don't know myself until we find out what value this has.

Link to comment
Share on other sites

u r right. i appreciate ur guidance so far and this suggestion. but since i'm beginner i know less. if u guide me through the process it would itself make me do it myself next time (on other relative processes also). so i expect ur kindly appearance till this problem is solved.

 

i think this is what u expected to know for the value assigned for this. (or i'm not sure)... :P

    $('form').on('submit', function (e) {        e.preventDefault();        var form = this;        confirmDialog('Confirm', 'Are you sure?', function () {			form.submit();        });    });
Link to comment
Share on other sites

The error occurs on line 87, so naturally the "this" I'm looking for is the one on line 87.

close: function() {    console.log(this); // I need to know what "this" is    $(this).remove().}
Link to comment
Share on other sites

It has to be logging something. There's something you're not doing right. Make sure you're running the right code, and that previous code hasn't been cached by the browser.

Link to comment
Share on other sites

i dunno what i'm not doing right. i also expect it to log something. i also cleared the browser cache but it doesn't log anything. it just shows the typeerror on line 87...

 

:(

Link to comment
Share on other sites

<script>$(function () {    'use strict';    function confirmDialog(title, message, success) {        var confirmdialog = $('<div></div>').appendTo('body').html('<div><h4>' + message + '</h4></div>').dialog ({                modal: true,                title: title,                zIndex: 10000,                autoOpen: false,                width: 'auto',                resizable: false,                buttons: {                    Yes: function () {                        success();                        $(this).dialog("close");                    },                    No: function () {                        $(this).dialog("close");                    }                },                close: function() {                    console.log(this);                    $(this).remove();                }            });        return confirmdialog.dialog("open");    }    $('form').on('submit', function (e) {        e.preventDefault();        var form = this;        confirmDialog('Confirm', 'Are you sure?', function () {form.submit();        });    });});</script>
Link to comment
Share on other sites

Line 87 should have console.log(this); which has no reason to trigger any errors.

The error should be occurring on line 88, meaning that the value of "this" should be visible in the javascript console.

 

This is getting tedious. Can you show an online sample page?

Link to comment
Share on other sites

The page takes too long to load, though I was capable of seeing the source code for a moment. There could be many reasons why it's not working, I would start by making sure the HTML is valid: http://validator.w3.org/#validate_by_input

Drop the HTML transitional doctype and use HTML 5.

 

You pointed to the wrong line. Line 87 is this one:

confirmDialog('Confirm', 'Are you sure?', function () {            form.submit();});

So put the console.log() there:

console.log(form);form.submit();
Link to comment
Share on other sites

That means that the variable "form" isn't set. That's probably a scope issue. Give the <form> element an ID attribute and use getElementById() to access it.

Link to comment
Share on other sites

its still the same issue

document.getElementById('acregister').submit();document.getElementById('acregister').click();
$('#acregister').submit();$('#acregister').click();

both methods give same result...

:'(

Edited by funbinod
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...