为什么我的页面在表单提交时重新加载

Why is my page reloading on form submission?

本文关键字：新加载 加载 我的 表单提交 为什么      更新时间：2023-09-26

http://thecoxband.com/index1.html

表单是有效的，但是我不知道发生了什么以及ajax为什么不起作用。

我从这里的几个地方得到了代码，我相信有人会把我链接到……但老实说，我对JQuery或脚本还很陌生，所以如果有人能告诉我我做错了什么，我将永远欠你的债。

Samuel对您收到的JavaScript错误是正确的，但您离提交表单还有很长的路要走。在下面的脚本中，您使用"email"answers"name"的名称引用变量，但这些变量并不存在。

  $(document).ready(function(){
    $('submit').click(function(){
      $.ajax({
        type:'POST',
        url: email_form.php,
        data:{
          name: name,
          email: email,
        },
        success: function(msg){
          alert('Email Sent');
        }               
      });
    });
  });

您需要引用表单值。要做到这一点，您应该分别使用$('input[name="email"]'(.val((和$('input[name="name"]'(.val((，这样代码看起来就像

  $(document).ready(function(){
    $('#submit').click(function(){
      $.ajax({
        type:'POST',
        url: 'email_form.php',
        data:{
          name: $('input[name="name"]').val(),
          email: $('input[name="email"]').val()
        },
        success: function(msg){
          alert('Email Sent');
        }               
      });
    });
  });

最后，我注意到最后一件事，提交按钮的类型应该是"button"，而不是"submit"，因为后者会导致页面刷新，从而中断正在运行的JavaScript。

注意，我在结果函数中添加了Juan注意到的选择器错误。

第93行：您正在全局窗口中声明一个对象属性。

afterLoad: function(anchorLink, index){

更改为：

var afterLoad = function(anchorLink, index){

我看到你有这样的代码：

$('submit').click(function(){
      $.ajax({
        type:'POST',
        url: email_form.php,
        data:{
          name: name,
          email: email,
        },
        success: function(msg){
          alert('Email Sent');
        }               
      });
    });

该选择器错误，请将其更改为：

$('#submit').click(function(){
   //...

而且，你不仅想在点击按钮时触发，而且你有两个选项，所以表单不会提交：

1( 监听提交事件并阻止其提交

$('#yourformid').submit(function(e){ 
    e.preventDefault(); //... })

2( 将按钮更改为具有样式的<a>标记，而不是提交输入。这样，您就可以在不触发提交的情况下侦听单击事件。

相关文章：