<br><br><div class="gmail_quote">2009/4/10 Dan Webb <span dir="ltr"><<a href="mailto:dan@danwebb.net">dan@danwebb.net</a>></span><br><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div class="im">On Fri, Apr 10, 2009 at 11:58 AM, Andrew Stewart<br>
<<a href="mailto:boss@airbladesoftware.com">boss@airbladesoftware.com</a>> wrote:<br>
>> An alternative would be to replace the submit button with an <input<br>
>> type="button"> so that the submission is entirely under your control. If you<br>
>> don't have to worry about non-JS fallback (which it sounds like is a<br>
>> non-problem) that should be worth a try.<br>
<br>
</div>That's not a good solution.  Aside from the form not being submittable<br>
without JS, there are other problems associated.  Your forms won't<br>
submit when you press return as many users expect.  Don't ever change<br>
the mark up from what it should be just because you want to get a<br>
particular effect with JavaScript.  Especially in this case where<br>
there is no need at all.<br>
<br>
A possible more solid way of architecting something like this is to<br>
have the gecoding service go through your application and you get the<br>
result via Ajax.  Then if the form is submitted without that field<br>
being gecoded then your application can do the geocoding...then you<br>
get your non-JS fallback for free.</blockquote><div><br><br>You'd just need your geocoding function to take a callback to indicate what to do next. Some "pseudocode" (this is real code but uses a library that's not well-known -- you'll need to translate this to Prototype, jQuery, or whatever you're using):<br>
<br><span style="font-family: courier new,monospace;">// I'm assuming you have some Ajax backend that returns JSON.</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">// You'll need to modify this to call Google or whatever</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">var geocode = function(addr, callback) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    $.HTTP.GET('/geocode', {address: addr}, function(response) {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">        callback(response.parseJSON());</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    });</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">};</span></div></div><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">var form    = $('#myForm'),</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">
    address = form.descendants('[name=address]'),</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
    lat     = form.descendants('[name=lat]'),</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
    lng     = form.descendants('[name=lng]'); </span><br style="font-family: courier new,monospace;">
<br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
var updateLatLng = function(callback) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
    geocode(address.node.value, function(data) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
        lat.set({value: data.lat});</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
        lng.set({value: data.lng});</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">        if (typeof callback == 'function') callback();</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">    });</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
};</span><br style="font-family: courier new,monospace;">
<br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">address.on('blur', updateLatLng);</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">form.on('submit', function(form, evnt) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    evnt.stopDefault();</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">    updateLatLng(function() { form.node.submit() });</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">});</span><br>
<br><br>Hope that's of some use.<br><br>--<br>James Coglan<br><a href="http://github.com/jcoglan">http://github.com/jcoglan</a><br>