0

Я хочу сделать так, чтобы при нажатии на кнопку "Заказать билет" [input type="submit"] воспроизводился звук. Проблема в том, что при нажатии на кнопку "Заказать билет" у меня просто обновляется страница и все, никакой звук не воспроизводится. Но если вызывать функцию через консоль в браузере (F12), то она работает как надо.

<input type="submit" form="order_form" value="Заказать билет" onclick="order();"></input>
<script type="text/javascript">
        function order()
        {
            var audio = new Audio();
            audio.src = 'src/sound.mp3';
            audio.autoplay = true;
            alert("Ваш заказ был принят, ждите звонка в дверь");

            return true;
        }
</script>

2 ответа 2

3

function playSound(sound) {
  var song = document.getElementById(sound);
  song.volume = 1;
  if (song.paused) {
    song.play();
  } else {
    song.pause();
  }
}
<audio id="sound"><source src="https://ozarnik.ru/uploads/files/2019-02/1549784984_dj-ozarnik-primite-zakaz.mp3" type="audio/mp3"></audio>
<input type="submit" value="Заказать билет" form="order_form" id="button" class="button" onclick="playSound('sound'); setTimeout('alert(\'Откладываем второе событие\')', 7000)"">

0

Проблема в обновлении страницы если я правильно понимаю, в таком случае всё более менее просто. Есть два варианта.

Отключить событие нажатия на кнопку по умолчанию:

<input type="submit" id="submitBtn" onclick="drawShelves(); return false;">

Отключить событие отправки формы по умолчанию:

<form id="mainForm" onsubmit="return false;">

Но в обоих случаях вам нужно каким-либо образом без перезагрузки страницы отправить данные на сервер. Самый верный способ -- использовать Ajax запрос.

Вот тут есть пошаговый гайд как реализовать это с помощью ajax https://fructcode.com/ru/blog/how-to-send-html-form-with-ajax/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.