Solution 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);

    }
});

Solution 2 :

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();
      });
  }
})

Solution 3 :

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>

Solution 4 :

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>

Problem :

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();

    }
  });
})

Comments

Comment posted by Huskell

The easiest way is to put the submit inside a

Comment posted by Atiqul Alam

You can submit from the

Comment posted by mplungjan

This will try to submit as many times the user types a char after the 13

Comment posted by mplungjan

Yes, like I did, However while the form is not yet submitted, the user can continue typing

Comment posted by mplungjan

This will call play and timeout repeatedly if the user keeps typing

By