提交按钮在其属性更改时不发布

Question

我正在使用表单和其中的提交按钮以 html 调用对服务器的发布请求

在提交按钮中，我使用 onclick 事件在发布请求之前更改 UI 中的某些内容。当我不对提交按钮进行任何更改时，一切都很好，它会成功发布请求。但是，如果我更改提交按钮中的任何内容，例如值、禁用属性……那么它不会发布请求

这是我的代码

<form action="url"method="post">

    <input type="submit" onclick="return onClick(event)">

</form>

不发布请求的js代码

function onClick(e) {

    const submit = e.target  // or = this

    submit.value = "Clicked"

    submit.disabled = true

    return true

}

成功发布请求的js代码

function onClick(e) {

    alert("Clicked")

    return true

}

有人可以告诉我它没有成功发布的原因以及如何像上面那样在 UI 更改的情况下发布吗？

Answer 1

您需要使用submit方法来实现结果。-> 分配id给按钮和表单元素，然后获取类似的元素，const btn = document.getElementById('btn');const form = document.getElementById('form');始终建议在 javascript 中使用addEventListener()方法，而不是在 HTML 模板中使用。form.addEventListener('submit', onSubmit)-> 现在您可以在提交方法中更改属性的值，例如，function onSubmit(){&nbsp; &nbsp; btn.value = "Clicked";&nbsp; &nbsp; btn.disabled = true;&nbsp; &nbsp; return true}工作片段如下，const btn = document.getElementById('btn');const form = document.getElementById('form');function onSubmit(){&nbsp; &nbsp; btn.value = "Clicked";&nbsp; &nbsp; btn.disabled = true;&nbsp; &nbsp; return true}form.addEventListener('submit', onSubmit)<form id="form" action="url" method="post">&nbsp; &nbsp; <input type="submit" id="btn"></form>

Answer 2

表单是否发送 POST 或 GET 请求取决于其method属性。尝试将您的表格更改为<form action="url" method="post">&nbsp; &nbsp; <input type="submit" onclick="return onClick(event)"></form>

Answer 3

我的另一个解决方案，我自己找到了，非常感谢@Maniraj Murugan 在上面的帮助：使用 input type="button" 代替，在 onclick 事件中，使用 form.submit() 手动提交<form action="url"method="post">&nbsp; &nbsp; <input type="button" onclick="return onClick(event)"></form>并在 onClick 事件中function onSubmit(e){&nbsp; &nbsp; const btn = e.target&nbsp; &nbsp; btn.value = "Clicked"&nbsp; &nbsp; btn.disabled = true&nbsp; &nbsp; const form = document.getElementById('form')&nbsp; &nbsp; form.submit()}