2017-08-06 88 views
1

我有一個基本的HTML形式,當用戶離開空白字段我顯示一個消息,跨越我創建通過JavaScript,到目前爲止好。但是,如果我一再單擊「提交」按鈕,郵件會一次又一次地打印在已打印的郵件上方,我的意思是重疊。如何清除跨度的innerHTML

我試過了element.innerHTML ='';和this。也許我執行不好,因爲它不起作用。

var myForm = document.getElementsByTagName('form')[0]; 
var formFields = document.getElementsByTagName('label'); 

myForm.addEventListener('submit', function(){ 
    event.preventDefault(); 
    var statusMessageHTML = [];  
    // create empty spans 
    for(i = 0; i < formFields.length; i++){ 
     statusMessageHTML[i] = document.createElement('span'); 
     statusMessageHTML[i].className = 'status-field-message'; 
     formFields[i].appendChild(statusMessageHTML[i]);  
    } 
    // print a string in empty spans 
    for(i = 0; i < formFields.length; i++){ 
     statusMessageHTML[i].innerHTML = "Error Message" 
    }  
    return false; 
}); 

PD:我想解決這個使用純JavaScript。

CODEPEN

回答

1

爲了防止這種情況,你可以創建並提前追加那些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*/; 
} 
+0

感謝您的回答@Microloft這是爲了防止這種情況的唯一途徑?我一般都是新手,所以如果我錯了,請糾正我。 我寧願將創建代碼保留在提交函數中,因爲這種方式跨度只有在用戶提交表單時纔會創建(在此之前不需要有這些跨度),這樣,初始頁面加載將是一個一點點....更快?我的意思是,只是一點點。這是我的理由,爲什麼我更希望只在有用時創建這些跨度(在用戶提交表單時顯示錯誤消息)。 – GhostOrder

+0

我明白你的意思了,但我仍然不清楚你想要完成什麼。如果多次單擊提交按鈕,您是要刪除現有的「span」並創建一個全新的集合,還是跳過該部分?如果用戶最終提交成功,您是否要刪除那些現有的「span」? – Microloft

+0

理想情況下,我想創建的跨度只有當一個錯誤消息是從PHP發出的,但那麼我需要在js中進行驗證,對不對?而且我更喜歡只用php和ajax這個表單(我知道我的代碼中沒有一個,我只是把「錯誤信息」作爲保存行的例子)。所以,要回答這個問題,如果提交按鈕被單擊多次,我想首先清除跨度的innerHTML,然後重寫從我的ajax請求返回的值(目前,如果我的PHP檢測沒有錯誤只是發送一個空字符串。順便說一句,我不知道是否是一個好習慣)。 – GhostOrder