3 added 35 characters in body
source | link

Thanks a lot!!

   EDIT :

Thanks a lot!!

 EDIT :

Thanks a lot!!  EDIT :

2 added 2339 characters in body
source | link

EDIT :

I was trying to use this : http://css-tricks.com/using-ziptastic/ forum and do the following :

for some reason the alert is not showing up!!!I tried to debug using chrome and found no errors too. I tried to use mouseover on #zip as well as keydown, both do not work. Why would the mouseover/keydown event not work

Am i missing something?

       <apex:page standardStylesheets="false" showheader="false" sidebar="false" docType="html-5.0" cache="true">
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"/>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"/>
    <script>
    var j$ = jQuery.noConflict();
    j$(document).ready(function(){ 
    j$(".fancy-form div > div").hide();
    });
    $("#zip").mouseover(function() {
    alert('Entered mouse over block');
    });

    </script>
<form action="#" method="post" class="fancy-form">


      <fieldset>
        <legend>Address</legend>

        <div>
          <div>
            <input type="text" name="address-line-1" id="address-line-1"/>
            <label for="address-line-1">Street #1</label>
          </div>
        </div>
        <div>
          <div>
            <input type="text" name="address-line-2" id="address-line-2"/>
            <label for="address-line-2">Street #2</label>
          </div>
        </div>
        <div>
          <div class="city-wrap">
            <input type="text" name="city" id="city"/>
            <label for="city">City</label>
          </div>
           <div class="state-wrap">
            <input type="text" name="state" id="state"/>
            <label for="state">State</label>
          </div>
           <div class="zip-wrap">
            <input type="text" pattern="[0-9]*" name="zip" id="zip"/>
            <label for="zip">Zip</label>
            <p class="zip-error">Not a real zip code.</p>
          </div>
        </div>

        <div>
          <input type="submit" value="Submit"/>
        </div>

      </fieldset>

EDIT :

I was trying to use this : http://css-tricks.com/using-ziptastic/ forum and do the following :

for some reason the alert is not showing up!!!I tried to debug using chrome and found no errors too. I tried to use mouseover on #zip as well as keydown, both do not work. Why would the mouseover/keydown event not work

Am i missing something?

       <apex:page standardStylesheets="false" showheader="false" sidebar="false" docType="html-5.0" cache="true">
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"/>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"/>
    <script>
    var j$ = jQuery.noConflict();
    j$(document).ready(function(){ 
    j$(".fancy-form div > div").hide();
    });
    $("#zip").mouseover(function() {
    alert('Entered mouse over block');
    });

    </script>
<form action="#" method="post" class="fancy-form">


      <fieldset>
        <legend>Address</legend>

        <div>
          <div>
            <input type="text" name="address-line-1" id="address-line-1"/>
            <label for="address-line-1">Street #1</label>
          </div>
        </div>
        <div>
          <div>
            <input type="text" name="address-line-2" id="address-line-2"/>
            <label for="address-line-2">Street #2</label>
          </div>
        </div>
        <div>
          <div class="city-wrap">
            <input type="text" name="city" id="city"/>
            <label for="city">City</label>
          </div>
           <div class="state-wrap">
            <input type="text" name="state" id="state"/>
            <label for="state">State</label>
          </div>
           <div class="zip-wrap">
            <input type="text" pattern="[0-9]*" name="zip" id="zip"/>
            <label for="zip">Zip</label>
            <p class="zip-error">Not a real zip code.</p>
          </div>
        </div>

        <div>
          <input type="submit" value="Submit"/>
        </div>

      </fieldset>
    Tweeted twitter.com/#!/StackSalesforce/status/279129896654102528
1
source | link

Autofill state and city when typing zipcode

I know this would be crazy to have feature!!! Is there a way where when the user enters the zip code do an automatch and fill the state and city ?

I was looking at http://daspecster.github.com/ziptastic/demo.html

This is exactly what I want but in a VF page!!!

Can somebody guide me how to use the javscript inside the VF page/provide any other alternatives to this approach ?

Thanks a lot!!