如何在提交后清除输入字段

时间:2016-04-15 02:38:20

标签: javascript

我有一个表单,每次输入submit(加号)按钮时我想清除输入字段。

我试过使用它,它不起作用。我可能在错误的地方实施它。

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

});

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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