Как с помощью метода POST получить координаты клика мышкой?

Question

Эмир

html , javascript

Как с помощью метода POST получить координаты клика мышкой?

Каким образом можно отправить координаты клика мышкой с использованием метода POST?

```html
<?php echo $_POST['search']; ?>

<form method="post" action="process_coords.php">
    <input type="text" name="X" id="X">
    <input type="text" name="Y" id="Y">
    <input type="text" name="search" id="geofeld" value="" style="display: none;">
    <input type="submit" name="do_save_matrics_level" class="" value="сохранить">
</form>

<script>
    var X = document.getElementById('X');
    var Y = document.getElementById('Y');

    function pos(e){
        X.value = e.pageX;
        Y.value = e.pageY;
    }

    addEventListener('click', pos, false);

    document.getElementById("geofeld").setAttribute("value", X.value + ',' + Y.value);    
</script>
```

Переформулированный вопрос: Как можно отправить координаты клика мышкой, используя метод POST, и убедиться, что они передаются на сервер?

4 января 2024 г. 8:48

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для отправки координат клика мышкой с использованием метода POST необходимо выполнить следующие шаги:

1. **Отслеживание клика и получение координат**: Вам необходимо отслеживать событие клика и получать координаты в момент, когда это событие происходит.

2. **Запись координат в элементы формы**: После отслеживания клика и получения координат, вы должны записать их в скрытые поля формы, чтобы они могли быть отправлены на сервер.

3. **Отправка данных формы**: После заполнения скрытых полей формы с координатами, необходимо отправить форму, чтобы данные были переданы на сервер через метод POST.

В вашем текущем коде есть проблема: вы пытаетесь сохранить значение координат в скрытый input только один раз и делаете это неправильно. Вам нужно переместить код, который устанавливает значение `geofeld`, внутрь функции `pos`.

Пример исправленного кода:

```html
<form method="post" action="process_coords.php">
    <input type="hidden" name="X" id="X">
    <input type="hidden" name="Y" id="Y">
    <input type="submit" id="save" name="do_save_matrics_level" class="" value="Сохранить">
</form>

<script>
    var X = document.getElementById('X');
    var Y = document.getElementById('Y');

    // Эта функция сработает при каждом клике по странице
    document.addEventListener('click', function(e) {
        // Получаем координаты клика относительно страницы
        X.value = e.pageX;
        Y.value = e.pageY;
    });

    // Находим элемент button или input(type=submit) и добавляем событие на отправку формы
    document.getElementById('save').addEventListener('click', function(event) {
        // Перед отправкой формы убедимся в наличии значений координат
        console.log('Координаты отправлены: X - ' + X.value + ', Y - ' + Y.value);
    });
</script>
```

В этом случае, когда пользователь кликает где-либо на странице, координаты клика будут записаны в скрытые текстовые поля. При нажатии кнопки "Сохранить" форма отправит эти значения на сервер методом POST, где вы сможете обработать их в файле PHP "process_coords.php".

Answer 2

Интересно к чему вы "вешаете" событие addEventListener('mousemove', pos, false); 
 
 Может нужно привязать событие к document?