php - 重置按钮在 html (php) 中不起作用

Question

我已将我的输入类型重置按钮放在表单中，但它仍然无法正常工作。

<form method='post' action='process/update_news_action.php' >
<tr>
   <td colspan='2' class="col-md-4">Update News Content</td>
</tr>
<tr >
   <td colspan='2' class="col-md-8"><textarea name="news" id="text"><?php echo  $rows["news"] ;  ?></textarea></td>
</tr>
<tr>
   <td class="col-md-4"><input name='submit' type="submit" value='Publish' class="btn btn-success" /></td>
   <td class="col-md-4"><input name='reset' type="reset" value='Reset' class="btn btn-primary" /></td>
</tr>
</form>

我也试过<button type="reset" value="Reset">Reset</button>

Answer 1

如果您希望重置按钮清空表单，那不是重置的工作方式。它会将表单字段重置为加载页面时的状态。在这种情况下，您已经在表单中预先填写了内容，因此单击重置将简单地撤消自页面加载以来的任何用户更改。

要将所有表单字段重置为空白/无，您将需要 javascript。先获取表单DOM对象，然后遍历所有要重置的输入类型，设置每个field.value = ''(输入文本类型/textarea)，或者修改属性(对于select，单选、复选框等)取消选择等。把它变成一个函数(那里可能有一个现成的部分，我好像丢了我的)，并将它附加到你的重置按钮的 click 事件——或者你的表单的 reset 事件。

编辑:在快速搜索中，这里有一个 how to clear a form 的基本示例为空值。

编辑:如果您只关心文本字段，这里有一个简单的方法。我们向表单添加一个“重置”事件监听器，当它触发时，所有字段都设置为空字符串。

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