我有一个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超链接文本。
答案 0 :(得分:0)
但是,您在这里使用正常的回发提交表单。因此,当用户点击“发送”时,页面将回发和服务器端代码,即发送电子邮件和数据库插入被执行。如果是AJAX页面,用户点击提交链接后,链接的innerHTML属性可以更改为“请稍候”,并在收到服务器的响应后,更改回“发送”。
答案 1 :(得分:0)
首先,不要使用超链接<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。
答案 2 :(得分:0)
感谢大家的投入。我做了一些研究,并设法找到一个符合我需求的非常简单的解决方案。我使用CSS来设置我的提交按钮,使其看起来像我的其他链接,并删除了超链接标签和js提交功能,以支持实际的提交按钮。我添加了一些代码,以便在提交表单时将文本值更改为“Please Wait”,并且效果很好。
<input name="Submit" type="submit" value="Send" onClick="this.value = 'Please Wait';">
唯一需要注意的是,如果用户在表单成功提交后碰巧点击了浏览器的后退按钮,提交按钮仍会显示“请等待”,但我可以忍受。
顺便说一句,我放弃了Macromedia表单验证,转而使用PHP验证脚本。它不像javascript或jquery验证那样“活”,但它可以工作。