javascript - jquery提交功能不起作用-6ren

javascript - jquery提交功能不起作用

转载作者：行者123 更新时间：2023-11-28 03:25:23

我的 jQuery 函数不起作用，我不知道问题出在哪里，这是我的代码:

$(document).ready(function(){
  console.log("document prêt !!!");
  $("#f").on("submit",function(e){

    recuperer_valeur_reservation();
    console.log('submit f1...');
  }); 
});

来 self 的 console.log 的消息不会显示在浏览器中，仅显示第一个控制台，如下所示:

message console

这是我所有的 jquery 代码:

<script>
  function recuperer_valeur_reservation(){
  var nom_local=$('#nom_local').val();
  var numero_place=$('#numeroplace').val();
  var prix_place=$('#prixplace').val();
  var taille_place=$('#tailleplace').val();
  var cin=$('#Cinlocataire').val();
  var heure_debut=$('#heure_debut').val();
  var heure_fin=$('#heure_fin').val();


  $('#nom_localhidden').val(nom_local);
  $('#numeroplacehidden').val(numero_place);
  $('#prixplacehidden').val(prix_place);
  $('#tailleplacehidden').val(taille_place);
  $('#cinlocatairehidden').val(cin);
  $('#heure_debut_hidden').val(heure_debut);
  $('#heure_fin_hidden').val(heure_fin);


}

$(document).ready(function(){
  console.log("document prêt !!!");
  $("#f").on("submit",function(e){

    recuperer_valeur_reservation();
    console.log('submit f1...');
  });
});

</script>

这是我的 html 代码:

 <div class="modal" id="reservation">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Information</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <form method="POST" id="f" action="Acceuil_locataire">
            <div class="form-group">
                <label class='labelproprietaire'>Nom du local approprié à la place :</label>
                <input type="hidden" class="form-control" id="nom_localhidden"  name="nom_localhidden">
                <input type="text" class="form-control" id="nom_local"  name="nom_local" disabled>


            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Numéro place :</label>
                <input type="hidden" class="form-control" id="numeroplacehidden"  name="numeroplacehidden">
                <input type="number" class="form-control" id="numeroplace"  name="numeroplace" disabled>
            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Prix par heure:</label>
                <input type="hidden" class="form-control" id="prixplacehidden"  name="prixplacehidden">
                <input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" disabled>

            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Taille de la place :</label>
                <input type="hidden" class="form-control" id="tailleplacehidden"  name="tailleplacehidden">
                <input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" disabled>

            </div>

            <div class="form-group">
                <label class='labelproprietaire'>Votre Cin :</label>
                <input type="hidden" class="form-control" id="cinlocatairehidden"  name="cinlocatairehidden">
                <input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>

            </div>

            <div class="form-group">
                <label class='labelproprietaire'>Heure début de la réservation :</label>
                <input type="hidden" class="form-control" id="heure_debut_hidden"  name="heure_debut_hidden">
                <input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>

            </div>

            <div class="form-group">
                <label class='labelproprietaire'>Heure fin de la réservation :</label>
                <input type="hidden" class="form-control" id="heure_fin_hidden"  name="heure_fin_hidden">
                <input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>

            </div>








      <!-- Modal footer -->
      <div class="modal-footer">

         <div id='divbtnaddplace'>      
             <button  type="submit" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#paiement" data-dismiss="modal" id='btnreserver' style='vertical-align: 0;  margin-right: 220px;'>Réserver</button>
             <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button> 

           </div>




      </div>
        </form>
    </div>
  </div>
</div>
  </div>    


      <div class="modal" id="paiement">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Information</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <form method="POST" id="f1" action="Acceuil_locataire"> 
            <div class="form-group">
                <label class='labelproprietaire'>Votre Cin :</label>

                <input type="text" class="form-control" id="Cin"  name="cin">


            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Type paiement :</label>

                   <div class="row">
                      <div class="col-md-6 select-outline">

                        <select class="mdb-select md-form md-outline colorful-select dropdown-primary btn-lg" style="width: 465px;" name="typepaiement">
                          <option value="" disabled selected>Choose your option</option>
                          <option value="Paypal">Paypal</option>
                          <option value="Carte bancaire">Carte bancaire</option>
                          <option value="Payonner">Payonner</option>
                        </select>


                      </div>
                    </div>
            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Prix :</label>
                <br>
                <input type='hidden' id='prixtotalhidden' name="prixtotalhidden">
                <input type='text' class="form-control" id="prix"  name="prixtotal" style='font-size: 20px; color: red;' disabled="">

            </div>



      <!-- Modal footer -->
      <div class="modal-footer">
          <button type="submit" class="btn btn-primary btn-lg"  id="buttonpayer" name="action" value="payer"  style="margin-right: 250px;">Payer</button>
        <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>

      </div>
      </form>

      </div>

    </div>

  </div>
