Jump to content

confirm submit problem


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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...