1

A minha modalbox nao corre o meu script jquerry

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

codigo Modal

<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>
1
  • Não pode repetir id's. Troque-os por class.
    – Sam
    Commented 27/08/2019 às 15:13

1 Resposta 1

2

Note que você está repetindo id's nos campos. Além de ser incorreto repetir id's, os eventos onde você escuta pelos id's só irão funcionar nos primeiros elementos que tiverem os id's.

Troque todos os id's repetidos por class. Por exemplo, no campo de mensagem, ficaria:

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

E use apenas um event handler para todos os elementos usando as classes, já que todos fazem a mesma coisa:

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

Veja um exemplo (coloquei a div.mobile visível para exemplificar o funcionamento em todos os campos):

$(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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .