CODEWITHSUNDEEP
jqueryfunctionjquery-ui-dialogonsubmit
Kasia M
Kasia M

Reputation: 25

Creating a jQuery UI Dialog after click submit

I have a form which calls onSubmit="return report();". I have this javascript function in separate file. I would like to create my own jQuery UI Dialog instead of javascript confirm but I don't understand jQuery at all. How should I change javascript function report() to obtain jQuery UI Dialog?

There is part of my php file:

<form method="POST" action="add.php" name="alert" id="alert" onSubmit="return report();">
    //some inputs
    <button class='btn btn-primary' type='submit'>Send it</button>

And my js file:

 function report() {

    var report="Some text: \n\n";
    //There is code in simple javascript

    raport=raport+"\n";
    raport=raport+"If the are no mistakes click OK";
    return confirm(report);
    }

Upvotes: 0

Views: 3080

Answers (1)

empiric
empiric

Reputation: 7878

As I'm not a friend of inline-javascript and you want to use jQUery I modified your code a bit.

This code will bind an event-listiner on the submit-button and prevent the default action (the submit in this case). If the user confirm the dialog the submit-event will be triggered manually. 

$('button[type=submit]').on('click', function (event) {

    event.preventDefault();

    var $this = $(this);
    var raport = "Some text: \n\n";
    //There is code in simple javascript
    raport = raport + "\n";
    raport = raport + "If the are no mistakes click OK";

    $("#dialog-confirm").text(raport).dialog({
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                $this.closest('form').submit();
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

});

Demo

Reference

jQuery-UI dialog

dialog - buttons

.text()

.on()

attribute-selector

.closest()

Upvotes: 1

Related Questions