I am trying to open a second HTML Dialog from a button on the first HTML Dialog using the HTML Dialog element. I can see the second dialog open for a split second then it closes both dialogs.
I have searched but can’t find anything that works.
Here is a shortened version of my code. You can run this code and it will explain what I want to happen as you click the buttons.
Let me mention that I have the code to post the information and it works, I just need the second HTML Dialog to open and stay open until the Post or Cancel button is clicked.
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div>
<h2>Split Transaction</h2>
</div>
<button data-open-modal1>Add Transaction</button>
</div>
<dialog id="dialog1">
<h3>This is dialog 1</h3>
<p>This dialog allows the user to enter transaction information.</p>
<p>If the transaction has to be split into two categories</p>
<p>they would click on the Split button which would open dialog 2 on top of</p>
<p>dialog 1 and allow dialog 2 information to be entered.</p>
<p>Then the user would click Post to post dialog 2 information, dialog 2 would then close</p>
<p>and return to dialog 1 (this dialog)</p>
<p>where the user would click Post on dialog 1 to post the transaction data.</p>
<form id="form" action="" method="post">
<button id="transdialogsplitbutton" data-post-modal1 formmethod="dialog" value="split" onclick="split(this, value)">Split</button>
<button id="transdialogsubbutton" data-post-modal1 formmethod="dialog" value="post" onclick="postrecurring(this, value)">Post</button>
<button id="transdialogcancelbutton" data-close-modal1 formmethod="dialog" onclick="closedialog()">Cancel</button>
</form>
</dialog>
<dialog id="dialog2">
<h3>This is dialog 2</h3>
<p>When the user clicks on Post it would post the information on this dialog 2</p>
<p>and return to dialog 1 where the user will click on Post to post that information.</p>
<form action="" method="post">
<button id="transdialogsubbutton" data-post-modal2 formmethod="dialog" value="post" onclick="postsplit(this, value)">Post</button>
<button id="transdialogcancelbutton" data-close-modal2 formmethod="dialog" onclick="closedialog()">Cancel</button>
</form>
</dialog>
<script>
const openModal1 = document.querySelector('[data-open-modal1]');
const closeModal1 = document.querySelector('[data-close-modal1]');
const postModal1 = document.querySelector('[data-post-modal1]');
const modal1 = document.querySelector('#dialog1');
openModal1.addEventListener('click', () => {
modal1.showModal();
});
closeModal1.addEventListener('click', () => {
modal1.close();
});
</script>
<script>
function postrecurring(element, value) {
alert("Transaction Information Posted");
};
</script>
<script>
function split(element, value) {
alert("Dialog 2 Should Open");
};
</script>
<script>
const openModal2 = document.querySelector('[data-open-modal2]');
const closeModal2 = document.querySelector('[data-close-modal2]');
const postModal2 = document.querySelector('[data-post-modal2]');
const modal2 = document.querySelector('#dialog2');
</script>
<script>
openModal2.addEventListener('click', () => {
modal2.showModal();
});
closeModal2.addEventListener('click', () => {
modal2.close();
});
</script>
<script>
function postsplit(element, value) {
alert("Split Posted");
};
</script>
<script>
function closedialog(element, value) {
alert("Dialog Closed");
};
</script>
</body>
</html>
I’ve tried everything I can think of but still can not find anything that works the way I want.