JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div id="dialog"></div>
<form id="myform">
<input id="accept" class="submitbutton" type="text" value="Accept button" name="accept" value="accept"/>
<input id="decline" class="submitbutton" type="text" value="Decline button" name="decline" value="decline"/>

</form>

CSS

.submitbutton{
    text-align:center;
    font-weight:bold;
    /* you can do whatever you like here */
}

JavaScript

$('#accept,#decline').click(function(e){
    alert('you clicked #'+$(this).attr('id'));
    //you can do whatever you want here as you know which button was pressed.
    // to add more information in your form :
    $('#myform').append($("<input>").attr("type", "hidden").attr("name", "newhiddendata").val("something"));
    $('#myform').submit();
});

var dialog= $('#dialog');
dialog.dialog({
    modal:true,
    buttons: [
        {
            text: "Decline", click: function() {
                dialog.dialog('close');
                $('#decline').click();
                
            }
        },
        {
            text: "Accept", click: function() {
                dialog.dialog('close');
                $('#accept').click();
            }
        }
    ]
});