CODEWITHSUNDEEP
javascriptjquery
eye-wonder
eye-wonder

Reputation: 1193

Merging two jquery functions

I have a working jQuery solution for inserting city based on a Norwegian 4 digit zipcode in a form. But there is two sets of addresses in this form, and I do not know how to duplicate, rename or merge the jQuery function.

<form>
<!--address1-->
  <input type="text" name="ZIPCODE" id="USER.ZIPCODE" size="4" maxlength="8" />
  <input type="text" name="CITY" id="USER.CITY" size="30" maxlength="100" value="test" />
<!--address2-->
  <input type="text" name="ZIPCODE2" id="USER.ZIPCODE2" size="4" maxlength="8" />
  <input type="text" name="CITY2" id="USER.CITY2" size="30" maxlength="100" value="test" />

<script type="text/javascript">
  $(function(){
    $inputField = $("#USER\\.ZIPCODE");
            $outputField = $("#USER\\.CITY");
            $inputField.keyup(function(){
            if($inputField.val().match(/\d{4}/)) {
            $.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code="+$inputField.val()+"&callback=?",
            function(data){
                $outputField.val( data["postal_codes"][0]["city"] );
                $("#USER\\.CITY").attr('readonly','readonly');
                });
            } else {
                $outputField.val("?");
            }
    });
  });

  $(function(){
    $inputField = $("#USER\\.ZIPCODE2");
            $outputField = $("#USER\\.CITY2");
            $inputField.keyup(function(){
            if($inputField.val().match(/\d{4}/)) {
            $.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code="+$inputField.val()+"&callback=?",
            function(data){
                $outputField.val( data["postal_codes"][0]["city"] );
                $("#USER\\.CITY2").attr('readonly','readonly');
                });
            } else {
                $outputField.val("?");
            }
    });
  });
</script>
</form>

I have looked through lots of posts here about merging jQuery functions and func1 func2 approaches without geting the grip on this. I guess it could also be merged with an if-statement of some kind. Working example single address: http://jsfiddle.net/Rx4jZ/ (Both attr and prop will probably work)

Upvotes: 1

Views: 154

Answers (2)

Gonz
Gonz

Reputation: 1219

You should create a function and pass to it the parameters:

$(function(){
    function getCity(inputParam, outputParam){
        var inputField = $("#"+inputParam);
        var outputField = $("#"+outputParam);

        $(inputField).keyup(function(){
            if($(inputField).val().match(/\d{4}/)) {
                $.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code="+$(inputField).val()+"&callback=?",
                    function(data){
                        $(outputField).val( data["postal_codes"][0]["city"] );
                        $(outputField).attr('readonly','readonly');
                    });
            } else {
                $(outputField).val("?");
            }
        });
    }

    getCity('ZIPCODE1', 'CITY1'); 
    getCity('ZIPCODE2', 'CITY2');
});

If you want to add more ZipCodes and Citys you only have to add:

  getCity('newZipCode', 'newCity');

Working JsFiddle: http://jsfiddle.net/Rx4jZ/2/

I really don't know what was wrong wiht the previus version. If you check I don't change much.

Upvotes: 1

Olavxxx
Olavxxx

Reputation: 196

Heisann,

I made a fiddle for you: http://jsfiddle.net/Olavxxx/Mu66h/

HTML

<form>
<!--address1-->
  <input type="text" class="postNummer" data-target="postSted" name="ZIPCODE" id="USER.ZIPCODE" size="4" maxlength="8" />
  <input type="text" class="postSted" name="CITY" id="USER.CITY" size="30" maxlength="100" value="test" />
<!--address2-->
  <input type="text" class="postNummer" data-target="postSted2"  name="ZIPCODE2" id="USER.ZIPCODE2" size="4" maxlength="8" />
  <input type="text" class="postSted2" name="CITY2" id="USER.CITY2" size="30" maxlength="100" value="test" />
</form>

JQuery

$( ".postNummer" ).change(function() {
            // first get the custom attribute data-target
            var theTarget = $( this ).attr("data-target");

            // empty the target
            $("input[class="+ theTarget +"]").val("");

            //If value over 4 in length and number
            if($( this ).val().match(/\d{4}/)) {

            // get data
            $.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code="+$( this ).val()+"&callback=?",
            function(data){
                 $("input[class="+ theTarget +"]").val( data["postal_codes"][0]["city"] ); // insert data
                 $("input[class="+ theTarget +"]").attr('readonly','readonly');    // make readonly
                });
            } else {
                $("input[class="+ theTarget +"]").val("?");
                $(this).effect( "shake" );
            }

  });

Btw. the logic extrats the data-target attribute from $(this) (the input that triggers the code). Also I added classes that are used for triggering events.

Upvotes: 2

Related Questions