点击提交后如何清除输入字段答案

【问题标题】：How to clear input field after hitting submit点击提交后如何清除输入字段
【发布时间】：2016-04-15 11:42:27
【问题描述】：

我有一个表单，我想在每次输入提交（加号）按钮时清除输入字段。

我试过用这个，它不起作用。我可能在错误的地方实施它。

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);
    }

});

【问题讨论】：

您是否只想清除具有 'add-item' id 的元素？
@JF-Mechs 是的，我想删除可以添加项目的输入字段。
将 autocomplete="off" 添加到您的表单标签也可能很有用

标签： javascript

【解决方案1】：

这是你需要的：

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>

【讨论】：

【解决方案2】：

使用表单重置方法一次性清除输入。

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

【讨论】：

【解决方案3】：

您可以在提交按钮中设置您的文本框值 = ''。并且您可以创建一个 ClearFunction，然后您可以在每次需要时调用它。

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

【讨论】：