RealAdmin

Событие onclick в javascript и jquery на примерах

Событие onclick в javascript и jquery на примерах
Комментарии: 61

Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами и скрыает некоторые тонкости. Событие происходит при клике по элементу левой кнопкой мыши. Стоит заметить, что при клике происходит так же ещё два события, а именно нажатие на кнопку мыши и её отжатие.

событие onclick в javascript

Все примеры будем рассматривать на теге «a» (ссылку). Пусть это не смущает, с другими тегами будет работать аналогичным образом.

Самый простой способ повесить событие onclick, это прописать его непосредственно в html теге:

<a href="#" onclick="alert('Пример 1 сработал'); return false;">Пример 1</a>

Код в действии:

Нажмите на ссылку: Пример 1

В примере при нажатии на ссылку появляется всплывающее окно с сообщением. Дополнительно к действию мы прописали «return false;». Это требуется чтобы предотвратить переход по ссылке после срабатывания события «onclick». В других элементах (где нет аттрибута href) это можно опустить.

Рассмотренный вариант можно использовать если событие содержит мало кода. Иначе, следует обратить внимание на другие способы.

Выносим код события onclick в javascript-функцию

Следующий способ хорош тем, что мы отделяем javascript-код от html тегов. В теге прописываем название функции, а саму функцию выносим в отдельный блок:

<script>
function ChangeColor(Element) {
	if (Element.style.color == 'green') Element.style.color = 'red';
	else Element.style.color = 'green';
	return false;
}
</script>

<a href="#" style="color: green;" onclick="return ChangeColor(this);">Изменить цвет</a>

Код в действии:

Нажмите на ссылку: Изменить цвет

Но и здесь всё не идеально. Что делать, если событие требуется повесить на все ссылыки сайта, а их сотни? Кажется что это трудно, а на деле — меньше десяти строк кода. Задача решается с помощью селекторов. В примере опять будем производить действия с тегом «a», но ничего не мешает использовать вместо ссылки «img» или «div».

Вешаем onclick на элемент из javascript-кода

Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.

<script>
//дожидаемся полной загрузки страницы
window.onload = function () {

    //получаем идентификатор элемента
    var a = document.getElementById('switch');
    
    //вешаем на него событие
    a.onclick = function() {
        //производим какие-то действия
        if (this.innerHTML=='On') this.innerHTML = 'Off';
        else this.innerHTML = 'On';
        //предотвращаем переход по ссылке href
        return false;
    }
}
</script>

<a id="switch" href="#">On</a>

Код в действии:

Нажмите на ссылку: On

Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5, их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие:

//выбираем нужные элементы
var a = document.querySelectorAll('.link');
    
//перебираем все найденные элементы и вешаем на них события
[].forEach.call( a, function(el) {
    //вешаем событие
    el.onclick = function(e) {
        //производим действия
    }
});

Применяем jQuery

Если в проекте используется библиотека jQuery, то можно ещё упростить код. Рассмотрим два самых распространенных способа:

$(function(){
    $(".link").click(function() {
        //действия
    });
});

И ещё один вариант, который идентичен предыдущему.

$(function(){
    $(".link").on("click", function(){
        //действия
    });
});

С обработчиком «on()» лучше ознакомиться отдельно, так как он несет в себе много полезного функционала. Например, возможность указать через пробел несколько событий к которым будет применяться действие, делегировать события на дочерние элементы, а так же он полезен если необходимо повесить событие на динамически добавляемые элементы, которых изначально нет на странице.

