在 php 脚本中为联系表单初始化 javascript [关闭]答案

【问题标题】：initialize javascript in php script for a contact form [closed]在 php 脚本中为联系表单初始化 javascript [关闭]
【发布时间】：2013-03-23 22:28:45
【问题描述】：

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

<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应该出现在按钮中。

有什么想法或建议吗？

最好的问候丹尼姆

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

【问题讨论】：

标签： php javascript html forms

【解决方案1】：

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

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

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

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

【讨论】：

更改为新问题 stackoverflow.com/questions/15769651/… 以获得更好的概览

【解决方案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 属性，以便您可以选择性地选择它。

【讨论】：