CODEWITHSUNDEEP
javascripthtml
John Savio Fernandes
John Savio Fernandes

Reputation: 47

execute a javascript before submitting a form

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

    }
  });
})

Upvotes: 2

Views: 352

Answers (4)

mplungjan
mplungjan

Reputation: 177691

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>

Upvotes: 0

Matthew
Matthew

Reputation: 1

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>

Upvotes: 0

p3drosola
p3drosola

Reputation: 5877

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

Upvotes: 0

Dashzeveg Galbadrakh
Dashzeveg Galbadrakh

Reputation: 706

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

    }
});

Upvotes: 1

Related Questions