Creating a jQuery UI Dialog after click submit

Question

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

empiric · Accepted Answer · 2015-04-27 11:35:14Z

1

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

answered Apr 27, 2015 at 11:35

empiric

7,8767 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kasia M Over a year ago

I don't know why but it doesn't work. Is there anything like onSubmit in jQuery?

Kasia M Over a year ago

It goes into $('button[type=submit]').on('click', function (event) , but dialog doesn't show. Is it because I have my js functions in separate file? I don't understand it. I included this file to my php code

empiric Over a year ago

@KasiaM any errors appearing in your console ? Have you included the jquery-ui-library ?

Collectives™ on Stack Overflow

Creating a jQuery UI Dialog after click submit

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related