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);
}
});
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();
});
}
})
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>
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>
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();
}
});
})
Yes, like I did, However while the form is not yet submitted, the user can continue typing