HTML/JavaScript：提交后清空对话框输入框内容的实现方法

问题根源 #

你当前代码里的清空逻辑无效，是因为document.querySelectorAll("#main-customers")选中的是整个dialog容器，而不是里面的输入框。dialog元素本身没有value属性，所以设置itm.value = ""根本起不到清空输入框的作用。

解决方案 #

下面提供几种简单有效的修复方式：

方式一：直接清空已获取的输入框变量

你已经在代码开头获取了三个输入框的DOM对象，直接对它们设置空值即可，替换掉原来的循环代码：

// 替换原来的循环部分
name.value = "";
country.value = "";
goods.value = "";

修改后的完整点击事件代码：

document.getElementById("main-customers-send").addEventListener("click", function(){
    // 移除无数据提示
    var no_data= document.getElementById("main-customers-table-no-data");
    if(no_data){
        no_data.remove()
    }

    var name= document.getElementById("main-customers-name");
    var country= document.getElementById("main-customers-country");
    var goods= document.getElementById("main-customers-goods");
    
    // 添加数据到表格
    document.getElementById("main-customers-table").innerHTML+=`<tr>
        <td>${name.value}</td>
        <td>${country.value}</td>
        <td>${goods.value}</td>
    </tr>`;

    // 清空输入框（修复后的代码）
    name.value = "";
    country.value = "";
    goods.value = "";

    closeDialog("main-customers")
})

方式二：批量选中dialog内的所有输入框清空

如果后续可能增加更多输入框，用这种方式更灵活，不需要逐个获取变量：

// 替换原来的循环部分
const inputs = document.querySelectorAll("#main-customers input[type='text']");
inputs.forEach(input => input.value = "");

方式三：打开dialog时自动清空（推荐）

为了确保用户不管是点击发送还是取消，再次打开dialog时输入框都是空的，可以在打开dialog的函数里添加清空逻辑。假设你的打开函数是openDialog，修改如下：

function openDialog(dialogId) {
    const dialog = document.getElementById(dialogId);
    // 清空所有输入框
    const inputs = dialog.querySelectorAll("input[type='text']");
    inputs.forEach(input => input.value = "");
    // 打开对话框
    dialog.showModal();
}

同时，给取消按钮也加上清空逻辑，避免用户取消后再次打开还保留输入值：

<!-- 修改取消按钮的onclick -->
<button id="main-customers-cancel" onclick="clearDialogInputs('main-customers'); closeDialog('main-customers')">إلغاء</button>

// 添加清空函数
function clearDialogInputs(dialogId) {
    const inputs = document.querySelectorAll(`#${dialogId} input[type='text']`);
    inputs.forEach(input => input.value = "");
}

内容的提问来源于stack exchange，提问作者Manal