Question

我已经搜索了许多关于此的其他线程，我无法看到我做错了什么，我正在尝试将表单值发送到php文件以作为电子邮件发送，但页面总是刷新。我尝试过使用event.preventDefault并在我的ajax调用之前和之后都返回false但似乎没有工作。我在这里缺少的是我的代码。

HTML

<form method="post" name="registerForm" class="form">
    <label for="fullName" class="form__fullname form__label">Full Name</label>

    <input type="text" name="fullName" placeholder="Richard Thomson" maxlength="40" tabindex="1" pattern="^[a-zA-Z\s]*$" class="form__input" id="name" required>

    <label for="email" class="form__email form__label">Email</label>

    <input type="email" name="email"  placeholder="richard.thomson45@gmail.com" tabindex="2" class="form__input" id="email" required>

    <label for="telephone" class="form__tel form__label">Phone</label>

    <input type="tel" name="telephone" placeholder="07915834998" tabindex="3" pattern="[0-9]{11}" maxlength="11" class="form__input" id="telephone" required>

    <input type="submit" value="Submit" name="submit" class="form__submit" id="submit">
</form>

JS

var fullName,
    telephone,
    email,
    submitButton = $("#submit"),        
    formData;

submitButton.submit(function (event) {
    // event.preventDefault();

    fullName = $("#name").val();
    telephone = $("#telephone").val();
    email = $("#email").val();
    formData = {
        'name': fullName,
        'email': email,
        'telephone': telephone
    };

    $.ajax({
            type: 'POST',
            url: 'email.php',
            data: formData,
            dataType: 'json'
        })
        .done(function (data) {
            console.log(data);
        })
        .fail(function () {
            console.log("not working");
        });

    return false;
});

PHP

<?php
    if($_SERVER['REQUEST_METHOD'] == 'POST') {
        if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['telephone'])) {

            if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
                $email = $_POST['email'];
            }

            if (preg_match("/^[a-zA-Z\s]*$/", $_POST['fullName'])) {
                $fullName = $_POST['fullName'];
            }

            if (preg_match("/[0-9]{11}/", $_POST['telephone'])) {
                $telephone = $_POST['telephone'];
            }

            $telephone = substr_replace(substr_replace($telephone," ",3,0)," ",8,0);

            $emailTo = "test@hotmail.co.uk";
            $emailFrom = "contact@test.co.uk";
            $subject = "I would like to know more about test";
            $message = "Name:" . " " . $fullName . "\r\n\r\n";
            $message .= "Email:" . " " . $email . "\r\n\r\n";
            $message .= "Telephone:" . " " . $telephone;

            $headers = "From: $emailFrom \r\n";
            $headers .= 'Content-Type: text/plain; charset=utf-8'; 
            $headers .= "Reply-To: $email \r\n";

            $success = mail($emailTo, $subject, $message, $headers);

        } else {
            echo("Please fill all necessary fields");
        }
    }
?>

Answer 1

防止提交按钮的默认设置理论上应该停止表单提交 - 但是：

输入按钮没有submit个事件。如果你听click，那将会有效，但只是部分原因是......
可能还有其他混淆因素干扰了这一点，即导致表单提交的其他击键或用户交互。

您应该收听从表单触发的onsubmit事件，而不是从提交按钮发出的事件。表单的提交事件是在提交表单时触发的明确事件：由<button>，<input type="submit">或甚至以编程方式触发，例如$form.trigger('submit')。您可以为表单提供ID，即：

<form method="post" name="registerForm" class="form" id="registrationForm">

然后只需在onsubmit回调中执行完全相同的逻辑：

$('#registrationForm').on('submit', function(e) {
    // Prevent form submission by the browser
    e.preventDefault();

    // Rest of the logic
});

如果您无法修改DOM以便识别<form>元素，那么使用jQuery的DOM遍历方法也可以工作，即：

var $form = submitButton.closest('form');
$form.on('submit', function(e) {
    // Prevent form submission by the browser
    e.preventDefault();

    // Rest of the logic
});

为了说明我的声明，表单的提交事件是一个＆＃34;保护伞＆＃34;它捕获所有提交事件，无论它们是如何被触发的，请参考我在下面附带的示例：

＆＃13;

$(function() {
  $('#form').on('submit', function(e) {
    console.log('Form submission captured. It is triggered by: ', document.activeElement);
    //e.preventDefault();
  });
  
  $('#submitInput').on('submit', function(e) {
    console.log('Triggering submit event from <input>');
  });
  
  $('#submitButton').on('click', function() {
    console.log('Triggering submit event from <button type="submit" />');
  });

  $('#submitProgramatically').on('click', function() {
    console.log('Triggering submit event using JS only');
    $('#form').trigger('submit');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="#">
  <input type="text" placeholder="Just another text field" />
  <br />
  <input type="submit" value="Submit using an <input>" id="submitInput" />
  <br />
  <button id="submitButton">Submit using a &lt;button&gt;</button>
  <br />
  <a href="#" id="submitProgramatically">Submit programatically using JS</a>
</form>

＆＃13;

注意：如果直接在DOM节点上调用onsubmit方法，则可以绕过jQuery的submit()事件处理程序：$('form')[0].submit()。

表单提交后停止页面刷新

1 个答案: