Here Dismissing dialogs · Adobe XD Plugin Reference or here: 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 theform
:
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
}
};