Форум

accountnujen · #1 (**permalink**) 23.01.2022, 21:28

принцип такой:
одна кнопка применяет значение, а вторая отправляет (для примера просто отображает alert).
Сейчас отрабатывает только применение, потому что оно прописано в параметрах формы. Я попытался указать onsubmit непосредственно в button, однако у меня срабатывает перезагрузка страницы.
Как реализовать без перезагрузки?

https://jsfiddle.net/b5xf1pdg/1/

рони · #2 (**permalink**) 23.01.2022, 21:56

accountnujen,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box {
            background: black;
            width: 50px;
            height: 50px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const style = document.querySelector(".box").style;
            document.querySelector("form").addEventListener("click", function({
                target
            }) {
                let color = this.color.value;
                if (target.closest(".allow")) style.backgroundColor = color;
                if (target.closest(".send")) alert(color);
            })
        });
    </script>
</head>

<body>
    <form>
        <select name="color" id="color">
    <option value="blue">blue</option>
    <option value="green">green</option>
</select>
        <div class="box"></div>
        <button type="button" class="allow">allow</button>
        <button type="button" class="send">send</button>
    </form>
</body>

</html>

accountnujen · #3 (**permalink**) 24.01.2022, 03:50

рони,
удивлён. не думал, что единственный вариант - прослушивать все нажатия и выбирать только нужный.

Хотел спросить. У меня идёт formdata. Я сделал вот так:

body: new FormData(target.form)

оно как бы работает, но я не уверен в .form. Это новое или старое обращение к форме? Просто перед тем как задать вопрос - пытался сам решить задачу и через submitter можно было это сделать, однако в спецификации указано, что это свежее нововведение (2019 года), поэтому я не стал его брать. Подскажите, .form можно использовать?

рони · #4 (**permalink**) 24.01.2022, 08:03

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

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

нет вариантов куча.
ваши тоже рабочие, если их допилить.
в данном случае обработчик клика повешен на форму и Function Expression, тогда форма будет в этой функции this.

body: new FormData(this)

target.form это в js издревле))), да можно использовать, если target элемент формы.

рони · #5 (**permalink**) 24.01.2022, 08:35

accountnujen,
как пример одного из вариантов...

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box {
            background: black;
            width: 50px;
            height: 50px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const style = document.querySelector(".box").style,
            form = document.querySelector("form"),
            btn = document.querySelector("[type='button']");
            btn.addEventListener("click", function() {
               let color = this.form.color.value;
               style.backgroundColor = color;
            })
            form.addEventListener("submit", function(event) {
                event.preventDefault();
                alert(this.color.value);
            })
        });
    </script>
</head>
<body>
    <form >
        <select name="color" id="color">
    <option value="blue">blue</option>
    <option value="green">green</option>
</select>
        <div class="box"></div>
        <button type="button">allow</button>
        <button>send</button>
    </form>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript