jquerymapquest

Getting html DOM element value in MapQuest Map click event


I am using MapQuest.Js to show map. When user clicks on the map i want to get latitude and longitude and also a value of the radio which is DOM element.

<link type=\"text/css\" rel=\"stylesheet\" href=\"https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css\"/>

<input name="ismarked" type="radio" value="Yes" checked="checked"> Yes
<input name="ismarked" type="radio" value="No"> No
<div id="mapcontainer" name="mapcontainer" class="w-100" style="height:700px">
  <div id="map" name="map" class="w-100 h-100"></div>    
</div>

JavaScript

$(function () {
    var _map;

    $.getScript("https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js", function () {
        renderMap();
    });

    function renderMap() {

        var mapdiv = $("#map")[0];

        L.mapquest.key = 'KEY';

        var myRenderer = L.canvas({ padding: 0.5 });

        _map = L.mapquest.map(mapdiv, {
            center: [35, -84],
            layers: L.mapquest.tileLayer('hybrid'),
            zoom: 4,
            renderer: myRenderer
        }).on('click', function (e) {
            $("#radiovalue").val($("input[name='ismarked']").val());
            $("#latlong").val(e.latlng.lat+","+e.latlng.lng);
        });
    }
});

ISSUE
In click event of the map i am getting correct latitude and longitude value, however radio value is always returns "Yes" even i selected "No".


Solution

  • The problem is $("input[name='ismarked']").val() will always return the value of the first radio

    You want the checked one so add :checked selector to it

    $("#radiovalue").val($("input[name='ismarked']:checked").val());