execute a javascript before submitting a form

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

    }
  });
})

You can submit from the play() method after playing the audio or use setTimeout — Atiqul Alam
– Atiqul Alam, Commented Mar 18, 2020 at 18:22

Dashzeveg Galbadrakh · Accepted Answer · 2020-03-18 18:19:20Z

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

    }
});

answered Mar 18, 2020 at 18:19

Dashzeveg Galbadrakh

7061 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mplungjan Over a year ago

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

p3drosola · Accepted Answer · 2020-03-18 18:46:18Z

0

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

answered Mar 18, 2020 at 18:46

p3drosola

5,9272 gold badges26 silver badges30 bronze badges

1 Comment

mplungjan Over a year ago

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

Matthew · Accepted Answer · 2020-03-18 18:53:37Z

0

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>

answered Mar 18, 2020 at 18:53

Matthew

12 bronze badges

1 Comment

mplungjan Over a year ago

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

mplungjan · Accepted Answer · 2020-03-19 06:15:08Z

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>

Collectives™ on Stack Overflow

execute a javascript before submitting a form

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related