</div>

function recuperer_valeur_reservation() {
  var nom_local = $('#nom_local').val();
  var numero_place = $('#numeroplace').val();
  var prix_place = $('#prixplace').val();
  var taille_place = $('#tailleplace').val();
  var cin = $('#Cinlocataire').val();
  var heure_debut = $('#heure_debut').val();
  var heure_fin = $('#heure_fin').val();
  $('#nom_localhidden').val(nom_local);
  $('#numeroplacehidden').val(numero_place);
  $('#prixplacehidden').val(prix_place);
  $('#tailleplacehidden').val(taille_place);
  $('#cinlocatairehidden').val(cin);
  $('#heure_debut_hidden').val(heure_debut);
  $('#heure_fin_hidden').val(heure_fin);
}
$(document).ready(function() {
  console.log("document prêt !!!");
  $("#f").on("submit", function(e) {
    recuperer_valeur_reservation();
    console.log('submit f1...');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal" id="reservation">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Information</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <form method="POST" id="f" action="Acceuil_locataire">
          <div class="form-group">
            <label class='labelproprietaire'>Nom du local approprié à la place :</label>
            <input type="hidden" class="form-control" id="nom_localhidden" name="nom_localhidden">
            <input type="text" class="form-control" id="nom_local" name="nom_local" disabled>
          </div>
          <div class="form-group">
            <label class='labelproprietaire'>Numéro place :</label>
            <input type="hidden" class="form-control" id="numeroplacehidden" name="numeroplacehidden">
            <input type="number" class="form-control" id="numeroplace" name="numeroplace" disabled>
          </div>
          <div class="form-group">
            <label class='labelproprietaire'>Prix par heure:</label>
            <input type="hidden" class="form-control" id="prixplacehidden" name="prixplacehidden">
            <input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" disabled>
          </div>
          <div class="form-group">
            <label class='labelproprietaire'>Taille de la place :</label>
            <input type="hidden" class="form-control" id="tailleplacehidden" name="tailleplacehidden">
            <input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" disabled>
          </div>
          <div class="form-group">
            <label class='labelproprietaire'>Votre Cin :</label>
            <input type="hidden" class="form-control" id="cinlocatairehidden" name="cinlocatairehidden">
            <input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>
          </div>
          <div class="form-group">
            <label class='labelproprietaire'>Heure début de la réservation :</label>
            <input type="hidden" class="form-control" id="heure_debut_hidden" name="heure_debut_hidden">
            <input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>
          </div>
          <div class="form-group">
            <label class='labelproprietaire'>Heure fin de la réservation :</label>
            <input type="hidden" class="form-control" id="heure_fin_hidden" name="heure_fin_hidden">
            <input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>
          </div>
          <!-- Modal footer -->
          <div class="modal-footer">
            <div id='divbtnaddplace'>
              <button type="submit" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#paiement" data-dismiss="modal" id='btnreserver' style='vertical-align: 0;  margin-right: 220px;'>Réserver</button>
              <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="modal" id="paiement">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Information</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <form method="POST" id="f1" action="Acceuil_locataire">
          <div class="form-group">
            <label class='labelproprietaire'>Votre Cin :</label>
            <input type="text" class="form-control" id="Cin" name="cin">
          </div>
          <div class="form-group">
            <label class='labelproprietaire'>Type paiement :</label>
            <div class="row">
              <div class="col-md-6 select-outline">
                <select class="mdb-select md-form md-outline colorful-select dropdown-primary btn-lg" style="width: 465px;" name="typepaiement">
                  <option value="" disabled selected>Choose your option</option>
                  <option value="Paypal">Paypal</option>
                  <option value="Carte bancaire">Carte bancaire</option>
                  <option value="Payonner">Payonner</option>
                </select>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class='labelproprietaire'>Prix :</label>
            <br>
            <input type='hidden' id='prixtotalhidden' name="prixtotalhidden">
            <input type='text' class="form-control" id="prix" name="prixtotal" style='font-size: 20px; color: red;' disabled="">
          </div>
          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary btn-lg" id="buttonpayer" name="action" value="payer" style="margin-right: 250px;">Payer</button>
            <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

我真的不知道错误出在哪里，如果有人愿意帮助我，我会非常感激并提前谢谢你!

最佳答案

请尝试在代码之前插入 jQuery。第一个日志条目是否出现？当 jQuery 正确实现时，您的代码适用于表单 $("#f") - 这是 html 部分中的第一个表单。

关于javascript - jquery提交功能不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58674159/

文章推荐： javascript - Firebase 函数如何在循环完成迭代后发送

文章推荐： c++ - 我将如何正确存储多个实例对象？

文章推荐： css - 汉堡包菜单未显示在响应式导航栏中

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jquery提交功能不起作用