Implement jquery script in modal box

Question

My modalbox doesn’t run my jquerry script

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', '/teste/typewriter-2.mp3');


    $('#nome').keydown(function(event){
        audioElement.play();
        console.log("entrou");
    });

    $('#email').keydown(function(event){
        audioElement.play();
    });

    $('#telefone').keydown(function(event){
        audioElement.play();
    });

    $('#empresa').keydown(function(event){
        audioElement.play();
    });

    $('#mensagem').keydown(function(event){
        audioElement.play();
    });
});

modal code

<div style="z-index: 999999;" class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div style="color:black;" class="modal-dialog" role="document">
            <div class="modal-content">             
                <div class="modal-body">
                    <img style="margin-top: 20px;  margin-left: 20px;" data-dismiss="modal" width="60" src="/images/close.svg">
                    <br><br>
                    <center>
                        <h3 style="color:black" > ORGANIZAÇÕES </h3>
                        <br>
                    </center>

                    <div style="display:block" class="desktop">
                        <form class="contacto" name="organizacaoDesktop" id="organizacaoDesktop" action="processa_contato.php" method="post">               
                            <table style="width:90%">
                                <tr>
                                    <td colspan="5">
                                        <input type="text" name="nome" id="nome" width="100%">
                                    </td>
                                    <td>NOME* <br><br></td>
                                </tr>

                                <tr>
                                    <td colspan="2">
                                        <input  class="" type="text" name="telefone" id="telefone">
                                    </td>
                                    <td>TELEFONE</td>
                                    <td colspan="2">
                                        <input style="" type="text" name="empresa" id="empresa">
                                    </td>
                                    <td>EMPRESA* <br><br></td>
                                </tr>

                                <tr>
                                    <td colspan="5">
                                        <input type="text" name="email" id="email">
                                    </td>
                                    <td>EMAIL*<br><br></td>
                                </tr> 

                                <tr>
                                    <td colspan="5">
                                        <textarea rows="4"  class="notes" id="mensagem" name="mensagem" ></textarea>
                                    </td>
                                    <td style="position: absolute;">Mensagem</td>
                                </tr>                       
                            </table>
                            <br><br>
                            <input style="background:white" class="submit"name="enviar-livre"  type="submit" value="Enviar" onclick="return validarDesktop()">
                            <br><br>
                            <span class="campos" style="font-size:9px;"> *Campos obrigatórios  </span>
                        </form>
                    </div>



                    <div style="display:none" class="mobile">
                        <form class="contacto" id="organizacaoMobile" name="organizacaoMobile" action="processa_contato.php" method="post">             
                            <table style="width:90%">
                                <tr>
                                    <td colspan="5">
                                        <input type="text" name="nome" id="nome" width="100%">
                                    </td>
                                    <td>NOME* <br><br></td>
                                </tr>
                                <tr>
                                    <td colspan="5">
                                        <input type="text" name="email" id="email">
                                    </td>
                                    <td>EMAIL*<br><br></td>
                                </tr> 
                                <tr>
                                    <td colspan="5">
                                        <input  class="" type="text" name="telefone" id="telefone">
                                    </td>
                                    <td>TELEFONE <br> <br> </td>
                                </tr>
                                <tr>
                                    <td colspan="5">
                                        <input style="" class="empresa" type="text" name="empresa" id="empresa">
                                    </td>
                                    <td>EMPRESA* <br><br></td>
                                </tr>
                                <tr>
                                    <td colspan="5">
                                        <textarea rows="4"  class="notes" id="mensagem" name="mensagem" ></textarea>
                                    </td>
                                    <td style="position: absolute;">Mensagem</td>
                                </tr>                       
                            </table>
                            <br><br>
                            <input style="background:white" class="submit"name="enviar-livre"  type="submit" value="Enviar" onclick="return validarMobile()">
                            <br><br>
                            <span class="campos" style="font-size:9px;"> *Campos obrigatórios  </span>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Note that you are repeating id’s in the fields. In addition to being incorrect to repeat id’s, events where you listen for id’s will only work in the first elements that have id’s.

