Question

您好，我正在制作一份简单的联系表格。

<form action="mail.php" method="POST">
  <input type="text" id="name" name="name" placeholder="Name" required><br />
  <input type="text" id="email" name="email" placeholder="Mail" required><br />
  <textarea name="message" placeholder="Nachricht" required></textarea><br />
  <button name="submit" type="submit" id="submit">send</button>
</form>

使用简单的php邮件程序

<?php 
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="Von: $name \n Nachricht: $message" ;
$recipient = "mail@mail.com";
$subject = "$betreff";
$mailheader = "Von: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!" //need to be removed;
?>

我使用简单的javascript将按钮更改为“发送”

var send = document.getElementById('submit');
    if(send) {
        send.onclick = function () {
            this.innerHTML = 'sending';
        }
    }

成功完成php脚本后，是否可以将按钮innerhtml更改为sent？另外我如何避免重定向到mail.php？

首先它应显示send。点击sending后，应该会显示，而mail.php不会sent出现在按钮中。

有任何想法或建议吗？

最好的问候 dennym

修改：进一步的进展和解决方案error on contact form submit via jquery ajax

Answer 1

是否可以将按钮innerhtml更改为在php之后发送脚本成功完成了吗？

如果您重新加载相同的模板，则可以将按钮呈现为sent。您必须在后端跟踪表单的状态。你可以改变你的表单，使用ajax通过javascript提交。收到成功的回复后，您可以更改innerHTML。

另外，如何避免重定向到mail.php？

请勿提交表格。使用javascript收集值并发出ajax请求。

Answer 2

您应该使用XHR（AJAX）请求。

不是像你的例子那样编写简单的javascript，而是使用jQuery这样的javascript框架，你会更快。

这样的事情可以解决问题：

$('form#formId').submit(function(){

    //set submit label to sending
    $('form#formId #submit').html('sending');

    $.post('mail.php', function(){
        //set submit label to sent
        $('form#formId #submit').html('sent');
    });

    //returning false to prevent native submission of form.
    return false;

});

您需要为表单提供ID属性，以便您可以有选择地选择它。

在php脚本中初始化javascript以获取联系表单

2 个答案: