在提交表单之前执行 javascript

Question

I'm working on a project where when a user enters 13 characters in the input, then the form gets submitted automatically using JavaScript without pressing a submitted button.

Now i want to add a beep sound when the user enters the 13th character in the input.

<input id="text" type="text" maxlength="13" class="form-control" value='' name="order_id" autofocus> 

function play() {
  var audio = new Audio('beep.mp3');
  audio.play();
}

$("#text").keyup(function(e) {
    var length = this.value.length;
    if (length == 13) {
        play();  //first i need to run this function to play sound then i want to submit form after 1.5 second
         this.form.submit();
     e.preventDefault();

    }
  });
})

Answer 1

You can use setTimeout .

function play() {
    var audio = new Audio('beep.mp3');
    audio.play();
}

$("#text").keyup(function(e) {
    var length = this.value.length;
    if (length == 13) {
        play();  //first i need to run this function to play sound then i want to submit form after 1.5 second

        setTimeout(function(){ 
            this.form.submit();
            e.preventDefault();
        }, 1500);

    }
});

Answer 2

Like this. My code will submit after the sound has played - and not before

No need for timeout

Remember to stop the code from executing the play after submitting the first time, or the async function will be triggered more than once

 let subbed = false; function play() { subbed = true; var audio = new Audio('https://freesound.org/data/previews/254/254819_4597795-lq.mp3'); audio.addEventListener("ended", function() { console.log("sub"); $("#form1")[0].submit(); }); audio.play(); } $("#text").keyup(function(e) { var length = this.value.length; if (length === 13 && !subbed) { play(); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form1" action="https://plungjan.name/"> <input id="text" type="text" maxlength="13" class="form-control" value='' name="order_id" autofocus> </form>

Answer 3

You can use the ended event on the Audio node to trigger the submission instead of hardcoding the length, so it accounts for delays in loading the sound.

function playSound(callback) {
  var audio = new Audio('beep.mp3');
  audio.addEventListener('ended', callback);
  audio.play();
}

document.querySelector('#text').addEventListener('change', function (event) {
  if (event.currentTarget.value.length === 13) {
      playSound(() => {
          document.querySelector('form').submit();
      });
  }
})

Answer 4

You can try it in such way:

 const el = document.getElementById("text") const formEl = document.getElementById("form1") const play = function(){ let audio = new Audio('beep.mp3') audio.play() } el.oninput = function() { let length = el.value.length if (length === 13) { play() //first i need to run this function to play sound then i want to submit form after 1.5 second setTimeout(() => formEl.submit(), 1500) } }

 <form action="" id="form1"> <input id="text" type="text" maxlength="13" class="form-control" value='' name="order_id" autofocus> </form>