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>

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

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

Doc,

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

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