提交HTML表单前用JavaScript修改元素ID的问题求助

我做了一个表单，支持填写信息、提交文件或者输入图片链接来添加图片。我写了JS逻辑：如果两个字段都填了，只保留图片链接；如果只填了其中一个，就保留那个字段——通过修改HTML元素的ID来实现这个逻辑。但点击提交按钮时，页面直接重载并把数据发给PHP文件，JS还没来得及修改ID，导致图片存不进去。

我知道这可能是新手常见问题，但搜了半天没找到不用jQuery的解决方案，我不会用jQuery。

补充说明 #

• 用Materialize框架写的HTML表单
• 编程新手，第一次自己写JS，代码可能冗余，希望解释越详细越好
• 保留了测试时试过的一些代码
• 英语不是母语，表述如有错误请见谅
• 欢迎任何建议，非常感谢

HTML代码 #

<form action="inserirFilme.php" method="POST" id="formulario" onsubmit="alteraIdPoster()">

<!-- ................................................................... 无关代码 -->

<div class="file-field input-field">
    <div class="btn blue accent-1">
        <span>Capa</span>
        <input type="file">
    </div>
    <div class="file-path-wrapper">
        <input id="file-filme" class="file-path validate" type="text" name="file-filme">
    </div>
</div>

<div class="file-field input-field">
    <div class="file-path-wrapper">
        <input id="link-filme" class="file-path validate" type="text" name="link-filme">
        <label for="link-filme">Link do pôster do filme</label>
    </div>
</div>

<div class="card-action">
    <a href="index.php" class="waves-effect waves-light btn grey">Cancelar</a>
    <button id="button-enviar" type="submit" class="waves-effect waves-light btn blue accent-1">Enviar</button>
</div>

</form>

最初的JavaScript代码 #

function alteraIdPoster() {

    const btn = document.getElementById('button-enviar');

    const fileInput = document.getElementById('file-filme');
    const linkInput = document.getElementById('link-filme');

    if (fileInput.value.length !== 0 && linkInput.value.length !== 0) {
        // 👇️ 清空输入框
        fileInput.value = '';
        // 👇️ 修改ID为poster，适配PHP逻辑
        return linkInput.id = 'poster';
    } else if (fileInput.value.length !== 0 && linkInput.value.length == 0) {
        return fileInput.id = 'poster';
    }
}

尝试过的JavaScript代码（表单无法提交） #

const btn = document.getElementById('button-enviar');

btn.addEventListener('click', function handleClick(event) {

    // 👇️ 阻止页面重载
    event.preventDefault();

    const fileInput = document.getElementById('file-filme');
    const linkInput = document.getElementById('link-filme');

    if (fileInput.value.length !== 0 && linkInput.value.length !== 0) {
        // 👇️ 清空输入框
        fileInput.value = '';
        // 👇️ 修改ID为poster，适配PHP逻辑
        linkInput.id = 'poster';
        document.getElementById("formulario").submit();
    } else if (fileInput.value.length !== 0 && linkInput.value.length == 0) {
        fileInput.id = 'poster';
        document.getElementById("formulario").submit();
    }
});

问题根源与解决方案 #

为什么之前的代码不行？

1. 第一种写法：onsubmit="alteraIdPoster()" 里修改ID后，表单已经启动提交流程，浏览器不会等ID修改完成就发送数据；更关键的是PHP接收表单数据靠的是name属性，不是id——你搞错了核心逻辑，修改ID完全不影响PHP接收参数。
2. 第二种写法：只处理了“文件有值”的两种情况，漏掉了“只有链接有值”的场景，导致这种情况下代码不会触发submit()，表单自然提交不了。

正确的处理方式（不用jQuery）

核心思路：放弃修改ID的方案，直接控制表单要提交的参数——用隐藏字段传递最终的海报值给PHP，同时清空不需要的原始字段：

1. 在表单内添加一个隐藏输入框：

<input type="hidden" name="poster" id="poster-hidden">

2. 修改JS逻辑，把最终要传递的海报值赋值给隐藏字段，同时清空冗余字段：

// 给表单绑定submit事件（比绑按钮更可靠，支持回车提交）
document.getElementById('formulario').addEventListener('submit', function(event) {
    // 先阻止默认提交流程，确保JS逻辑执行完毕
    event.preventDefault();

    const fileInput = document.getElementById('file-filme');
    const linkInput = document.getElementById('link-filme');
    const posterHidden = document.getElementById('poster-hidden');

    // 重置隐藏字段值
    posterHidden.value = '';

    if (fileInput.value && linkInput.value) {
        // 两个字段都填了，优先用链接
        posterHidden.value = linkInput.value;
        fileInput.value = ''; // 清空文件字段，避免传递冗余数据
    } else if (fileInput.value) {
        // 只有文件字段有值，用文件路径
        posterHidden.value = fileInput.value;
    } else if (linkInput.value) {
        // 只有链接字段有值，用链接
        posterHidden.value = linkInput.value;
    }

    // 所有逻辑处理完，手动提交表单
    this.submit();
});

3. 修改HTML，移除原有的onsubmit="alteraIdPoster()"：

<form action="inserirFilme.php" method="POST" id="formulario">

额外提示

• 原生type="file"的input，value是浏览器生成的假路径，无法直接获取真实文件。如果PHP需要接收上传的文件，要给文件input加name属性（比如<input type="file" name="poster-file">），然后用PHP的$_FILES处理；如果只是保存文件路径，要确认Materialize的file组件是否正确把真实路径存在file-filme中。
• 表单事件绑定在<form>元素上比绑定在按钮上更可靠，能覆盖用户按回车提交的场景。
• 永远记住：PHP接收表单数据只认name属性，id只是用来在前端定位元素的，和表单提交无关。

内容的提问来源于stack exchange，提问作者Júlia Vieira