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

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(){

    btn.value = "Clicked";

    btn.disabled = true;

    return true

}

工作片段如下，

const btn = document.getElementById('btn');

const form = document.getElementById('form');

function onSubmit(){

    btn.value = "Clicked";

    btn.disabled = true;

    return true

}

form.addEventListener('submit', onSubmit)

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

    <input type="submit" id="btn">

</form>

Answer 2

表单是否发送 POST 或 GET 请求取决于其method属性。尝试将您的表格更改为

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

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

</form>

Answer 3

我的另一个解决方案，我自己找到了，非常感谢@Maniraj Murugan 在上面的帮助：使用 input type="button" 代替，在 onclick 事件中，使用 form.submit() 手动提交

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

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

</form>

并在 onClick 事件中

function onSubmit(e){

    const btn = e.target

    btn.value = "Clicked"

    btn.disabled = true

    const form = document.getElementById('form')

    form.submit()

}