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超鏈接文本提交按鈕

回答

相關問題