重置按钮在HTML（PHP）中无法正常工作。

6 浏览
0 Comments

重置按钮在HTML（PHP）中无法正常工作。

我把重置按钮的输入类型放在表单里面，但它仍然不起作用。

 

Update News Content

 

 

 

 

 

 

 

 

我也尝试过

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

我认为你忘记在你的html中插入form标签了。如果你把按钮代码插入

..button code here..

中，它应该能正常工作。类似这样：

0
0 Comments

如果你期望重置按钮可以清空表单，那不是reset的作用。它会重置表单字段为页面加载时的状态。在这种情况下，表单中有预填内容，所以点击重置按钮只会撤消用户自页面加载以来所做出的任何更改。

要将所有表单字段重置为空/空白，你需要使用javascript。首先获取表单DOM对象，然后迭代要重置的所有输入类型，并将每个field.value = ''（输入文本类型/文本区域）或修改属性（对于选择、单选、复选框等）以取消选择等操作。将其转化为一个函数（可能已经有现成的代码了，我好像把我的搞丢了），并将其附加到你的重置按钮的click事件或表单的reset事件。

编辑：快速搜索后，这里有一个基本的清空表单的例子。

编辑：如果你只关心文本字段以外的任何内容，这里有一个简单的方法。我们为表单添加一个"重置"事件监听器，当它触发时，所有字段都被设置为空字符串。

function setFormCleanReset(formId) {
    let formEl = document.querySelector(formId);
    // Add event listener for reset event
    formEl.addEventListener('reset', function(e) {
        // Iterate all non-hidden fields, set values to ''
        for(const fieldEl of formEl.querySelectorAll('input:not([type=hidden])')) {
            // @todo check input type and handle "select" etc.
            fieldEl.setAttribute('value', '');
        }
    });
}
// usage: setFormCleanReset('my_form_id');

0