SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to Return a value with a Change Function

    I have some radio buttons on my page, and I need the value of a variable to change depending on what radio button is selected. I'm not sure how to return the new value so I can use it outside of the change function. Thanks for any help.

    Code:
    $jq('.some-radios').change(function(){
      if($jq('input[name=choose-radio]:checked')){
        var currentID = $jq('input[name=choose-radio]:checked').val();
        return currentID;
      }
    });
    console.log(currentID);

  2. #2
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Have you looked at the examples from the jQuery docs? There's an example using a select element with many options that you should be able to modify to handle radio buttons.

    http://api.jquery.com/change/

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a good example there, but I'm not sure I understand how to access the changed variables outside of the change function.

    I want to use the change function to change the value of a variable, but I need to use the new value in other parts of my code that I don't want to have to include inside the change function.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mnicki_mouse View Post
    That's a good example there, but I'm not sure I understand how to access the changed variables outside of the change function.

    I want to use the change function to change the value of a variable, but I need to use the new value in other parts of my code that I don't want to have to include inside the change function.
    Then you would want to place those other parts of your code in to their own functions, so that they can also be called from then change function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. That's what I did, and it worked just fine.

  6. #6
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    associated problem

    UPDATE:

    Ok, so that does work. I can get the changed value and use it by calling other functions. However, what I'm working on still isn't working. I think it might be a different problem. If anyone is willing to assist and is up for the challenge, I would be very appreciative.

    I'm using the Google JS API to create map analytics with a heatmap layer, and my data is stored in a local JSON file. There are various options for users to change the data in the map, so I'm trying to get radio buttons to switch out all of the map data to a different section of the JSON file. Here's an image to help you visualize: http://codeswallow.com/map.png

    Code:
    function loadNewMapData(){
      //remove data from arrays
      locationLats = [];
      locationLngs = [];
      locationMarkers = [];
    
      console.log(currentMapID);
    
      var locationStoreLocation = new google.maps.LatLng(jsonData.Maps.Locations[0][currentMapID].Store.Latitude, jsonData.Maps.Locations[0][currentMapID].Store.Longitude);
    
      //insert new data
      for(var i = 0; i < jsonData.Maps.Locations[0][currentMapID][whichMap].length; i++){
        locationLats.push(parseFloat(jsonData.Maps.Locations[0][currentMapID][whichMap][i].Latitude));
        locationLngs.push(parseFloat(jsonData.Maps.Locations[0][currentMapID][whichMap][i].Longitude));
        locationMarkers.push(new google.maps.LatLng(locationLats[i], locationLngs[i]));
      }
      initialize();
    }//end loadNewMapData()
    
    //Radio Btns
    //if change, get new value
    $jq('.map-radio').change(function(){
      //if val != all, run map with that ID to get that specific JSON data
      if($jq('input[name=choose-map-location]:checked').val() != 'all'){
        //change value depending on radio btn value
        currentMapID = $jq('input[name=choose-map-location]:checked').val();
    
        //Choose Map Btns
          //auto load views data
          whichMap = "Views";
          loadNewMapData();
    
          $jq('.choose-map-group').change(function(){
            if($jq('input[name=choose-map]:checked').val()=='views'){
              whichMap = "Views";
              loadNewMapData();
            } else if($jq('input[name=choose-map]:checked').val()=='clicks') {
              whichMap = "Clicks";
              loadNewMapData();
            }
          });
      }//end if != 'all'
    })
    .change();
    
    function initialize(){
      var mapOptions = {
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: locationStoreLocation
      };
      locationMap = new google.maps.Map(document.getElementById("locationMap"), mapOptions);
      locationPointArray = new google.maps.MVCArray(locationMarkers);
      heatmap = new google.maps.visualization.HeatmapLayer({
        data: locationPointArray
      });
      heatmap.setMap(locationMap);
      heatmap.setOptions({
        opacity: .5
      });
    
      var i = 0;
      var latlngbounds = new google.maps.LatLngBounds();
      for (var i; i<locationMarkers.length; i++){
        latlngbounds.extend(locationMarkers[i]);
      }
      locationMap.fitBounds(latlngbounds);
    }//end initialize()
    Basically, currentMapID gets the value of the selected radio button, which corresponds to keys in the JSON file. Upon load, the first radio button is automatically selected, and the map loads correctly. When I try to switch to a different radio button, though, I get "Cannot read property 'Store' of undefined" in my browser's console. I think that means that the part in green above is what isn't working. The console.log does return the changed radio button value. My guess is that it either isn't working with the JSON file (JSONLint says it's valid) or the map just isn't being initialized again.

    Again, any help would be very appreciated. I'm new to programming, so I'm really stuck on this. Let me know if you need any more info or code to assist. Thanks for taking a look.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •