Greetings from relative JS newbie.
Been working on a problem that is utilizing the scriptaculous and prototype libraries. I have created a mockup to ensure that all is working prior to implementation.
GOALS
1. complete a form using Ajax.Autocomplete (works)
2. send this data to php for processing (works - at least with another class)
3. return the information and post it within a div on the submission page (not working)
My understanding is that the Ajax.Updater will return this information to the div specificied. If I am correct (99% sure), then I need assistance. If I am not correct in this assumption, are there any suggestions out there?
WORKING
Autocomplete from mySQL database
It is pretty simple, use autocomplete to offer suggestions
NOT WORKING
Submit this data (post) to appear within a defined div using "new Ajax.Updater"
PROBLEM
When I use "onsubmit" the information is not presented within the div.
I have been able to troubleshoot a little utilizing "onkeydown" so I know what is occuring on the server is indeed working. Script working here.
When I use "onsubmit" the information is not presented within the div. When troubleshooting to by adding an action to the form the correct information is being passed.
Is it a simple error in the form handling? Any other ideas?
Thanks in advance.
Here is the relevant code:
<h3>Projects - Autocomplete</h3>
<div id="autocomplete">
<div><!-- div for the form -->
<form name="form_name" id="form_id" method="post" onsubmit="ajaxSubmit()" />
<label>Type here: </label>
<input type="text" id="input_id" name="input_name" value="" /> <!-- autosearch input -->
<img id="busy" src="../common/busy.gif" style="display:none;" alt="working ..." /> <!-- busy indicator -->
</form>
</div> <!-- end form -->
<div id="hint"></div> <!-- this div will output the "hint" as obtained through the autocomplete -->
<script type="text/javascript">
<!--
document.form_name.input_id.focus(); <!-- place cursor in form_name -->
new Ajax.Autocompleter("input_id","hint","search.php", <!-- autocomplete script -->
{ minChars:1, partialSearch:true, frequency: 0.2 }
);
//-->
</script>
</div><!-- end autocomplete div -->
<!-- ajax callback (Ajax.Updater) -->
<script language="javascript">
<!--
ajaxSubmit = function(){
var target = 'updated'; //target div
var url = 'submit.php'; //url to processor
var pars = Form.serialize('form_id');
var myAjax = new Ajax.Updater(target, url, {asynchronous:true, method:'post', parameters:pars });
}
-->
</script>
<div id="updated"></div><!-- ajax callback div -->