在PHP脚本中为联系人表单初始化javascript

initialize javascript in php script for a contact form

本文关键字：表单 初始化 javascript 联系人 PHP 脚本      更新时间：2023-09-26

大家好，正在制作一个简单的联系人表单。

<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将按钮更改为'send '

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

是否有可能改变按钮innerhtml的sent后，php脚本成功完成?另外，如何避免重定向到mail.php?

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

有什么想法或建议吗?

致以最亲切的问候dennym

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

是否可以改变按钮innerhtml发送后的php脚本是否成功完成?

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

我怎样才能避免重定向到mail.php?

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

您应该使用XHR (AJAX)请求。

比起在示例中编写普通的javascript，使用javascript框架(如jQuery)可以更快。

像这样的代码应该可以达到这个效果:

$('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属性，以便你可以有选择地选择它

相关文章：