2

我有一个 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 超链接文本。

4

3 回答 3

0

首先，不要使用超链接<a>- 使用提交按钮并将其设置为看起来像超链接，就像这样。

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

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 以某种方式失败——老式的表单提交仍然可以工作。

你可以在我的网站上看到它的实际效果。

于 2012-10-05T17:14:43.817 回答
0

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

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

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

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

于 2012-10-27T17:30:08.727 回答
0

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

于 2012-10-05T15:53:32.130 回答