1

I have an HTML form that currently just posts the data directly to a PHP file. I want to update the code so that the submit button sends the data to a JavaScript function so that I can create an AJAX function. Is it possible for the submit button to activate a JavaScript function rather than posting to a php file? The only thing I have come up with is below, which quite obviously does not work:

<html>
<head>
<script type="text/javascript">
function ajax(){
  //...
}
</script>
</head>

<body>
<form action="ajax();">
  <!-- ... -->
  <input type="submit" value="Submit" />
</form>
</body>
</html>
ewok
  • 20,148
  • 51
  • 149
  • 254

4 Answers4

6

You can give the "submit" input a "click" handler that explicitly prevents the default behavior from being carried out.

<input type='submit' value='Submit' onclick='ajax(event)'>

Then in the function:

function ajax(event) {
  if ('preventDefault' in event) event.preventDefault();
  event.returnValue = false; // for IE before IE9
  // ...
}

edit @Esailija points out correctly that another option is to handle the "submit" event on the <form> element instead. The function would look pretty much the same, in fact exactly the same, but you'd wire it up like this:

<form id='yourForm' onsubmit='ajax(event)'>

That will also trap things like the "Enter" key action, etc.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • can you explain what `event` is in this case? Also, will this send the data in the form to the javascript function or will I have to retrieve it myself? – ewok Jan 11 '12 at 14:23
  • The "event" parameter is an object created by the browser to describe the event that triggered the call to the event handler. That code does not send anything anywhere; it's just an example of how you would set up the function, as you asked. The code to do the ajax call would go after the first two lines of the function in my example. Exactly how you'd do that depends on your form and your server, etc. – Pointy Jan 11 '12 at 14:24
  • 1
    But the form will still be submitted through other means (such as pressing enter), I think it's more robust to do the this in the form onsubmit and leave the submit button alone. – Esailija Jan 11 '12 at 14:25
  • @Esailija yes that's certainly true; I can extend the answer. – Pointy Jan 11 '12 at 14:26
  • If I want to allow the default submission action to take place, but also send an AJAX request to the server, could I simply use the `onclick` without the lines of javascript that prevent the default action? – ewok Jan 13 '12 at 14:09
  • Allowing the default submit (which would be the POST of the form) *and* an AJAX request would be problematic. You'll never get the response to the AJAX request, so if there's a problem with it the client side would not be able to react. However, if you leave off the "preventDefault" stuff then you could certainly try it. – Pointy Jan 13 '12 at 14:33
2

Of course you can. But it's more useful to call your Javascript function in the input like this : 

 <input type="submit" value="Submit" onclick="ajax();" />

And remove the action part in the form.

JuSchz
  • 1,200
  • 2
  • 15
  • 30
0

I jQuery you can use event.preventDefault(); otherwise just use return false;

http://jsfiddle.net/mKQmR/

http://jsfiddle.net/mKQmR/1/

PiTheNumber
  • 22,828
  • 17
  • 107
  • 180
0

Pointy is correct... just add a click handler to the submit button, however make sure the last line of the click handler returns "false" to prevent the form from actually being posted to the form's action.

<html>
<head>
<script type="text/javascript">
function ajax(){
  //...
return false;
}
</script>
</head>

<body>
<form action="thispage.htm">
  <!-- ... -->
  <input type="submit" value="Submit" onclick="ajax();" />
</form>
</body>
</html>
pete
  • 24,141
  • 4
  • 37
  • 51
  • Calling `.preventDefault()` and setting `returnValue` to `false` has the effect of cancelling the default action of the element. – Pointy Jan 11 '12 at 14:25
  • If you are gonna `return false` it needs to be in the handler function. `onclick="ajax(); return false;"` or `onclick="return ajax();"` – Esailija Jan 11 '12 at 14:32