Форум

antonpavlov1982 · #1 (**permalink**) 12.03.2018, 11:55

привет, этот скрипт выполняет только первую форму, вторая не расчитуеться как заставить этот скрипт выполнить все формы

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script defer src="https://cdn.rawgit.com/chrisveness/geodesy/v1.1.2/latlon-spherical.js"></script>
    <script defer src="https://cdn.rawgit.com/chrisveness/geodesy/v1.1.2/dms.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',function () {
                 const lat1 = document.querySelector('#lat1').value;
                const lon1 = document.querySelector('#lon1').value;
                const lat2 = document.querySelector('#lat2').value;
                const lon2 = document.querySelector('#lon2').value;
                const p1 = new LatLon(Dms.parseDMS(lat1), Dms.parseDMS(lon1));
                const p2 = new LatLon(Dms.parseDMS(lat2), Dms.parseDMS(lon2));
                const dist = parseFloat(p1.distanceTo(p2).toPrecision(4));
                document.querySelector('#result-distance').textContent = dist;
            });</script>
        </head>
        <body>
    <form>Lat 1: <input type="text" name="lat1" id="lat1"  value="25.434345" >
        Lon 1: <input type="text" name="lon1" id="lon1" value="55.902223445" >
        Lat 2: <input type="text" name="lat2" id="lat2" value="25.8944324" >
        Lon 2: <input type="text" name="lon2" id="lon2" value="55.893445">
        <output id="result-distance"></output> metres
    </form>
<form>Lat 1: <input type="text" name="lat1" id="lat1"  value="25.434345" >
        Lon 1: <input type="text" name="lon1" id="lon1" value="55.902223445" >
        Lat 2: <input type="text" name="lat2" id="lat2" value="25.8944324" >
        Lon 2: <input type="text" name="lon2" id="lon2" value="55.893445">
        <output id="result-distance"></output> metres
    </form>
</body>
</html>

laimas · #2 (**permalink**) 12.03.2018, 11:57

antonpavlov1982,
а зачем две формы, а не одна?

antonpavlov1982 · #3 (**permalink**) 12.03.2018, 12:04

разное value в каждой форме, вытягиваю value из mysql и получаю много форм с разными value и одинаковыми id

laimas · #4 (**permalink**) 12.03.2018, 12:16

Сообщение от antonpavlov1982

разное value в каждой форме, вытягиваю value из mysql и получаю много форм с разными value и одинаковыми id

Это не повод плодить кучу форм, толку от них ведь ни какого. Отправить сразу все не получится, значит только по одной форме за один сеанс. Но можно очень много записей из базы данных обработать и обновить одной формой, нужно только правильно организовать именование ее полей.

Dilettante_Pro · #5 (**permalink**) 12.03.2018, 13:30

Есть подозрение, что это вовсе и не формы для отправки, а просто контейнеры для размещения данных...

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script defer src="https://cdn.rawgit.com/chrisveness/geodesy/v1.1.2/latlon-spherical.js"></script>
    <script defer src="https://cdn.rawgit.com/chrisveness/geodesy/v1.1.2/dms.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',function () {
             const forms = document.querySelectorAll('form');
             for(var i = 0; i < forms.length; i++) {
                 const lat1 = forms[i].querySelector('[name="lat1"]').value;
                const lon1 = forms[i].querySelector('[name="lon1"]').value;
                const lat2 = forms[i].querySelector('[name="lat2"]').value;
                const lon2 = forms[i].querySelector('[name="lon2"]').value;
            
                const p1 = new LatLon(Dms.parseDMS(lat1), Dms.parseDMS(lon1));
                const p2 = new LatLon(Dms.parseDMS(lat2), Dms.parseDMS(lon2));
                const dist = parseFloat(p1.distanceTo(p2).toPrecision(4));
                forms[i].querySelector('output').textContent = dist;
             } 
           });</script>
        </head>
        <body>
    <form>Lat 1: <input type="text" name="lat1" value="25.434345" >
        Lon 1: <input type="text" name="lon1" value="55.902223445" >
        Lat 2: <input type="text" name="lat2"  value="25.8944324" >
        Lon 2: <input type="text" name="lon2" value="55.893445">
        <output></output> metres
    </form>
    <form>Lat 1: <input type="text" name="lat1" value="25.434345" >
        Lon 1: <input type="text" name="lon1" value="55.902223445" >
        Lat 2: <input type="text" name="lat2"  value="25.8944324" >
        Lon 2: <input type="text" name="lon2" value="55.893445">
        <output ></output> metres
    </form>
</body>
</html>

laimas · #6 (**permalink**) 13.03.2018, 09:21

Dilettante_Pro,
и зачем это?

Dilettante_Pro · #7 (**permalink**) 13.03.2018, 10:26

laimas,
Насколько я понимаю, это просто расстояния между несколькими выбранными из базы парами пунктов.
А так - хз? ТС молчит.

laimas · #8 (**permalink**) 13.03.2018, 10:38

Сообщение от Dilettante_Pro

Насколько я понимаю, это просто расстояния между несколькими выбранными из базы парами пунктов

А зачем тогда формы?

Dilettante_Pro · #9 (**permalink**) 13.03.2018, 10:48

laimas,

Сообщение от laimas

А зачем тогда формы?

А вот это загадка. Я ответа не знаю.

laimas · #10 (**permalink**) 13.03.2018, 12:17

Сообщение от Dilettante_Pro

А вот это загадка.

Тем не менее знаем, что форма для обмена данными с сервером, а их почему-то две. Явно тут что-то не так.

Я не против, но если тут "костыль", то зачем же к нему добавлять второй?

Здесь рони также сделал медвежью услугу. А ведь тут уж точно такого быть не должно, ибо это результат просмотра мультиков вредных, а не книжек нужных. И эта"детская" ошибка плодится из года в год. Результат этой ошибки бывает и в виде дубликатов данных на странице, когда результат mysql_fetch_array() отдают шаблонизатору, и JS разработчики на форумах дают решения как это можно победить. Кто же спорит, что для JS это по силам, вопрос только в том зачем это? Они то все это используют, думая, что это и есть верное решение.

Форум

Справочник

Discord чат

Курсы javascript