css Javascript子窗体不显示成功弹出框

aydmsdu9  于 2023-02-06  发布在  Java
关注(0)|答案(1)|浏览(155)

用HTML,CSS,Javascript建立一个链接到谷歌表单的表单。
两个问题:
1/如果填写了必填字段,表单提交时应该会弹出一个弹出框,显示“Application Submitted!”(申请已提交!)。弹出框没有显示--但数据正在被处理到链接的Google Sheet中。应用程序只是重新加载。
2/如果填写不正确,应该会弹出一个弹出框,显示“错误!"。但是,即使填写不正确,数据也会被处理到链接的Google工作表中,而不会出现此弹出框(然后像上面那样重新加载页面)。这就像Javascript覆盖了HTML代码,比如要求电子邮件必须是电子邮件格式,等等。??HTML在写入链接到Google工作表的Javascript之前工作。
脚本:

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script>
function SubForm (){
    $.ajax({
        url:'[NOTE: URL IS HERE]',
        type:'post',
        data:$("#survey-form").serializeArray(),
        success: function(){
          alert("Application Submitted!")
        },
        error: function(){
          alert("Error!")
        }
    });
}
</script>

还有按钮的HTML:

<button onclick="SubForm()" class="btn submit" type="submit" value="Let's Bop!" />Let's Bop!</button>
q35jwt9p

q35jwt9p1#

我认为这里有两点需要注意。
第一,
让我们来看看表单操作是什么?或者表单的action=""部分是什么?因为您正在使用按钮type='submit',并且假设它在表单内部,所以表单将提交并执行操作部分。
如果是这种情况,那么你需要你的表单停止提交时的默认行为,这样页面就可以保留下来,给ajax一些时间来完成,这样警报就可以出现了。
第二,
让表单处理onSubmit,并从按钮中删除onClick,因为它是一个提交按钮,让它提交表单,但处理onsubmit事件。即使在这种情况下,我们也必须停止表单以执行其默认行为。
这是一个代码,您可以参考https://codepen.io/vbrmnd/pen/eYjbRgw

相关问题