кнопка отправки не публикуется, когда ее атрибуты были изменены

Question

Я использую форму и кнопку отправки в ней для вызова почтового запроса на сервер в html

В кнопке отправки я использую событие onclick, чтобы что-то изменить в пользовательском интерфейсе перед отправкой запроса. Все в порядке, когда я ничего не меняю в кнопке отправки, она успешно отправляет запрос. Но если я изменю что-нибудь в кнопке отправки, например значение, атрибут отключения, ... тогда он не отправит запрос

Вот мой код

<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
}

Может ли кто-нибудь сказать мне причину, по которой он не публикуется успешно, и как отправить сообщение с изменением пользовательского интерфейса, как указано выше?

Answer 1

Вам нужно использовать метод submit для достижения результата.

-> Назначьте id кнопке и элементу формы, затем получите такой элемент, как

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

It всегда рекомендуется использовать метод addEventListener () в javascript вместо того, чтобы делать его в шаблоне 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()
}