Recently, I had to add validation to a file upload form for our Google Drive. After some research, I discovered that using onsubmit instead of onclick was the way to go.
However, when I made the switch from onclick to onsubmit, the validation worked but the file upload function stopped working. Nothing happened when users clicked the submit ("Upload File") button.
The original code looked like this:
<form id="myForm" >
<center>Please deposit your file using the submission form below.</center>
<br>
<br>
<font size="3" color="red">*</font>Your Name: <input type="text" name="myName" placeholder="Your name.." required />
<font size="3" color="red">*</font>Your Email: <small><b>(to contact in case of questions, and send your file deposit receipt)</b></small> <input type="email" name="userMail" placeholder="Your email.." required />
<br>
<font size="3" color="red">*</font>File Recipient Name: <input type="text" name="recName" placeholder="Your recipient's name.." required />
<font size="3" color="red">*</font>File Recipient Email: <small><b>(whom to notify of your deposit)</b></small> <input type="email" name="recEmail" placeholder="Your recipient's email.." required />
<br>
School: <small><b>(if your file pertains to a specific school)</b></small> <input type="text" name="aSchool" placeholder="Pertaining school.." />
School Year: <small><b>(if your file pertains to a specific school year)</b></small> <input type="text" name="aSchoolYear" placeholder="Pertaining school year.." />
<br>
Note(s): <small><b>(any special note about the file)</b></small> <br> <textarea name="sNote" rows="3" cols="40" > </textarea>
<br>
<br>
<input type="file" name="myFile" required />
<br>
<input type="submit" value="Upload File"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;" />
</form>
My attempt to change onclick to onsubmit resulted in:
<input type="submit" value="Upload File"
onsubmit="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this);
return false;" />
I'm wondering if there is a better approach to validation while still utilizing onclick. Any suggestions would be greatly appreciated!