javascriptjqueryyandex-api

Passing value in input


I use the Yandex API to count the distance and price of a trip from point A to B. You can try yourself by clicking 2 times in different parts of a map in my example: http://jsfiddle.net/EveGeen/wor9afo0/

ymaps.route([start, finish]).then(function (router) {
    var distance = Math.round(router.getLength() / 1000),
        message = '<span>Distance: ' + distance + 'km.</span><br/>' +
            '<span style="font-weight: bold; font-style: italic">Price: %sр.</span>';

    self._route = router.getPaths();

    self._route.options.set({ strokeWidth: 5, strokeColor: '0000ffff', opacity: 0.5 });
    self._map.geoObjects.add(self._route);
    self._start.properties.set('balloonContentBody', startBalloon + message.replace('%s', self.calculate(distance)));
    self._finish.properties.set('balloonContentBody', finishBalloon + message.replace('%s', self.calculate(distance)));

});

You will see that after A, B is set you can press on any of these letters and it will show distance and price.

How can I pass these two values (distance and price, lines 127-128) into two of my inputs at the top? I need only digits without text.


Solution

  • Add id to the input elements :

    <label>Distance:</label>
        <input id="dist" type="text" size="40" name="dist">
        <br>
        <label>Price:</label>
        <input id="price" type="text" size="40" name="price">
    

    and add these set their value in route event this way:

    document.getElementById("dist").value = distance; // distance here
    document.getElementById("price").value = self.calculate(distance);// price here
    

    You need to set the value of input elements in route event :

    ymaps.route([start, finish])
        .then(function (router) {
        var distance = Math.round(router.getLength() / 1000),
            message = '<span>Distance: ' + distance + 'km.</span><br/>' +
                '<span style="font-weight: bold; font-style: italic">Price: %sр.</span>';
    
        self._route = router.getPaths();
    
        self._route.options.set({
            strokeWidth: 5,
            strokeColor: '0000ffff',
            opacity: 0.5
        });
        self._map.geoObjects.add(self._route);
        self._start.properties.set('balloonContentBody', startBalloon + message.replace('%s', self.calculate(distance)));
        self._finish.properties.set('balloonContentBody', finishBalloon + message.replace('%s', self.calculate(distance)));
    
        document.getElementById("dist").value = distance; // distance here
        document.getElementById("price").value = self.calculate(distance);// price here
    
       });
    

    WORKING DEMO:

    UPDATED FIDDLE