[英]I want to have a javascript function run only after HTML5 form input has been validated
I see variations of this question have been asked, but I don't see any answers that I can use to solve my problem. 我看到有人问过这个问题的变体,但是我看不到可以用来解决问题的任何答案。
I'm trying to have a javascript function run AFTER an HTML5 form has been submitted and validated. 我正在尝试在提交并验证HTML5表单后运行javascript函数。 I have tried using onSubmit.
我尝试使用onSubmit。 In that case, the validation happens on input to the form, but the submit does nothing and the javascript function never runs.
在这种情况下,验证会在输入表单时进行,但是Submit不会执行任何操作,并且javascript函数永远不会运行。 That is, I click the submit button and my input window disappears, but the message I am supposed to see on submit does not appear and the script that gets called from the onSubmit does not run.
也就是说,我单击了提交按钮,我的输入窗口消失了,但是我本应在提交时看到的消息没有出现,并且从onSubmit调用的脚本没有运行。 That code looks like:
该代码如下所示:
I have tried using onClick rather than onSubmit. 我尝试使用onClick而不是onSubmit。 In that case, the HTML5 validation does not occur and the form is submitted if I hit Enter or click on the submit button at any point in the form input.
在这种情况下,如果我按下Enter键或在表单输入中的任意位置单击“提交”按钮,则不会进行HTML5验证,并且将提交表单。 That is the same code as above except onClick is used rather than onSubmit.
除了使用onClick而不是onSubmit之外,其余代码与上述代码相同。
It doesn't matter what the script is that I try to run following the submit. 我尝试在提交之后运行脚本是什么都没关系。 Using onClick causes the script to run but the input is not validated and in that case, the script runs as expected.
使用onClick会导致脚本运行,但输入未经验证,在这种情况下,脚本将按预期运行。 Here is the HTML I'm using as the form input:
这是我用作表单输入的HTML:
<form id="myForm">
<fieldset>
<table>
<tr>
<td><label for="rfiTitle" style="font-weight: bold">RFI Title</label><label style="color:red; font:bold">**</label></td>
<td><input type="text" maxlength = "200" name="rfiTitle" id="rfiTitle" form="myForm" size="40" placeholder="short summary, max length 200 characters" required></td>
</tr>
<tr>
<td><label for="submitter" style="font-weight: bold">Submitter's Name</label><label style="color:red; font:bold">**</label></td>
<td><input type="text" maxlength = "100" name="submitter" id="submitter" form="myForm" size="40" placeholder="full name, max length 100 characters" required></td>
</tr>
<tr>
<td><label for="submitterEmail" style="font-weight: bold">Submitter's Email</label><label style="color:red; font:bold">**</label></td>
<td><input type="email" name="submitterEmail" id="submitterEmail" form="myForm" size="40" placeholder="full email" required></td>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit" onsubmit="this.value='The form is uploading..';
google.script.run.withSuccessHandler(fileUploaded).formHandler(this.parentNode); return false;">
</form>
I would like the function to be run only after a successful submission, where the required fields are filled in. From what I've read on stackoverflow, it sounds like I need to use something like: 我希望仅在成功提交后才运行该函数,并在其中填写必填字段。根据我对stackoverflow的了解,听起来我需要使用以下内容:
document.getElementById('myform').onsubmit = function(e) {
Logger.log("into onsubmit fct:"+e);
generateGUTS();
e.preventDefault();
}
function generateGUTS(){
google.script.run.withSuccessHandler(fileUploaded).formHandler(this.parentNode);
return false;
alert('Generating GUTS ticket');
}
However, I can't figure out how to use it with my HTML input. 但是,我不知道如何在HTML输入中使用它。 Any help would be greatly appreciated.
任何帮助将不胜感激。 Thank you.
谢谢。
just add script tag and then add your function 只需添加脚本标签,然后添加您的功能
<script type="text/javascript">
document.getElementById('myform').onsubmit = function(e) {
Logger.log("into onsubmit fct:"+e);
generateGUTS();
e.preventDefault();
}
function generateGUTS(){
google.script.run.withSuccessHandler(fileUploaded).formHandler(this.parentNode);
return false;
alert('Generating GUTS ticket');
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.