# Dismiss a modal onsubmit seems to have no effect

**URL:** <https://forums.creativeclouddeveloper.com/t/dismiss-a-modal-onsubmit-seems-to-have-no-effect/319>\
**Category:** UXP Plugin API\
**Tags:** dialog\
**Created:** [October 28, 2018, 4:38pm UTC](https://forums.creativeclouddeveloper.com/t/dismiss-a-modal-onsubmit-seems-to-have-no-effect/319 "2018-10-28T16:38:44Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![aldobsom](https://avatars.discourse-cdn.com/v4/letter/a/e47c2d/32.png) [@aldobsom](https://forums.creativeclouddeveloper.com/u/aldobsom)\
**Post date:** [October 28, 2018, 4:38pm UTC](https://forums.creativeclouddeveloper.com/t/dismiss-a-modal-onsubmit-seems-to-have-no-effect/319/1 "2018-10-28T16:38:44Z")

</div>

Here [Dismissing dialogs · Adobe XD Plugin Reference](https://adobexdplatform.com/plugin-docs/reference/ui/dialogs/dismissal.html) or here: [https://github.com/AdobeXD/plugin-docs/blob/4a75bee64f875e0a0f9b6e09869cd6c33c5c9d80/reference/ui/ui-concepts.md](https://github.com/AdobeXD/plugin-docs/blob/4a75bee64f875e0a0f9b6e09869cd6c33c5c9d80/reference/ui/ui-concepts.md) it says:

> You can listen for the _default_ gesture (typically [ENTER]) by registering for the `submit` event on the `form` :

```
function onsubmit() {
        dialog.close("ok");
    }
form.onsubmit = onsubmit;
//or
function onsubmit() {
    dialog.close(document.getElementById("name").value);
}
form.onsubmit = onsubmit;

```

But how to listen to a **form.onsubmit** exactly?  
`document.getElementById("myForm")`  
or  
`document.querySelector("form")`  
will return as null or undefined depending on where is at.

**Here is all the code I have played with:**

```
let dialog;
// lazy load the dialog
function getDialog() {
if (dialog == null) {
    // create the dialog
    dialog = document.createElement("dialog");

     // create the form element
    // the form element has default styling and spacing
    let form = document.createElement("form");
    dialog.appendChild(form);
    // don't forget to set your desired width
    form.style.width = 200;
    form.id= "myForm";

    // add your content
    let hello = document.createElement("h1");
    hello.textContent = "Hello World";
    form.appendChild(hello);

    // create a footer to hold your form submit and cancel buttons
    let footer = document.createElement("footer");
    form.appendChild(footer)
    // include at least one way to close the dialog

    let okButton = document.createElement("button");
    okButton.uxpVariant = "cta";
    okButton.textContent = "OK";
    okButton.onclick = (e) => {
        dialog.close("i have hit ok button");
    }    
    footer.appendChild(okButton);
    let closeButton = document.createElement("button");
    closeButton.uxpVariant = "primary";
    closeButton.textContent = "Close";
    closeButton.onclick = (e) => dialog.close("I hit the close button. " + document.getElementById("myForm").value);
    footer.appendChild(closeButton);

    function onsubmit() {
        dialog.close("ok");
    }
    // form.onsubmit = onsubmit;
    form.onsubmit = function() {
        console.log('this form was submitted!')
    }
    console.log("FORM ID is: " + form.id + document.getElementById("myForm"));
}

return dialog;
}

function menuCommand(selection) {
// console.log(selection.items[0].name);
// attach the dialog to the body and show it
document.body.appendChild(getDialog()).showModal()
.then(result => {
    // handle dialog result
    // if canceled by ESC, will be "reasonCanceled"
    console.log("The form is " + document.getElementById("myForm").value);
    console.log('Promise received: ' + result);
});      
}

// this file is deliberately written in low level document.appendChild format.
module.exports = {
    commands: {
    menuCommand
    }
};

```