my script does not work inside the modal

Question

good afternoon, how can I make my script run inside the modal I’m not getting. I made a modal for contact and I can’t call the id of campos in the jQuery someone knows how I can do?

codigo js:

$(document).ready(function(){
   alert($("#form1_f_name").val());
});

modal code:

<div id="contato" class="quickview-product">
            <div class="single-product">
                   <div class="col-12 mb-50">
                        <div class="section-title d-flex justify-content-center text-center">
                            <div class="inner">
                                <h2 class="font-weight-700 text-uppercase mtn-10">Contato</h2><span>Em caso de dúvidas, solicitaçõe de orçamento, sugestões, críticas ou reclamações preencha o formulário abaixo.</span>

                            </div>
                        </div>
                    </div>   
    <div class="form form-color form-color">
        <form action="#" method="POST">
            <div class="row row-20 mbn-20">
                <div class="col-md-6 col-12 mb-20">
                   <label for="form1_f_name" class="sr-only">Nome</label>
                   <input type="text" id="form1_f_name" name="nome" placeholder="Nome">
                 </div>
                <div class="col-md-6 col-12 mb-20">
                   <label for="form1_email" class="sr-only">Email</label>
                   <input type="email" id="form1_email" name="email" placeholder="Email">
                 </div>
                 <div class="col-md-6 col-12 mb-20">
                    <label for="form1_phone" class="sr-only">Assunto</label>
                    <input type="text" id="form1_phone" name="assunto" placeholder="Assunto">
                 </div>
                 <div class="col-md-6 col-12 mb-20">
                    <label for="form1_p" class="sr-only">Telefone</label>
                    <input type="text" id="form1_p" name="tel" placeholder="Telefone(Opcional)" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4,5}">
                  </div>
                  <div class="col-md-6 col-12 mb-20">
                     <label for="form1_c" class="sr-only">Cidade</label>
                     <input type="text" id="form1_c" name="cidade" placeholder="Cidade">
                   </div>
                  <div class="col-md-6 col-12 mb-20">
                     <label for="form1_e" class="sr-only">Estado</label>
                    <select class="sortableVal" name="estado">
                     <option value="0">Estado</option>
                     <option>AC</option>
                     <option>AL</option>
                     <option>AP</option>
                     <option>AM</option>
                     <option>BA</option>
                     <option>CE</option>
                     <option>DF</option>
                     <option>ES</option>
                     <option>GO</option>
                     <option>MA</option>
                     <option>MT</option>
                     <option>MS</option>
                     <option>MG</option>
                     <option>PA</option>
                     <option>PB</option>
                     <option>PR</option>
                     <option>PE</option>
                     <option>PI</option>
                     <option>RJ</option>
                     <option>RN</option>
                     <option>RS</option>
                     <option>RO</option>
                     <option>RR</option>
                     <option>SC</option>
                     <option>SP</option>
                     <option>SE</option>
                     <option>TO</option>
                    </select>
         </div>
         <div class="col-12 mb-20">
             <label for="form1_message" class="sr-only">Mensagem</label>
             <textarea id="form1_message" name="msg" placeholder="Mensagem"></textarea>
          </div>
          <div class="col-12 mt-10 mb-20">
            <input type="submit" class="btn btn-form" name="send" value="Enviar">
           </div>
        </div>
      </form>
    </div>
  </div>  
</div>
</div>  
</div>

Answer 1

Next apparently Voce is having event bind problem. If your modal is static on the page, return $("#form1_f_name").val(), will be "empty" in the page shipment. To get the values corresponding to the element in an event, "click" for example do as follows:

$(function(){
   $('.botao-de-enviar').click(function(e){
      e.preventDefault();
      console.log($("#form1_f_name").val())
   })
})
           
           
           

<div class="col-12 mt-10 mb-20">
            <input type="submit" class="btn btn-form botao-de-enviar" name="send" value="Enviar">
           </div>