WikiSoftBlog
I just recently came accross a unique coding problem and it seems to be pretty common on the web. When you create some forms when you hit enter it doesn't submit the form to the javascript code.
I recently completed a job for Agro-K corporation doing a distributor locator that uses Google Maps API. They were pretty happy with the installation although they realized that when they typed in an address and hit enter nothing seemed to happen.
I was aware of this but the previous client was OK with just clicking the button manually so I left it at that even though I thought it was somewhat annoying.
Anyhow, here is the code that I was using and here is how I resolved it.
<input type="text" id="addressInput"/>
Radius: <select id="radiusSelect">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100" selected>100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000" >1000</option>
</select>
<input type="button" onclick="searchLocations()" value="Search Locations"/>
<br />
<strong>Director Name</strong> full or partial
<br />
<input type="text" id="nameInput"/>
<input type="button" onclick="searchLocations2()" value="Director Name"/>
<br/>
<strong>Office Name</strong> full or partial
<br />
<input type="text" id="companyInput"/>
<input type="button" onclick="searchLocations3()" value="Office Name"/>
<br/>
So the basic thing that is happening here is there is a form, and at the bottom there are several buttons each with an onclick command that will run a specific javascript function when clicked. However not when you hit enter ... in Firefox.
So I went on the search and this is what I dug up. The code should look more like this to achieve the desired effect.
Ok so I tailored this down to just one button for the code, but here it is.
<form onsubmit="javascript:searchLocations();return false;">
<input type="text" id="addressInput"/>
Radius: <select id="radiusSelect">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100" selected>100</option>
<option value="250">250</option>
</select>
<input type="submit" value="Search Locations"/>
</form>
The difference is I added the <form> </form> tag and made the button into a submit button. I overloaded the form though by adding an "onsubmit" to the <form> tag that sends the javascript instead of an onclick and it worked beautifully! Also you have to be sure to add return false to the <form> tag as well or it will not work.
Leave a comment