Я должен дважды нажать кнопку, чтобы онклики работали

Question

Вот мой код html и JS. Когда я впервые нажимаю на кнопку, она отправляет форму, но не вызывает функцию onclick. Я попытался добавить метод onsubmit к форме и сделать кнопку type type = button. Тем не менее, это ничего не изменило.

Форма для отправки Django кстати.

<form action='' method='GET' required id='form_id'>

     <input class='url_box' type='url' name='url_value' placeholder='Paste the URL...'/> <br>
     <button class='submit-btn' type='submit' onclick="delayRedirect()">Listen</button>

</form>

JavaScript

function delayRedirect(){

    setTimeout(function(){
        window.location = 'player';
    }, 1500);
} 

Заранее спасибо!

Answer 1

Изменен тип кнопки на кнопку, и она регистрирует "нажал". перед отправкой формы.

$('.submit-btn').click((e) => {
  console.log('clicked.');
  $('form').submit();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action='' method='GET' required id='form_id'>

     <input class='url_box' type='url' name='url_value' placeholder='Paste the URL...'/> <br>
     <button class='submit-btn' type='button'>Listen</button>

</form>

Answer 2

HTML

<form action='' target="you_dont_see_me" method='POST' required id='form_id'>

     <input class='url_box' type='url' name='url_value' placeholder='Paste the URL...'/> <br>
     <button class='submit-btn' type='button' onclick="delayRedirect()">Listen</button>

</form>
<iframe name="you_dont_see_me" style="display:none"></iframe>

JS

function delayRedirect(){
        document.getElementById('form_id').submit();
    setTimeout(function(){
        //do whatever you want
    }, 1500);
} 

Вы можете использовать iframe, но ваш метод должен быть изменен на POST. Я лично использовал бы ajax, чтобы справиться с такой ситуацией

Answer 3

<form required id='form_id'>
     <input class='url_box' type='url' name='url_value' placeholder='Paste the URL...'/> <br>
     <button class='submit-btn'>Listen</button>
</form>

/ JS

const btn = document.querySelector('.sumbit-btn')

btn.addEventListener("click", (e)=>{
      e.preventDefault() // becuse the btn in <form></form> 
     // send to Django
})