Making form submitted using prototype js (Ajax)

[doclucas]

Hi,

I have the following search code and want to use prototype js to have it submitted without refreshing the page.
I tried a few things, but couldn't make it work, would appreciate any help.
Here is the html code:

<form method="post" action="quick_stockview.php" name="quickview">
            <table border="0" align=center>              <tr>              <tr>                <form method="post" action="quick_stockview.php" name="fori">
<th class="smallText" align="left" valign="top">Categories:<br><select name="cat_id" onChange="this.form.submit();"><option value="0">Top</option><option value="65">Option 1</option><option value="69">&nbsp;&nbsp;&nbsp;Option 2</option><option value="67">&nbsp;&nbsp;&nbsp;Option 3</option><option value="68">&nbsp;&nbsp;&nbsp;Option 4</option><option value="66">&nbsp;&nbsp;&nbsp;Option 5</option></select>&nbsp;&nbsp;&nbsp;&nbsp;

<th class="smallText" align="left" valign="top">Products Name:&nbsp;<br><input type="text" name="keywords" value="">
<th class="smallText" align="left" valign="top">Group:&nbsp;<br><input type="text" name="group" value="">&nbsp;<input type="submit" name="submit" value="Search"><input type="radio" name="active" value="all" CHECKED>All<input type="radio" name="active" value="no">Inactive<input type="radio" name="active" value="yes"> Active
</form>&nbsp&nbsp&nbsp<a href="quick_stockview.php"><u><font color=blue>Reset</font></u></a>
</th></tr><table>
<table border="0" align=center><tr><th class="smallText" align="left" valign="top"><input type="checkbox" name="prices" value="no">Prices<input type="checkbox" name="cost" value="no">Cost<input type="checkbox" name="length" value="no">Lengths<input type="checkbox" name="height" value="no">Heights<input type="checkbox" name="width" value="no">Widths<input type="checkbox" name="weight" value="no">Weights<input type="checkbox" name="sold" value="no" onclick="check(this)">Sold<input type="checkbox" name="serial" value="no">Serial<input type="checkbox" name="vcode" value="no">Vendor Code<input type="checkbox" name="added" value="no">Date Added&nbsp;&nbsp;&nbsp;<input type="checkbox" name="pics" value="no"><font color=green>Large Pics</font></th>

</th></tr><table>
<table border="0" align="center" id="moreInfo"><tr>
<br>
      <th class="smallText" align="left"><input type="radio" name="soldrange" value="months" onclick="clearFlds()">Sold Past Months:&nbsp;<br><input type="text" id="pastm" name="pastm" value="" disabled="disabled">&nbsp;&nbsp;&nbsp;<font color=red>Or:</font>
      <th class="smallText" align="left"><input type="radio" name="soldrange" value="dates" onclick="clearFlds()">Sold From:&nbsp;<br><input type="text" id="sdate" name="sdate" value="" disabled="disabled"><img src="images/grid-cal.gif" alt="" id="trigger1" title="Date selector">

      <th class="smallText" align="left">Sold Until:&nbsp;<br><input type="text" id="edate" name="edate" value="" disabled="disabled"><img src="images/grid-cal.gif" alt="" id="trigger2" title="Date selector">
</form>

[Airshow]

Doclucas,

I'm not a Prototype person, however I'll have a go at answering your question as nobody else has responded.

Firstly, I strongly suggest you don't use nested forms. There's no guarantee that all browsers will hande nesting in the same way.

1. Add onsubmit="return ajaxRequest(this); to the (remaining) form tag.
2. The following function should (if I understand the Prototype API correctly) submit the request and provide one or other of two alerts:

   function ajaxRequest(form){
   	form.request( {
   		onComplete: function(){ alert('Form data processed!') },
   		onFailure:  function(){ alert('Form data failed!') }
   	} );
   	return false;
   }

Of course, you can always change the callback functions (onComplete/onFailure) to do something else, such as insert their messages into a "message" area on the page.

When in doubt always look in the API of the lib/framework you are using. In this case http://www.prototypejs.org/api/

Airshow

[doclucas]

Thanks for your reply, Airshow, but this didn't work. Any other suggestions?

[Airshow]

Doc,

Where did it break? What error message did you get?

Airshow

[Airshow]

OK, I've downloaded Prototype and tested so let's try again:

function ajaxRequest(form){
	$(form).request( {
		onComplete: function(){ alert('Form data processed!') },
		onFailure:  function(){ alert('Form data failed!') }
	} );
	return false;
}

The only thing that's changed is form.request( { to $(form).request( { .
Under test it gave me both callback messages, so it may be that the callback events need to be changed. The AJAX section of the Prototype API gives a whole list to try, or maybe a proper Prototype person (PPP?) can advise.

Airshow