Exchange all repeated id’s for class. For example, in the message field, it would be:

<textarea rows="4"  class="notes mensagem" name="mensagem" ></textarea>

And use only one event handler for all elements using classes, since everyone does the same thing:

$('.nome, .email, .telefone, .empresa, .mensagem').keydown(function(event){
   audioElement.play();
});

Here’s an example (I put the div.mobile visible to exemplify operation in all fields):

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'https://dvdteste.websiteseguro.com/teste.mp3');

   $('.nome, .email, .telefone, .empresa, .mensagem').keydown(function(event){
      audioElement.play();
   });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1">
Abrir modal
</button>
<div style="z-index: 999999;" class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div style="color:black;" class="modal-dialog" role="document">
      <div class="modal-content">             
          <div class="modal-body">
              <img style="margin-top: 20px;  margin-left: 20px;" data-dismiss="modal" width="60" src="/images/close.svg">
              <br><br>
              <center>
                  <h3 style="color:black" > ORGANIZAÇÕES </h3>
                  <br>
              </center>

              <div style="display:block" class="desktop">
                  <form class="contacto" name="organizacaoDesktop" id="organizacaoDesktop" action="processa_contato.php" method="post">               
                      <table style="width:90%">
                          <tr>
                              <td colspan="5">
                                  <input type="text" name="nome" class="nome" width="100%">
                              </td>
                              <td>NOME* <br><br></td>
                          </tr>

                          <tr>
                              <td colspan="2">
                                  <input  type="text" name="telefone" class="telefone">
                              </td>
                              <td>TELEFONE</td>
                              <td colspan="2">
                                  <input style="" type="text" name="empresa" class="empresa">
                              </td>
                              <td>EMPRESA* <br><br></td>
                          </tr>

                          <tr>
                              <td colspan="5">
                                  <input type="text" name="email" class="email">
                              </td>
                              <td>EMAIL*<br><br></td>
                          </tr> 

                          <tr>
                              <td colspan="5">
                                  <textarea rows="4"  class="notes mensagem" name="mensagem" ></textarea>
                              </td>
                              <td style="position: absolute;">Mensagem</td>
                          </tr>                       
                      </table>
                      <br><br>
                      <input style="background:white" class="submit"name="enviar-livre"  type="submit" value="Enviar" onclick="return validarDesktop()">
                      <br><br>
                      <span class="campos" style="font-size:9px;"> *Campos obrigatórios  </span>
                  </form>
              </div>



              <div style="/*display:none*/" class="mobile">
                  <form class="contacto" id="organizacaoMobile" name="organizacaoMobile" action="processa_contato.php" method="post">             
                      <table style="width:90%">
                          <tr>
                              <td colspan="5">
                                  <input type="text" name="nome" class="nome" width="100%">
                              </td>
                              <td>NOME* <br><br></td>
                          </tr>
                          <tr>
                              <td colspan="5">
                                  <input type="text" name="email" class="email">
                              </td>
                              <td>EMAIL*<br><br></td>
                          </tr> 
                          <tr>
                              <td colspan="5">
                                  <input  type="text" name="telefone" class="telefone">
                              </td>
                              <td>TELEFONE <br> <br> </td>
                          </tr>
                          <tr>
                              <td colspan="5">
                                  <input style="" class="empresa" type="text" name="empresa">
                              </td>
                              <td>EMPRESA* <br><br></td>
                          </tr>
                          <tr>
                              <td colspan="5">
                                  <textarea rows="4"  class="notes mensagem" name="mensagem" ></textarea>
                              </td>
                              <td style="position: absolute;">Mensagem</td>
                          </tr>                       
                      </table>
                      <br><br>
                      <input style="background:white" class="submit"name="enviar-livre"  type="submit" value="Enviar" onclick="return validarMobile()">
                      <br><br>
                      <span class="campos" style="font-size:9px;"> *Campos obrigatórios  </span>
                  </form>
              </div>
          </div>
      </div>
  </div>
</div>