在php脚本中初始化联系人表单的javascript

大家好，我正在做一个简单的联系方式

<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脚本后，是否可以将innerhtml按钮更改为

sent

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

首先，它应该显示

send

。单击

发送后，应显示
，当mail.php未发送
时，按钮中应显示

有什么想法或建议吗

致意
丹尼姆

编辑：进一步的进展和解决方案

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

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

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

不要提交表格。使用javascript收集值并发出ajax请求。
您应该使用XHR（ajax）请求

使用jQuery这样的javascript框架可以更快地编写javascript，而不是像您的示例中那样编写简单的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属性，以便有选择地选择它。
更改为“新问题”以获得更好的概述
var send = document.getElementById('submit');
    if(send) {
        send.onclick = function () {
            this.innerHTML = 'sending';
        }
    }

$('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;

});