Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   заставить этот скрипт выполнить все формы (https://javascript.ru/forum/dom-window/72989-zastavit-ehtot-skript-vypolnit-vse-formy.html)

antonpavlov1982 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 12.03.2018 11:57

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

antonpavlov1982 12.03.2018 12:04

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

laimas 12.03.2018 12:16

Цитата:

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

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

Dilettante_Pro 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 13.03.2018 09:21

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

Dilettante_Pro 13.03.2018 10:26

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

laimas 13.03.2018 10:38

Цитата:

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

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

Dilettante_Pro 13.03.2018 10:48

laimas,
Цитата:

Сообщение от laimas
А зачем тогда формы?

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

laimas 13.03.2018 12:17

Цитата:

Сообщение от Dilettante_Pro
А вот это загадка.

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

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

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


Часовой пояс GMT +3, время: 02:16.