Создание диалогового окна JQuery UI после нажатия кнопки

Question

У меня есть форму, которая вызывает onSubmit="return report();". У меня есть функция javascript в отдельном файле. Я хотел бы создать свой собственный jQuery UI Dialog вместо подтверждения javascript, но я вообще не понимаю jQuery. Как мне изменить отчет функции javascript() для получения диалогового окна JQuery UI?

Существует часть моего файла PHP:

<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> 

И мой JS файл:

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

Answer 1

Как я не друг рядный яваскрипта и вы хотите использовать JQuery я изменил ваш код немного.

Этот код свяжет событие-listiner на кнопке отправки и предотвратит действие по умолчанию (в этом случае отправьте). Если пользователь подтвердит диалог, событие-событие будет запущено вручную.

$('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

Справочник

jQuery-UI dialog

dialog - buttons

.text()

.on()

attribute-selector

.closest()