I press a button/image to run script that opens the picker. I can select an existing folder and I have added a field to create a new folder (within the selected existing folder).
All of this works as I want, but I added some error handling incase the button to create a new folder was pressed without a folder name being given. I put the message in an alert (may need to amend that as it gives the option to 'prevent this page from displaying additional dialogues') but once the alert has gone, the html disappears.
What do I do to retain the HTML that was in the IFRAME before the button was pressed?
This is my HTML code and the function behind the button.
</head>
<body>
<div>
<p> Please select the property you wish the ticket folder to be created in. </p>
<button onclick='getOAuthToken()'>Select a Folder</button>
<br>
<p> (If it does not exist, select the folder you wish to create a new location in.) </p>
<p id='result'></p>
</div>
<script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<br><br><br>
<div id="frmCreate" style="display:none">
<form>
<label class="hiddenfrm"> Folder Name: </label><input type="text" id="newFdrNm" class="hiddenfrm">
<button onclick='makeFolder()' class="hiddenfrm">Create New Folder</button>
<p id='newresult' class="hiddenfrm"></p>
</form>
</div>
</body>
</html>
//function to create a folder in the selected folder
function makeFolder() {
var ParentFolder = document.getElementById('PFldrID').innerHTML
var NewFolderName = document.getElementById('newFdrNm').value
if (NewFolderName == "") {
alert("Folder Name Required!")
}
else {
google.script.run.CreatePropertyFolder(NewFolderName, ParentFolder);
google.script.host.close();
}
}
EDIT:
After removing the form tags, the dialogue box works as required.
For the alert, I decided to have the error message display under the text box. Amended parts of the code:
*HTML*
<button onclick='makeFolder()' class="hiddenfrm">Create New Folder</button>
<br><span id="newFdrNmError"></span>
*script*
if (NewFolderName == "") {
document.getElementById('newFdrNmError').innerHTML = "Error: You must 'name' the new folder!";
return false;
}
The HTML in the window is disappearing because the "Create New Folder" button is inside of the <form>
tags. There is nothing that I know of that can stop that from happening, except moving the button outside of the <form>
tags.
Move button:
<form>
<label class="hiddenfrm"> Folder Name: </label><input type="text" id="newFdrNm" class="hiddenfrm">
<p id='newresult' class="hiddenfrm"></p>
</form>
<button onclick='makeFolder()' class="hiddenfrm">Create New Folder</button>