How to use PHP Ajax.Request onSubmit

Question

I am trying to use a form to send an prototype ajax request to a php script via post and then display an alert window for success and failure

I am currently using this code

<div id="reservationRequestForm">
   <form name="requestReservationForm" method="post" onsubmit="new Ajax.Request('admin/process/process_reservation_request.php', {onSuccess: function() {alert('Success');} , onFailure: function() {alert('Failure');}, method:'post'}; return false;">

....

   <input type="submit" class="buttonGreen" value="Send Request" onClick="hideDiv('reservationRequestForm');"/>
   </form>
</div>

I do not want the response to be processed either (it is empty anyways). I only want to know if it succeeded or failed.

In addition. I would like the form to degrade gracefully when js is disabled.

Right now this code does nothing. What am I doing wrong?

Answer 1

if the onsubmit event isn't being handled, then your form isn't being submitted.

do you have one of the following in your form?

<input type='submit' ... />

<input type='image' ... />

The two elements above when clicked (or activated with space/enter) will submit the form. the onsubmit event handler you have should then catch it and the return false should stop the default action (changing page).

Also, your ajax.Request call doesn't actually seem to use any of the form information from the form itself. Ajax.Request needs to know what information to send.

edit You were minssing a closing parentheses. use the following

<form name="requestReservationForm" method="post" onsubmit="new Ajax.Request('admin/process/process_reservation_request.php', {onSuccess: function() {alert('Success');} , onFailure: function() {alert('Failure');}, method:'post', parameters:Form.serialize(this) }); return false;">