-1

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

<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';
        }
    }

sentphp脚本成功完成后是否可以将按钮innerhtml更改为？另外我怎样才能避免重定向到mail.php？

首先它应该显示send. 单击后sending应该出现，并且当 mail.php 不sent应该出现在按钮中时。

有什么想法或建议吗？

最好的问候丹尼姆

编辑：通过 jquery ajax 提交联系表单的进一步进展和解决方案错误

4

2 回答 2

1

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

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

另外我怎样才能避免重定向到mail.php？

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

于 2013-04-02T14:57:44.770 回答
0

您应该使用 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 属性，以便您可以有选择地选择它。

于 2013-04-02T15:17:34.663 回答