爲了防止這種情況,你可以創建並提前追加那些span
s,而只需要修改它們的文本時,按鈕被點擊提交。
例如,重新安排你的代碼如下:
var myForm = document.getElementsByTagName('form')[0];
var formFields = document.getElementsByTagName('label');
// create empty spans in advance
var statusMessageHTML = [];
for(var i = 0; i < formFields.length; i++) {
statusMessageHTML[i] = document.createElement('span');
statusMessageHTML[i].className = 'status-field-message';
formFields[i].appendChild(statusMessageHTML[i]);
}
myForm.addEventListener('submit', function(event) {
event.preventDefault();
// change the text of spans
for(var i = 0; i < formFields.length; i++)
statusMessageHTML[i].textContent = 'Error Message';
});
注:
- 你必須包括使用前相應的函數的參數變量名稱(即
event
)。
span.textContent
可能比您的情況更可取span.innerHTML
。
- 在
addEventListener
的回調函數中返回一個值是毫無意義的。返回的值只是被丟棄。
- 在使用它們之前聲明所有變量(例如,
i
)是一種很好的做法。
- 您也可以直接在HTML中構建這些
span
s,因爲它們在結構中是「靜態的」。
更新
如果我理解正確的話,你喜歡:
- 創建這些
span
S作爲佔位符時,它是第一次在用戶提交。
- 當接收到ajax請求的響應時,在
span
s中重寫值。
- 如果多次單擊提交按鈕,只需清除
span
s中的先前值,並且以下過程保持不變。
那麼我相信,你只需要整個包住的部分在if-else
塊:
var myForm = document.getElementsByTagName('form')[0];
var formFields = document.getElementsByTagName('label');
var statusMessageHTML = [];
var isFirstSubmit = true;
myForm.addEventListener('submit', function(event) {
event.preventDefault();
if(isFirstSubmit) {
// create empty spans
for(var i = 0; i < formFields.length; i++) {
statusMessageHTML[i] = document.createElement('span');
statusMessageHTML[i].className = 'status-field-message';
formFields[i].appendChild(statusMessageHTML[i]);
}
isFirstSubmit = false;
} else {
// clear previous values
for(var i = 0; i < formFields.length; i++)
statusMessageHTML[i].textContent = '';
}
});
當你得到的迴應(可能包裝在一個回調函數,改寫值,因爲它是一個AJAX要求):
function callback(response) {
for(var i = 0; i < formFields.length; i++)
statusMessageHTML[i].textContent = /*values in response*/;
}
感謝您的回答@Microloft這是爲了防止這種情況的唯一途徑?我一般都是新手,所以如果我錯了,請糾正我。 我寧願將創建代碼保留在提交函數中,因爲這種方式跨度只有在用戶提交表單時纔會創建(在此之前不需要有這些跨度),這樣,初始頁面加載將是一個一點點....更快?我的意思是,只是一點點。這是我的理由,爲什麼我更希望只在有用時創建這些跨度(在用戶提交表單時顯示錯誤消息)。 – GhostOrder
我明白你的意思了,但我仍然不清楚你想要完成什麼。如果多次單擊提交按鈕,您是要刪除現有的「span」並創建一個全新的集合,還是跳過該部分?如果用戶最終提交成功,您是否要刪除那些現有的「span」? – Microloft
理想情況下,我想創建的跨度只有當一個錯誤消息是從PHP發出的,但那麼我需要在js中進行驗證,對不對?而且我更喜歡只用php和ajax這個表單(我知道我的代碼中沒有一個,我只是把「錯誤信息」作爲保存行的例子)。所以,要回答這個問題,如果提交按鈕被單擊多次,我想首先清除跨度的innerHTML,然後重寫從我的ajax請求返回的值(目前,如果我的PHP檢測沒有錯誤只是發送一個空字符串。順便說一句,我不知道是否是一個好習慣)。 – GhostOrder