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

How to clear input field after hitting submit

本文关键字：清除 输入 字段 何清除 提交      更新时间：2024-06-29

我有一个表单，每次输入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);
    }
});

这就是您所需要的：

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>

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

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

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

function cleartextbox() {
    $('#name').val("").focus();
    $('#selectgender').val("");
    $('#telephone').val("");
}
相关文章：