Merging two jquery functions

Question

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)

Olavxxx · Accepted Answer · 2014-02-25 13:55:12Z

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.

Gonz · Accepted Answer · 2014-02-25 14:22:19Z

1

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.

edited Feb 25, 2014 at 14:22

answered Feb 25, 2014 at 13:07

Gonz

1,20913 silver badges26 bronze badges

2 Comments

eye-wonder Over a year ago

So I am able to pass the first parameters getCity('USER\\.ZIPCODE', 'USER\\.CITY') But how do I pass the second ('USER\\.ZIPCODE2', 'USER\\.CITY2')

eye-wonder Over a year ago

Sorry. I got only one parameter set working at a time. Not both. jsfiddle.net/Rx4jZ/2

Collectives™ on Stack Overflow

Merging two jquery functions

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related