提交按钮在其属性更改后不会 post

Question

我正在使用表单和其中的提交按钮调用 post 请求到 html

中的服务器

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

这是我的代码

<form action="url"method="post">
    <input type="submit" onclick="return onClick(event)">
</form>

不post请求的js代码


function onClick(e) {
    const submit = e.target  // or = this
    submit.value = "Clicked"
    submit.disabled = true
    return true
}

post请求成功的js代码

function onClick(e) {
    alert("Clicked")
    return true
}

有人能告诉我它没有 post 成功的原因以及如何 post 和 UI 像上面那样改变吗？

Answer 1

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

<form action="url" method="post">
    <input type="submit" onclick="return onClick(event)">
</form>

Answer 2

您需要使用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 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()
}

提交按钮在其属性更改后不会 post

submit button does not post when its attributes were changed

javascript

onclick

form-submit