Темы:
Похожие публикации — 6
Комментарии —
  1. Александра
    Александра18 ноября 2015, 18:36#
    Просто супер статья, спасибо!
    1. Andy Si20 ноября 2015, 22:08#
      спасибо за положительный отзыв
      1. Сергей
        Сергей20 августа 2016, 18:43#
        Статья и правда супер!!!
      2. Александр
        Александр08 декабря 2015, 12:54#
        Статья замечательная! На свой вопрос, ответ получил.
        1. tasman992
          tasman99215 декабря 2015, 23:42#
          Можем ли мы передать функции значение не только this?
          1. Egor
            Egor16 декабря 2015, 11:09#
            а я час просидел нечего понять не мог, не работал $(#blabla),click(blala)
            не работал bind. а эллемент из подгружаемого шаблона,,,, как так!!! думал я, что за фигня такая. Оказывается через .on() нужно и ровно после innrhtml or append. Но все же вопрос. может лучше в html указывать onclick=«blabla()»??
            Согласен что можено повесит событие по классу, но блин читая хтмл не совсем ясно кто что где вызывается и какую далее функцию смотреть, только по id а там искать в js где и как этот id используется. вот такой у меня сложный вопрос.
            1. Andy Si16 декабря 2015, 11:15#
              bind это устаревший метод, ему на замену пришел on. Обычно берется, создается один файл script.js, подключается ко всем страницам и там пишутся все скрипты. Пихать их в код самого сайта — плохой тон. А чтобы всё быстро находить — пишите подробные комментарии к каждому скрипту.
            2. Vladimir
              Vladimir13 апреля 2017, 22:37(был изменён)#
              Можно ли осуществить такое?
              Есть ссылка на странице1, пользователь кликает по ней в фоновом режиме открывается страница2, этой ссылки, а на странице1 на месте ссылки появляется другой текст.
              1. Andy Si14 апреля 2017, 09:13#
                Браузеры не поддерживают открытие страниц в фоновом режиме. Если имеется ввиду, в новой вкладке, то да — так можно.
                1. Владимир
                  Владимир14 апреля 2017, 17:57#
                  можно привести пример
                  1. Andy Si17 апреля 2017, 08:52#
                    Вообще в статье уже есть примеры. Что-то такое:
                    var a = document.getElementById('switch');
                        a.onclick = function() {
                            window.open('http://example.com');
                    	this.innerHTML = 'другой текст';
                            return false;
                        }
              2. Trizna
                Trizna07 июля 2017, 02:29#
                Друзья, как такое может быть?

                Делаю скрипт и одна и та же функция вот так работает:
                <div onclick="Func('Blabla');">Click</div>
                и так тоже работает:
                <span onclick="Func('Blabla');">Click</span>
                Но вот так эта же функция НЕ работет:
                <img src="img.png" onclick="Func('Blabla');" />
                и так тоже НЕ работает:
                <input type="button onclick="Func('Blabla');" value="Click" />
                Как такое может быть?
                1. Andy Si07 июля 2017, 13:07#
                  В последнем примере явно ошибка в синтаксисе. onclick занесено в атрибут type. С картинкой — вроде всё в порядке, но есть ощущение что ошибка в том что сначала идёт картинка, а только потом объявляется функция. Или что-то перебивает событие onclick. Необходимо смотреть непосредственно на сайте.
                2. Евгений
                  Евгений08 июля 2017, 09:39(был изменён)#
                  Скажите, а получится данный способ использовать, чтобы назначить событие клик по определенной кнопке, с целью передачи этого события в Яндекс.Метрику и Google Analitycs?
                  Я совсем не знаю javascript, но насколько понимаю, для этого у кнопки должен быть указан id? Если у кнопки нет id получится ли как-то назначить событие для определенных кнопок?

                  Вкратце, объясню зачем мне это: я интернет-маркетолог и у меня есть доступ только к админке modx, в которой я не могу назначить id для кнопок, но теоретически мог бы использовать этот код и вставить его в другую часть кода страницы, чтобы передавать данные о клике на кнопку «Оставить заявку» в систему Яндекс.Метрики для анализа источников, с которых пришли посетители оставившие заявки на сайте.
                  1. Andy Si09 июля 2017, 10:59#
                    Можно без id настроить. Необходимо изучить что такое jquery селекторы, найти уникальный селектор этой кнопки и повесить на него то же событие:
                    $("селектор кнопки").on("click", function(){
                       // отправка целей
                    });
                    Но есть вероятность что это событие уже где-то определено, и в нём прописано return false. Тогда второе подобное событие может не сработать и потребуется придумывать другие способы.
                  2. Павел Иванов
                    Павел Иванов01 апреля 2018, 01:22#
                    Я чуть не обделался от привидения ахахаха…
                    1. Andy Si01 апреля 2018, 21:56#
                      С первым апреля :)
                      1. Нина
                        Нина09 апреля 2018, 15:35#
                        А как вызвать привидение? Оно такое классное…
                        1. Andy Si09 апреля 2018, 16:43#
                          Само прилетает когда захочет попугать :)
                    2. Дед
                      Дед02 июня 2018, 17:37#
                      Добрый день, уважаемый.
                      Сколько не бьюсь, не могу решить такую проблему: первых два onClick работают нормально — замещая друг друга. Как сделать, что бы все работали также? Для примера привожу выбор из 4, на самом деле мне нужно 10 кнопок. Неужели, нужно прописывать на закрытие все 10?

                      <div style="border:5px solid #000;width:600px;background-color: #fff;margin:5px auto;padding:5px;">
                          <div style="margin:5px;text-align:center;">
                       <input type="submit" name="" value="1111111" onClick="if (document.getElementById('obm1').style.display=='none') {document.getElementById('obm1').style.display='block'; document.getElementById('obm2').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm1').style.display='none';}">   
                       <input type="submit" name="" value="2222222" onClick="if (document.getElementById('obm2').style.display=='none') {document.getElementById('obm2').style.display='block'; document.getElementById('obm1').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm2').style.display='none';}">  
                       <input type="submit" name="" value="3333333" onClick="if (document.getElementById('obm3').style.display=='none') {document.getElementById('obm3').style.display='block'; document.getElementById('obm1').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm3').style.display='none';}">
                       <input type="submit" name="" value="4444444" onClick="if (document.getElementById('obm4').style.display=='none') {document.getElementById('obm4').style.display='block'; document.getElementById('obm1').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm4').style.display='none';}">
                          </div>
                              <!------ obm1 ------>
                              <div id="obm1" style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#ccf;">111111111111111</div>
                              <!------ /// obm1 ------><!------ obm2 ------>
                              <div id="obm2"  style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#cfc;">22222222222222222222</div>
                              <!------ /// obm2 ------><!------ obm3 ------>
                              <div id="obm3" style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#fcc;">3333333333333333333333333</div>
                              <!------ /// obm3 ------><!------ obm4 ------>
                              <div id="obm4"  style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#ffc;">4444444444444444444444444444444444444444444</div>
                              <!------ /// obm4 ------>
                      </div>
                      С уважением, Дед.
                      1. Andy Si02 июня 2018, 18:29#
                        Добрый день.
                        Совет, не пиши стили в атрибуте style. Для стилей давно придумали такую замечательную вещь, как CSS.

                        Второй совет, лучше использовать для твоих целей jquery библиотеку, тогда весь js код уместится строчки в 4. Пример, как это работает, есть в статье.

                        Но если нужно всё же на чистом javascript, то лучше всем DIV-ам прсвоить один и тот же класс и перед display=block сначала скрывай все элементы с этим классом, а потом уже показывать нужный:
                        var myDiv = document.querySelectorAll('.myDiv');
                        myDiv.style.display='none';
                        document.getElementById('obm1').style.display='block';
                        1. Дед
                          Дед02 июня 2018, 22:00#
                          Не совсем понял с общим классом всем DIV-ам, а как же потом выбирать нужный? Если можно напишите все в моем примере, что бы все таки понял.
                          Стили в атрибуте style написал только для примера, они прописаны в файле .css
                          Будьте здоровы.
                          1. Andy Si03 июня 2018, 09:23#
                            Я в примере написал onClick для первой кнопки. Нужный выбирается затем так же по ID. Остальные аналогично. Если не понятно, то лучше сначала почитай какой-нибудь самоучитель по Jquery, сильно поможет в разработке.
                        2. varnak
                          varnak20 июня 2018, 17:21(был изменён)#
                          не туда
                        3. varnak
                          varnak20 июня 2018, 17:22#
                          статья помогла спс.
                          дайте код приведения (или сслыку)
                          1. Andy Si22 июня 2018, 11:27#
                            я не верю в привидения
                            1. Vladimir
                              Vladimir04 августа 2018, 00:50#
                              еба я пересрался.
                              1. Михаэль Вейк
                                Михаэль Вейк25 февраля 2019, 16:31#
                                Привидений не существует. Это лишь иллюзия…
                          2. Михаэль Вейк
                            Михаэль Вейк25 февраля 2019, 16:30#
                            Отличная статья! Спасибо!
                            1. Макс
                              Макс13 августа 2019, 18:55#
                              В этом коде ошибка!:
                              //выбираем нужные элементы
                                  var a = document.querySelectorAll('.link');
                                  
                                  //перебираем все найденные элементы и вешаем на них события
                                  [].forEach.call( a, function(el) {
                              	       //вешаем событие
                              		    el.click = function(e) {
                              		    	//производим действия
                              			}
                              	});
                              
                              Так он не будет работать!
                              Работакть будет так:
                              //выбираем нужные элементы
                                  var a = document.querySelectorAll('.link');
                                  
                                  //перебираем все найденные элементы и вешаем на них события
                                  [].forEach.call( a, function(el) {
                              	       //вешаем событие
                              		    el.onclick = function(e) {
                              		    	//производим действия
                              			}
                              	});
                              
                              1. Andy Si13 августа 2019, 20:11#
                                Да, точно… спасибо, поправил.
                                1. великий Господин
                                  великий Господин14 августа 2020, 16:05#
                                  опечатка по фрейду
                                  вешаем событие
                                  el.addEventListener('click', function(e) {
                                  //производим действия
                                  });
                              2. Виталий
                                Виталий27 мая 2020, 11:41#
                                Подскажите пожалуйста, как сделать так чтобы это событие срабатывало один раз в сутки?

                                window.onload = function() {
                                    var button = document.getElementById('action');
                                    button.onclick = function() {
                                        console.log('asdf')
                                    }
                                    button.click();
                                }
                                1. Andy Si27 мая 2020, 14:41#
                                  Готовый код не помогу написать, нет времени. Ищи документацию по cookies. Тебе надо будет перед выполнением этого кода проверять, есть ли в cookies твоя переменная, если нет, то выполняем код и записываем переменную на 24 часа. Иначе просто выходим.
                                2. Rodion
                                  Rodion01 июня 2020, 17:16#
                                  Как запустить «скрипт css» то есть у меня есть анимация на css, которая плавно проявляется. Мне надо чтобы по нажатию кнопки с классом navbar-toggler начиналась анимация, и после повторного нажатия заканчивалась… Какой код для этого подойдет?
                                  1. Andy Si01 июня 2020, 17:34#
                                    css анимацию привязываете к какому-то классу и при нажатии на кнопку добавляете/удаляете этот класс к нужному элементу.

                                    Примерно, так:
                                    $('.navbar-toggler').on('click', function(){
                                    $('.selector-element').toggleClass('animation-class');
                                    });
                                    где, .selector-element это селектор элемента, на который навешивается анимация, а animation-class — класс, которому прописана css анимация.
                                    1. Rodion
                                      Rodion01 июня 2020, 18:07#
                                      Спасибо большое очень помогло!
                                  2. Лиана
                                    Лиана26 сентября 2020, 08:05(был изменён)#
                                    Добрый день! Подскажите пожалуйста, как можно сделать: Есть несколько кнопок, у них одинаковый класс и id, при первом клике на одну из этих кнопок нужно скрыть остальные кнопки и блоки с контентом в которых они находятся, при повторном клике показать все блоки с кнопками. Проблема возникла со вторым кликом. Значение класса active = display:none;

                                    $(document).ready(function(){
                                    	$('#sam_id .sam').on('click', function() {
                                    	  if (!$('#sam_id .sam').hasClass('active')) { // если класса нет
                                    	    $('#sam_id .sam').addClass('active'); // добавляем класс всем кнопкам
                                    	    $(this).removeClass('active'); // убираем класс у выбранного элемента
                                    	    console.log('First click'); // код для первого клика
                                    	  } else { // если есть
                                    	    $('#sam_id .sam').removeClass('active'); // убираем класс у всех
                                    	    console.log('Second click'); // код для второго клика
                                    	    return false;
                                    	  }
                                    	});
                                    });
                                    1. Лиана
                                      Лиана28 сентября 2020, 20:58(был изменён)#
                                      Если кому-то понадобится, вот моё решение
                                      $(document).ready(function(){
                                      	$('#sam_id .sam').on('click', function() {
                                      	  if (!$('#sam_id .sam').hasClass('active')) { // если класса нет
                                      	    $('#sam_id .sam').addClass('active'); // добавляем класс всем кнопкам
                                      	    $(this).removeClass('active'); // убираем класс у выбранного элемента
                                      	  } else { // если есть
                                      	    $(this).removeClass('active'); // убираем класс
                                      	    $('#sam_id .sam').removeClass('active');
                                      	  }
                                      	  return false;
                                      	});
                                      }); 
                                      1. Andy Si28 сентября 2020, 22:03#
                                        Хорошее решение. Прошу прощения что не смог помочь, было много дел.
                                    2. Дмитрий
                                      Дмитрий06 октября 2020, 11:27#
                                      Вы пишите «Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.»

                                      А можно рабочий пример для двух пар ON/OFF и ON/OFF
                                      Т.е. кликаю на первый ON и он меняется на OFF, кликаю на второй и уже меняется он с тем, что бы можно было увеличивать количество неограниченно.
                                      1. Andy Si06 октября 2020, 12:40#
                                        Измени в ссылках id=switch на class=switch и поменяй скрипт:
                                        window.onload = function () {
                                          document.querySelectorAll('.switch').forEach(el => { 
                                          el.onclick = function() {
                                                  //производим какие-то действия
                                                  if (this.innerHTML=='On') this.innerHTML = 'Off';
                                                  else this.innerHTML = 'On';
                                                  //предотвращаем переход по ссылке href
                                                  return false;
                                              };
                                          });
                                        }
                                        
                                        1. Дмитрий
                                          Дмитрий07 октября 2020, 15:33#
                                          К сожалению не работает.
                                          Выдает ошибку «Синтаксическая ошибка» символ 52
                                          на строчке document.querySelectorAll('.switch').forEach(el =>
                                          1. Andy Si07 октября 2020, 21:07#
                                            Все работает, проверял… ну может для старых браузеров так лучше написать:
                                            window.onload = function () {
                                              document.querySelectorAll('.switch').forEach(function(el) { 
                                                el.onclick = function() {
                                                      //производим какие-то действия
                                                      if (this.innerHTML=='On') this.innerHTML = 'Off';
                                                      else this.innerHTML = 'On';
                                                      //предотвращаем переход по ссылке href
                                                      return false;
                                                  };
                                              });
                                            }
                                            1. Дмитрий
                                              Дмитрий07 октября 2020, 22:12#
                                              Спасибо большое, оказывается все работает.
                                              Проверял в PHP Expert Editor оба варианта не работают.
                                              Проверил на сервере — оба варианта работают.
                                              Так, что извиняюсь за дезинформацию.
                                              Я, вообще то, хочу поставить на свой сайт систему лайков. Посмотрел в Интернете все, что мог найти по такому запросу.
                                              Везде делается упор на PHP и MYSQL, а это я и сам знаю. А вот часть javascript везде невнятно. Теперь на основе Вашего кода пойду дальше.
                                              Еще раз спасибо.
                                              P.S. А может подготовите статью про систему лайков, рассчитанную на таких как я, разбирающихся в PHP, но нулях в javascript?
                                              1. Andy Si07 октября 2020, 22:18#
                                                Сайты на чистом PHP давно не делают, поэтому это уже никому не нужно. Для движков и фреймворков есть готовые решения.
                                          2. Дмитрий
                                            Дмитрий15 октября 2020, 11:14(был изменён)#
                                            По Вашему совету сделал
                                            <a class="switch" href="#">On</a>
                                            ...
                                            <a class="switch" href="#">On</a>
                                            После return false; вставил
                                            <?php INSERT INTO ?>
                                            У каждого <a class… д.б. свой номер
                                            Вопрос.
                                            Как в <a class вставить этот номер, а затем донести его до INSERT INTO
                                            1. Andy Si15 октября 2020, 11:28#
                                              Такие вещи комментариями не объяснить. Найди подходящую статью по реализации чего-то похожего и разбери код. Тогда сможешь понять, как это в целом работает.
                                        2. сергей
                                          сергей07 октября 2020, 19:25#
                                          Добрый день. Помогите с таким вопросом:
                                          есть кнопка
                                          <button type="button" 
                                          	data-item-name="<? echo $name .' | '. $model;?>" 
                                          	data-item-price="<? echo $special ? $special : $price; ?>" 
                                          	class="b24-web-form-popup-btn-15" 
                                          	data-item-time="<?php if ($upc < 5) { echo $upc.' дня'; } else { echo $upc.' дней'; } ?>">Предзаказ</button>
                                          И есть форма
                                          $('.b24-web-form-popup-btn-15').on('click', function(){
                                          	// получаем дата-атрибуты
                                          	var itemName = $(this).attr('data-item-name');
                                          	var itemPrice = $(this).attr('data-item-price');
                                          	
                                          	(function(w,d,u,b){w['Bitrix24FormObject']=b;w[b] = w[b] || function(){arguments[0].ref=u;
                                          	(w[b].forms=w[b].forms||[]).push(arguments[0])};
                                          	if(w[b]['forms']) return;
                                          	var s=d.createElement('script');s.async=1;s.src=u+'?'+(1*new Date());
                                          	var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
                                          	})(window,document,'ссылка на внешний скрипт','b24form');
                                          	
                                          	b24form({
                                          		"id":"15",
                                          		"lang":"ru",
                                          		"sec":"код",
                                          		"type":"button",
                                          		"click":"",
                                            		"presets": {
                                              		"item_name": itemName,
                                              		"item_price": itemPrice
                                            		}
                                          	});
                                          });
                                          после первого клика на кнопку форма не открывается. только после 2-го. в чем может быть проблема?
                                          1. Andy Si07 октября 2020, 21:09(был изменён)#
                                            Проблема, скорее всего, в том что функция b24form проинициализироваться не успевает. Попробуй этот код вынести за пределы клика по кнопке:
                                            (function(w,d,u,b){w['Bitrix24FormObject']=b;w[b] = w[b] || function(){arguments[0].ref=u;
                                            	(w[b].forms=w[b].forms||[]).push(arguments[0])};
                                            	if(w[b]['forms']) return;
                                            	var s=d.createElement('script');s.async=1;s.src=u+'?'+(1*new Date());
                                            	var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
                                            	})(window,document,'ссылка на внешний скрипт','b24form');
                                            1. Сергей
                                              Сергей07 октября 2020, 23:43#
                                              Попробовал — не помогло. Но и работать не перестало)
                                              потестить
                                              1. Andy Si08 октября 2020, 10:27#
                                                Не знаю, это же фигня битрикса, лучше задать вопрос в их тех. поддержку. Ну либо костыльный вариант, там же в коде до клика можно вставить:
                                                b24form({"id":"1", "sec":"h6nkwx","type":"button"});
                                                В клике оставить как есть и она будет срабатывать сразу.
                                                1. сергей
                                                  сергей08 октября 2020, 12:35#
                                                  Если бы техподдержка реально помогала…
                                                  В хелпе есть статья о возможности передачи параметров в формы, указываются в
                                                  "presets": {
                                                      		"item_name": itemName,
                                                      		"item_price": itemPrice
                                                    		}
                                                  но она не подробно написана, мол для разъяснения обращайтесь к партнерам.
                                                  А кроме вышеперечисленного, проблема в том что формы на странице 2шт
                                          2. Елена
                                            Елена19 октября 2020, 22:42#
                                            Добрый день!
                                            Подскажите пожалуйста, как прописать.
                                            Есть 2 кнопки выбора товара
                                            <a href="" onclick="return false" id="Nabor-1" class="btn alCenter upp db">ВЫБРАТЬ НАБОР-1</a>
                                            <a href="" onclick="return false" id="Nabor-2" class="btn alCenter upp db">ВЫБРАТЬ НАБОР-2</a>
                                            
                                            И форма для отправки:
                                            <form method="post" id="mainform" class="big-form" action="mail.php">
                                            
                                            <div class="input-block"><input required type="text" name="name" placeholder="Ваше имя" class="inputbox" required></div>
                                            <div class="input-block"><input required type="text" name="phone" placeholder="Ваш номер" class="inputbox numbox phone-mask" required></div>
                                            <div class="input-block"><input required type="text" name="comment" placeholder="Набор № " class="inputbox" required></div>
                                            <button type="submit" class="btn2 w100">ПОДТВЕРДИТЬ ЗАКАЗ</button>
                                            </form>
                                            
                                            Как прописать, чтобы при выборе товара заполнялось автоматически поле в форме name=«comment»?
                                            1. Andy Si20 октября 2020, 09:21(был изменён)#
                                              Добрый… Полю с комментом пропишите также какой-нибудь идентификатор, например id=numNabor и код тогда будет такой:
                                              document.getElementById('Nabor-1').onclick = function(e){
                                              	e.preventDefault();
                                              	document.getElementById('numNabor').value = 'Набор 1';
                                              }
                                              
                                              document.getElementById('Nabor-2').onclick = function(e){
                                              	e.preventDefault();
                                              	document.getElementById('numNabor').value = 'Набор 2';
                                              }
                                              1. Елена
                                                Елена20 октября 2020, 23:15#
                                                Спасибо!
                                                У меня все получилось!

                                                Но есть еще вопрос.
                                                На главной странице есть форма-1, при заполнении которой и нажав «ЗАКАЗАТЬ СО СКИДКОЙ» перебрасывается на другую страницу сайта, где есть приветствие и обращение по имени, которое заполнено в форме-1, еще одно предложение по выбору товара и форма-2, где автоматически должны повторяться имя и телефон из формы-1.
                                                Эти коды я «спионерила» с другого сайта. Там все работает. На моем нет. Не пойму почему.

                                                Форма-1
                                                <form method="post" id="first-form" class="big-form alCenter" action="мой сайт/order.html">
                                                
                                                <div class="input-block">
                                                <input type="text" class="inputbox" placeholder="Ваше имя" name="name" required></div>
                                                <div class="input-block">
                                                <input type="text" placeholder="Ваш номер" name="phone" class="numbox inputbox phone-mask" required></div>
                                                
                                                <button type="submit" class="btn2 db w100">ЗАКАЗАТЬ СО СКИДКОЙ</button></form>
                                                
                                                <script>
                                                var form1 = document.getElementById("first-form");
                                                form1.addEventListener("submit", function (event) {
                                                var name = form1.elements.name.value;
                                                var phone = form1.elements.phone.value;
                                                            
                                                var memory5 = window.location.search;
                                                            
                                                if (memory5) {
                                                var result_url = "мой сайт/order.html" + memory5 + "&name=" + name + "&phone=" + phone;
                                                } else {
                                                var result_url = "мой сайт/order.html?name=" + name + "&phone=" + phone;
                                                }
                                                form1.elements.result_url.value = result_url;
                                                });
                                                </script>
                                                
                                                Приветствие другой странице сайта:
                                                <h1 class="alCenter">
                                                <span id="visitorName"></span>, НАША КОМАНДА ВЫРАЖАЕТ БЛАГОДАРНОСТЬ
                                                <script>
                                                	var visitorName = document.getElementById("visitorName");
                                                    var url_string = window.location.href;
                                                    var url = new URL(url_string);
                                                    var paramValue = url.searchParams.get("name");
                                                    visitorName.innerHTML = paramValue;
                                                </script>
                                                </h1>
                                                
                                                Форма-2
                                                <form method="post" id="mainform" class="big-form" action="mail.php">
                                                
                                                <div class="input-block"><input required type="text" name="name" placeholder="Ваше имя" class="inputbox" required></div>
                                                <div class="input-block"><input required type="text" name="phone" placeholder="Ваш номер" class="inputbox numbox phone-mask" required></div>
                                                <div class="input-block"><input required type="text" id=numNabor name="comment" placeholder="Набор № " class="inputbox" required></div>
                                                <button type="submit" class="btn2 w100">ПОДТВЕРДИТЬ ЗАКАЗ</button>
                                                </form>
                                                
                                                1. Andy Si21 октября 2020, 09:27#
                                                  Скорее всего, проблема в этой строчке:
                                                  form1.elements.result_url.value = result_url;
                                                  Попробуй заменить на:
                                                  document.location.href = result_url;
                                                  1. Елена
                                                    Елена21 октября 2020, 19:05#
                                                    спасибо за ответ!
                                                    но не работает(
                                                    1. Andy Si22 октября 2020, 11:01#
                                                      Значит что-то ещё не так. Код вполне рабочий.
                                                      1. Елена
                                                        Елена22 октября 2020, 23:41#
                                                        А Вы можете предложить свой вариант?
                                                        1. Andy Si23 октября 2020, 09:12#
                                                          К сожалению, не смогу, нет времени на это.
                                            © REALADMIN.RU   2020 г.
                                            Страница сгенерирована: 0,2071 s | 6 mb.
                                            На каком уровне Вы играете в шахматы?
                                            О П Р О С