我应该使用什么按钮事件来确认 html 表单？

Question

Using Javascript, no framework, what button event should I use to confirm form when I wish not redirect? I expect to use either left mouse button or keyboard to confirm the form.

I used this element:

<button type="button" value="1">Save</button>

Using type="submit" with "submit" event is no solution for me because this creates redirection (values the from are lost). So I use type "button".

When I use

document.getElementById("advanced_form").addEventListener("click", saveOptions);

This even "click" is used with mouse. But there is possibility that the user will use keyboard instead mouse to submit form. So I suspect the form would not react to keyboard confirm action. I did not find any event related to button being pressed. So how to solve this problem?

Answer 1

You could still use ´type="submit"´ in combination with ´e.preventDefault();´ to aviod the redirect.

I hope this helped, good luck.

Answer 2

From your clarifying comment:

What happened is when I clicked the button the values which were in the form disapeared and so I understood it that the form was reloaded without any values.

Submitting a form...submits the form. What you get back as a result depends entirely on what the server sends back.

But the values should not disappear, the behaviour which I need is like in a normal Browser Window (WINAPI)

That is normal.

...the page will not clear the values. If I'd want to close the form, I'd close the tab (html page).

That isn't normal. Normal is for the form to go away and be replaced by the result of submitting it.

But you can do that with the submit event, just use event.preventDefault() within the submit event to prevent the form submission:

document.getElementById("the-form").addEventListener("submit", function(event) {
    event.preventDefault(); // Prevents the form from being submitted
});

That event will reliably fire whether the user used the mouse, keyboard, or assistive technology to submit the form. The click event on a submit button will not reliably fire when the form is submitted with the keyboard or assistive technology.

Answer 3

You can use submit button, but you need to handle submit action. Try this (with jquery):

<input class="submit_button" type="submit" value="Save" />
<script>
function submit_form(e)
{
    if (check_form_submit()) {
        // check your data here

        $(this).submit();
        return;
    }
    e.preventDefault();
}
$(function() {
    $('.submit_button').parents('form').submit(submit_form);
});
</script>

Answer 4

You should still use the submit input type but you need to prevent the default action so that the page doesn't reload. If you are using jQuery this snippet should help.

$('#my-form').submit(function(ev) {
ev.preventDefault(); // to stop the form from submitting
// Your code here
this.submit(); // If you want to submit at the end
});