Question

我看到这个问题的变化已被问到，但我没有看到任何可用于解决问题的答案。

我正在尝试在提交和验证HTML5表单之后运行javascript函数。我尝试过使用onSubmit。在这种情况下，验证发生在表单的输入上，但提交没有做任何事情，javascript函数永远不会运行。也就是说，我单击提交按钮，我的输入窗口消失，但是我应该在提交时看到的消息没有出现，并且从onSubmit调用的脚本不会运行。该代码如下所示：

我尝试过使用onClick而不是onSubmit。在这种情况下，如果我按Enter键或在表单输入中的任何位置单击提交按钮，则不会发生HTML5验证并提交表单。这是与上面相同的代码，除了使用onClick而不是onSubmit。

我尝试在提交后运行脚本是什么并不重要。使用onClick会导致脚本运行但输入未经过验证，在这种情况下，脚本会按预期运行。以下是我用作表单输入的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>

我希望只有在成功提交之后才能运行该函数，其中填写了必填字段。从我在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');
}

但是，我无法弄清楚如何在HTML输入中使用它。任何帮助将不胜感激。谢谢。

Answer 1

只需添加脚本标记，然后添加您的功能

<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>

我想在验证HTML5表单输入后才运行javascript函数

1 个答案: