Question

我有一个HTML按钮，可以使用javascript -

提交表单验证表单

<p class="textstyle1"><a href="javascript:document.contact.submit();"><span onClick="MM_validateForm('Name','','R','Email','','RisEmail','Message','','R');return document.MM_returnValue">Send</span></a></p>

提交表单时，我希望按钮文本从“发送”更改为“请等待...”，同时运行php代码，向用户发送电子邮件并将表单数据插入MySQL数据库。

我已经做了很多研究并找到了更改实际“提交”按钮的文本的代码，但我想帮助代码更改HTML超链接文本。

Answer 1

但是，您在这里使用正常的回发提交表单。因此，当用户点击“发送”时，页面将回发和服务器端代码，即发送电子邮件和数据库插入被执行。如果是AJAX页面，用户点击提交链接后，链接的innerHTML属性可以更改为“请稍候”，并在收到服务器的响应后，更改回“发送”。

Answer 2

首先，不要使用超链接<a> - 使用提交按钮并将其设置为超链接样式like so。

接下来，为表单的submit事件定义一个JavaScript事件处理程序。事件处理程序应使用XMLHttpRequest (AJAX) call提交表单，更新按钮文本以及取消表单数据提交。像这样：

var myFormEl = document.getElementById("myForm");
myFormEl.onsubmit = function() {
    var submitButtonEl = myFormEl.childNodes[4];
    var message = myFormEl.childNodes[2].value;

    var xhReq = new XMLHttpRequest();
    xhReq.open("POST", "submit.php", true);
    xhReq.onreadystatechange = function() { // this request is async
        if (xhReq.readyState != 4)  { return; }
        // there should be some error-checking here
        submitButtonEl.textContent = "Send";
        alert("Your message has been submit");
    };

    var reqBody = "message="+encodeURIComponent(message);

    xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhReq.setRequestHeader("Content-length", reqBody.length);

    if(submitButtonEl.textContent) {
        submitButtonEl.textContent = "Please wait...";
    }
    else {
        submitButtonEl.innerText = "Please wait..."; // for different browsers
    }
    xhReq.send(reqBody);

    return false; // cancel the form submission
};

重要的一点是，这样做 - 使用按钮和取消表单提交的JavaScript事件处理程序 - 会优雅地降级;如果禁用JavaScript - 或者JavaScript以某种方式失败 - 旧式表单提交仍然有效。

您可以在我的网站上see it in action。

Answer 3

感谢大家的投入。我做了一些研究，并设法找到一个符合我需求的非常简单的解决方案。我使用CSS来设置我的提交按钮，使其看起来像我的其他链接，并删除了超链接标签和js提交功能，以支持实际的提交按钮。我添加了一些代码，以便在提交表单时将文本值更改为“Please Wait”，并且效果很好。

<input name="Submit" type="submit" value="Send" onClick="this.value = 'Please Wait';">

唯一需要注意的是，如果用户在表单成功提交后碰巧点击了浏览器的后退按钮，提交按钮仍会显示“请等待”，但我可以忍受。

顺便说一句，我放弃了Macromedia表单验证，转而使用PHP验证脚本。它不像javascript或jquery验证那样“活”，但它可以工作。

在Javascript表单提交按钮上替换HTML超链接文本

3 个答案: