如何在提交HTML表单数据时保留用户输入不清除表单

有两种常用方案可以实现这个需求，根据你的实际场景选择：

方案一：异步提交（页面不刷新，完全保留输入） #

这种方案通过JavaScript拦截表单的默认提交行为，用AJAX发送数据，页面不会刷新，用户输入自然保留。

修改后的代码示例：

<form id="myForm" method="get">
    <input type="search" id="search" name="req" autocomplete="off" spellcheck="false" role="combobox"
           placeholder="write here" aria-live="polite"><br>
    <div class="form_radio_btn">
        <input id="radio-1" type="radio" name="radio" value="first" checked>
        <label for="radio-1">first</label>
    </div>
    <div class="form_radio_btn">
        <input id="radio-2" type="radio" name="radio" value="Second">
        <label for="radio-2">second</label>
    </div>
    <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    
    // 收集表单数据
    const formData = new FormData(this);
    
    // 用fetch发送数据（也可以用XMLHttpRequest）
    fetch('你的后端接口地址', {
        method: 'GET', // 和表单method一致
        body: formData
    })
    .then(response => response.json()) // 根据后端返回格式调整
    .then(data => {
        // 处理提交成功后的逻辑，比如提示用户
        console.log('提交成功', data);
    })
    .catch(error => {
        console.error('提交失败', error);
    });
});
</script>

方案二：服务器端回填值（适合需要页面刷新的场景） #

如果你的业务需要页面刷新（比如提交后展示新内容），可以在服务器端处理请求后，把用户提交的值回填到表单控件中。

以PHP为例，修改后的表单代码：

<form method="get">
    <input type="search" id="search" name="req" autocomplete="off" spellcheck="false" role="combobox"
           placeholder="write here" aria-live="polite" value="<?php echo htmlspecialchars($_GET['req'] ?? '', ENT_QUOTES); ?>"><br>
    <div class="form_radio_btn">
        <input id="radio-1" type="radio" name="radio" value="first" <?php echo (isset($_GET['radio']) && $_GET['radio'] === 'first') ? 'checked' : ''; ?>>
        <label for="radio-1">first</label>
    </div>
    <div class="form_radio_btn">
        <input id="radio-2" type="radio" name="radio" value="Second" <?php echo (isset($_GET['radio']) && $_GET['radio'] === 'Second') ? 'checked' : ''; ?>>
        <label for="radio-2">second</label>
    </div>
    <button type="submit">提交</button>
</form>

说明：

• 用htmlspecialchars转义用户输入，防止XSS攻击
• 用??运算符处理参数不存在的情况（PHP 7+支持）
• 单选框通过判断提交的radio值来设置checked属性

如果用其他后端语言（比如Python Flask、Node.js Express），逻辑类似：获取URL中的GET参数，将值对应填充到表单控件的value或checked属性中。

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