execute a javascript before submitting a form

user_9359107 0
Viewed 269

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

    }
  });
})
html javascript
4 Answers

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

    }
});
user_129650510

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>

user_2957830

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

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>

user_130663330
Related