停止HTML5表单发布，刷新或在onSubmit上打开一个新窗口

Question

I'm using the HTML5 form tag for the client side validator built into it, but I don't want it to submit a thing as I've just got a Javascript function to run instead.

How can i stop the Post method of the form.

Cheers - Caius

Answer 1

add a return false after the function call, like so:

<input .... onclick="function();return false;" />

or you could just return true/false from the function like so:

<input .... onclick="return function()" />

Answer 2

我更倾向于保留我的函数，并在onsubmit处理程序中添加一个返回false，例如：

<form onsubmit="aFunction(); return false;">

Answer 3

If you use jQuery you can do:

$('#your_form_id').submit(function(e){
   e.preventDefault(); 
  // do your staff
});

You can also do it without a framework:

document.getElementById('your_form_id').addEventListener('submit' function() {
  // do your staff
  return false;
});

In the "// do your staff" you can write your ajax code.

Answer 4

I've try all your solution but it still to reload the page after the ajax process :

<form id="form2" method="POST" onsubmit='sent(); return false;' >

function sent(){
    $.ajax({
        ...
    });
}

Answer 5

Add the onsubmit property to your form tag:

<form onsubmit="return myfunction()">

ensure you return a bool for your function

function myfunction() {
  // do your validation
  if (validation.passes)  { // you will need to change this line !!!
     return true; // to submit
  } else {
     return false; // to prevent submit
  }
}

Answer 6

Add a onsubmit handler to your form, eg

<form method="POST" onsubmit="return sendForm();">

Then define the function and add false as return value:

function sendForm() {
    //do your ajax request...
    return false;
}