Question

我想在提交表单后执行jQuery脚本。 jQuery脚本只有一条淡出的行在隐藏中显示电子邮件是否已发送。

PHP代码位于文件的顶部，我不知道是否将PHP代码保留在顶部是问题，但我尝试将de PHP移到jquery脚本之上，但它不起作用。

编辑：

现在我在index.php中有了这段代码

        $(document).ready(function) {
            $('form').submit(function) {
                $.ajax({
                    url: "mail.php",
                    type: "POST",
                    data: {
                        name: $('input[name="name"]').val(),
                        email: $('input[name="email"]').val(),
                        msg: $('input[name="msg"]').val()
                    },
                    cache: false,
                    success: function(response) {
                        $('#result').html(response);
                    }
                });
                return false;
            });
        });

在mail.php中我有其他代码

$name = $_POST['name'];
$mail = $_POST['email'];
$msg = $_POST['msg'];

if(mail('test@test.com', $name, $msg)) {
    echo 'Pass!';
} else {
    echo 'Fail!';
}

当我执行它时没有任何反应，URL显示我在输入中写入的数据但是出现了任何消息。

Answer 1

这是使用AJAX处理表单的简单示例。请注意ID：#emailForm是表单的ID，#out是您要显示的某些HTML元素（例如div或p）的ID结果。函数email.php是您发送电子邮件并返回结果的服务器端脚本。

$(document).ready(function() {
    $('#emailForm').submit(function(){
        $.ajax({
        url: "email.php",
        type: 'POST',
        data: {
            name: $('input[name="name"]').val(),
            email: $('input[name="email"]').val(),
            msg: $('input[name="msg"]').val()
        },
        cache: false,
        success: function(responseText){
            $('#out').html(responseText);
        }
        });
        return false;
    });
});

在服务器端，email.php（或任何您想要调用的内容）处理数据并发送电子邮件。可以从$ _POST数组中检索数据。发送或尝试发送电子邮件后，email.php可以简单地回显要插入ID为“out”的HTML元素中的结果。

$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['msg'];
//PUT CODE HERE FOR SENDING EMAIL

if ($success){
    echo "Email sent with success!";
} else {
    echo "Unable to send your email at this time. Please try again later.";
}

输出应出现在HTML元素中：

<div id="out">Email sent with success!</div>

Answer 2

您可以在onSubmit代码

中使用form属性

e.g。

  <form name="anything" id="anything" onSubmit="functionname();" >

或另一个选项是onClick按钮的Submit

  <input type="submit" onClick="functionname();" value="SUBMIT FORM" />

我个人喜欢第一种方法

提交表单后执行jQuery脚本

2 个答案: