2016-04-15 89 views
0

我有一個表單,每次輸入提交(加號)按鈕時我都想清除輸入字段。如何清除提交後的輸入字段

我嘗試過使用它,它不起作用。我可能會在錯誤的地方實施它。

document.getElementById('add-item').value=''; 

我的Javascript代碼如下。

window.addEventListener('load', function(){ 

    // Add event listeners 
    document.getElementById('add-item').addEventListener('click', addItem, false); 
    document.querySelector('.todo-list').addEventListener('click', toggleCompleted, false); 
    document.querySelector('.todo-list').addEventListener('click', removeItem, false); 

    function toggleCompleted(event) { 
     console.log('=' + event.target.className); 
     if(event.target.className.indexOf('todo-item') < 0) { 
      return; 
     } 
     console.log(event.target.className.indexOf('completed')); 
     if(event.target.className.indexOf('completed') > -1) { 
      console.log(' ' + event.target.className); 
      event.target.className = event.target.className.replace(' completed', ''); 
      document.getElementById('add-item').value=''; 
     } else { 
      console.log('-' + event.target.className); 
      event.target.className += ' completed';   

     } 
    } 

    function addItem() { 
     var list = document.querySelector('ul.todo-list'); 
     var newItem = document.getElementById('new-item-text').value; 
     var newListItem = document.createElement('li'); 
     newListItem.className = 'todo-item'; 
     newListItem.innerHTML = newItem + '<span class="remove"></span>'; 
     list.insertBefore(newListItem, document.querySelector('.todo-new')); 
    } 

    function removeItem(event) { 
     if(event.target.className.indexOf('remove') < 0) { 
      return; 
     } 
     var el = event.target.parentNode; 
     el.parentNode.removeChild(el); 
    } 

}); 
+0

你只是想用'add-item'id清除元素嗎? –

+0

@ JF-Mechs是的,我想刪除可以添加項目的輸入字段。 – Nick

+0

將autocomplete =「off」添加到您的表單標記也可能有用 –

回答

0

這是你所需要的:

document.getElementById('new-item-text').value = ""; 

關於你的需要,你需要把它放在你的addItem()

你可以參考這個簡單的代碼的末尾:

<html> 
    <body> 
     <input type="text" id="test"> 
     <button onclick="func()">remove</button> 
     <br/> 
     Value = <span id="val"></span> 
     <script> 
      function func(){ 
       alert("clicked"); 
       document.getElementById('val').innerHTML = document.getElementById('test').value; 
       document.getElementById('test').value = ''; 
      } 
     </script> 
    </body> 
</html> 
0

使用窗體重置方法一次性清除輸入。

document.getElementById("myForm").reset(); 
0

您可以在提交按鈕中設置您的文本框的值=''。 ,你可以創建一個ClearFunction,然後你可以在你需要的時候調用它。

function cleartextbox() { 
    $('#name').val("").focus(); 
    $('#selectgender').val(""); 
    $('#telephone').val(""); 
}