Обновление отдельного блока без перезагрузки страницы
 

Добрый день, уважаемые форумчане! :help:

Что есть сейчас?

На странице есть блок карты (для создания и работы с ним использую leaflet.js + Leaflet Routing Machine для построения маршрутов)
Блок карты:

<div id="map" style="width: 100%; height: 500px"></div>

Маршрут отрисовывается при помощи Leaflet Routing Machine так:

L.Routing.control({waypoints: markers}).addTo(map);

, где markers - массив, содержащий координаты маркеров для построения маршрута

Чего я хочу?

В идеале все должно работать так:
1. В поле формы вводятся координаты маркера
2. По кнопке submit формы координаты записываются в массив markers
3. По маркерам отрисовывается маршрут

Что я сделал для того, чтобы достичь своего идеала?)
1. Сотворил это:

<script>

        //Объявляем массив markers для хранения точек маршрута
        var markers = [];

        //Отрисовка маршрута по точкам
        L.Routing.control({
            waypoints: markers
        }).addTo(map);

        //Функция для добавления нового элемента в массив markers
        function LRMAdd(coord){
            markers.push(L.latLng(coord));
            $('#map').html();
            }
        
        function getValue(coord){
            return document.getElementById(coord).value;
            }

</script>

2. Форма для добавления точки маршрута:

<form id="form">
<input type="text" id="input_coord">
<input type="submit" onsubmit="LRMAdd(getValue("input_coord"))" value="Добавить"></form>

И ничего! Подозреваю, что проблема в том, что при нажатии кнопки "Добавить" обновляется страница целиком, и markers обнуляется каждый раз. Предполагаю, что проблему можно решить, сделав возможность обновления отдельного блока с картой без перезагрузки всей страницы. Однако я не понимаю, как это сделать. Помогите, пожалуйста!

BellaChao,
Попробуйте:
form переделать в div
type вместо submit - button
Вместо onsubmit - onclick

BellaChao, вот почитай статейку
https://monsterlessons.com/project/l...y-v-javascript

Там немного про другое... Но принцип нужно использовать тот же. ;)

ksa,
Форма - это для отправки данных на сервер. Здесь отправка не нужна. Так зачем сначала делать форму, а потом бороться с ее функциональностью?

Так отправка не обязательна.
Никакой "борьбы" нет, сплошное использование возможностей. :)

Но каждый волен выбирать свой путь...