Javacscript表上替换HTML超链接文本提交按钮

我有一个HTML按钮使用JavaScript来提交与表单验证表单 -Javacscript表上替换HTML超链接文本提交按钮

<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>

当表单提交，我想按钮上的文字来改变从“发“到”Please Wait ...“，而php代码运行时会向用户发送电子邮件，并将表单数据插入到MySQL数据库中。

我已经做了大量的研究，并找到代码来更改实际提交按钮的文本，但我希望帮助您使用代码更改HTML超链接文本。

来源

2012-10-05 Frank Gimmi

内在事件处理程序属性？链接JavaScript而不是提交按钮？ Macromedia编写的JavaScript函数？通过将数据挂在'document'而不是'return'来传递数据？我想我想蜷缩起来哭泣。 – Quentin

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

来源

2012-10-05 15:53:32 Sunny

首先，请不要使用超链接<a> - 使用提交按钮并使其看起来像超链接，like so。

接下来，为表单的提交事件定义一个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。

来源

2012-10-05 17:14:43

感谢您输入的每个人。我做了一些更多的研究，并设法找到一个非常简单的解决方案，以满足我的需求。我使用CSS来设置我的提交按钮，使其看起来像我的其他链接，并放弃了超链接标记和js提交功能，以支持实际的提交按钮。当表单提交时，我添加了一些代码来将文本值更改为“Please Wait”，并且效果很好。

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

唯一需要注意的是，如果用户恰好单击浏览器的后退按钮的形式提交成功后，提交按钮仍然说“请等待”，但我可以忍受的。

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

来源

2012-10-27 17:30:08

Javacscript表上替换HTML超链接文本提交按钮

回答

相关问题