Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2022, 20:28
Новичок на форуме
Отправить личное сообщение для accountnujen Посмотреть профиль Найти все сообщения от accountnujen
 
Регистрация: 23.01.2022
Сообщений: 6

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

https://jsfiddle.net/b5xf1pdg/1/
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2022, 20:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,984

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>
Ответить с цитированием
  #3 (permalink)  
Старый 24.01.2022, 02:50
Новичок на форуме
Отправить личное сообщение для accountnujen Посмотреть профиль Найти все сообщения от accountnujen
 
Регистрация: 23.01.2022
Сообщений: 6

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

Хотел спросить. У меня идёт formdata. Я сделал вот так:
body: new FormData(target.form)

оно как бы работает, но я не уверен в .form. Это новое или старое обращение к форме? Просто перед тем как задать вопрос - пытался сам решить задачу и через submitter можно было это сделать, однако в спецификации указано, что это свежее нововведение (2019 года), поэтому я не стал его брать. Подскажите, .form можно использовать?
Ответить с цитированием
  #4 (permalink)  
Старый 24.01.2022, 07:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,984

Сообщение от accountnujen
единственный вариант - прослушивать все нажатия и выбирать только нужный.
нет вариантов куча.
ваши тоже рабочие, если их допилить.
в данном случае обработчик клика повешен на форму и Function Expression, тогда форма будет в этой функции this.
body: new FormData(this)

target.form это в js издревле))), да можно использовать, если target элемент формы.
Ответить с цитированием
  #5 (permalink)  
Старый 24.01.2022, 07:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,984

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 13:25
как с помощью jquery отсылать без перезагрузки... serhanters jQuery 11 22.07.2011 20:17
Как добавить комментарии без перезагрузки страницы dimaan777 Events/DOM/Window 5 21.11.2010 01:11
Как можно сделать подгрузку и смену изображения без перезагрузки страницы с другого Евгений Болгов jQuery 11 21.10.2010 17:18
Подскажите как в VLC плеере переключать канал без перезагрузки страницы? mff Events/DOM/Window 0 10.05.2010 16:28