CODEWITHSUNDEEP
javascriptmapbox
zultz
zultz

Reputation: 226

Transfer the value of input field value to another input field

I have this code where you can click on a certain part of the map and the longitude and latitude will be shown in an input field. I was trying to automatically pass the value of the input field to another input field using

$(document).ready(function () {
            $('#lat').change(function () {
                $('#lati').val($('#lat').val());
            });
        });

but it's not passing the value.

Here is the code (I am using Mapbox API):

<html>
<head>
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 10%;
            bottom: 0;
            width: 60%;
            height: 60%;
        }
    </style>
</head>

<body>
    <input id='lat' name='lat' type='text' /> lat
    <input id='lng' name='lng' type='text' /> long
    <br><br>
    <input id='lati' name='lati' type='text' /> lati
    <input id='lngi' name='lngi' type='text' /> longi

    <div id="map"></div>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-122.486052, 37.830348],
            zoom: 14
        })

        map.on('style.load', function () {
            map.on('click', function (e) {
                var lat = e.lngLat.lat;
                var long = e.lngLat.lng;
                document.getElementById("lat").value = e.lngLat.lat;
                document.getElementById("lng").value = e.lngLat.lng;
            }).addTo(map);;
        });

        $(document).ready(function () {
            $('#lat').change(function () {
                $('#lati').val($('#lat').val());
            });
        });
    </script>

</body>
</html>

Thanks!

Upvotes: 1

Views: 930

Answers (2)

ashen madusanka
ashen madusanka

Reputation: 742

since the value change programmatically. u have to trigger the change event manually this question

        $(document).ready(function () {
            $('#lat').change(function () {
                $('#lati').val($('#lat').val());
            });
            
            
        $('#lng').change(function () {
            $('#lngi').val($('#lng').val());
        });
            
            
        mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-122.486052, 37.830348],
            zoom: 14
        })

        map.on('style.load', function () {
            map.on('click', function (e) {
                var lat = e.lngLat.lat;
                var long = e.lngLat.lng;
                document.getElementById("lat").value = e.lngLat.lat;
                 $('#lat').trigger('change');
                document.getElementById("lng").value = e.lngLat.lng;
                 $('#lng').trigger('change');
            });
        });
        });
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 30%;
            bottom: 0;
            width: 60%;
            height: 60%;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />

</head>

<body>
    <input id='lat' name='lat' type='text' /> lat
    <input id='lng' name='lng' type='text' /> long
    
    <input id='lati' name='lati' type='text' /> lati
    <input id='lngi' name='lngi' type='text' /> longi

    <div id="map"></div>



</body>
</html>

Upvotes: 2

Ekhlas Mridha
Ekhlas Mridha

Reputation: 169

I think you can just do this, by setting value in other input field at the same time.

map.on('style.load', function () {
        map.on('click', function (e) {
            var lat = e.lngLat.lat;
            var long = e.lngLat.lng;
            document.getElementById("lat").value = e.lngLat.lat;
            document.getElementById("lng").value = e.lngLat.lng;
            
            //setting value to another input field
            document.getElementById("lati").value = e.lngLat.lat;
        }).addTo(map);;
    });

If it's not the solution you are looking for then please update your question.

Upvotes: 0

Related Questions