Получение значений, хранящихся в переменных jquery, и сохранение их во входных данных скрытого типа

Question

Я пытаюсь создать переменные jquery и вставить их в значения переменных (которые будут введены пользователем), а затем их значения, я сохраняю их во входах типа hidden и затем использую их в своем коде java-ee для вставки.

Вот код 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();
             console.log(numero_place);

            var test=$('#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);
            console.log(test);

        }

       $(document).ready(function(){

    $("#reservation").on("submit",'#f',function(e){
    e.preventDefault();
    alert('submit f1!');
    $("#reservation").modal('hide');
    $("#paiement").modal("show");
    recuperer_valeur_reservation();
    console.log("hello toufik");

    });
});

    </script>

Относительно восстановления значений, введенных пользователем и помещенных в переменные jquery, которые работают очень хорошо, я проверил это с помощью этого кода:

console.log(numero_place);

это очень хорошо показывает мне значение места в моей консоли.

проблема в том, что его значения не сохраняются на входах типов, скрытых при тестировании на одном из его входовс этим кодом:

var test=$('#nom_localhidden').val(nom_local); 
console.log(test);

это показывает мне в моей консоли этот результат:

Я не знаю, почему это показываетмне это, и когда я вставляю значения не восстанавливаются, в моей базе данных есть только нули, которые подтверждают, что значения не вставлены в скрытый тип входных данных, вот как выглядит моя база данных:

это мой 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"  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>


        <script src="vendors/jquery/dist/jquery.min.js"></script>
    <script src="vendors/popper.js/dist/umd/popper.min.js"></script>
    <script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="js/moment.js"></script>

    <script src="vendors/chart.js/dist/Chart.bundle.min.js"></script>
    <script src="assets/js/dashboard.js"></script>
    <script src="assets/js/widgets.js"></script>
    <script src="vendors/jqvmap/dist/jquery.vmap.min.js"></script>
    <script src="vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
    <script src="vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>


    <script>

        function afficher(e){
   e.preventDefault();//pour inhiber le lien, parce que le bouton .btn est un <a href="#">
   var tr=$(this).closest('tr');

    $('#f .custom-select')
        .html('<option value="'+tr.find('td:eq(0)').text()+'">'+tr.find('td:eq(0)').text()+'</option>');


    $('#nom_local').val(tr.find('td:eq(0)').text());

    $('#numeroplace').val(tr.find('td:eq(1)').text());

    $('#prixplace').val(tr.find('td:eq(2)').text());

    $('#tailleplace').val(tr.find('td:eq(3)').text());



     $('#nom_localhidden').val(tr.find('td:eq(0)').text());

    $('#numeroplacehidden').val(tr.find('td:eq(1)').text());

    $('#prixplacehidden').val(tr.find('td:eq(2)').text());

    $('#tailleplacehidden').val(tr.find('td:eq(3)').text());
}
/* Quand le document est prêt */
$(document).ready(function(){
     $('#table1').on('click','#corps .btn',afficher);
});   



    </script>


    <script>
        function recuperer_prix_total(){
            var prixtotal= $('#prix').val();
            $('#prixtotalhidden').val(prixtotal);
            console.log(prixtotal);
        }
$(document).ready(function(){
  $("#f1").on("submit",function(e){

   recuperer_prix_total();
}); 
});   

    </script>

     <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();
             console.log(numero_place);

            var test=$('#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);
            console.log(test);

        }

       $(document).ready(function(){

    $("#reservation").on("submit",'#f',function(e){
    e.preventDefault();
    alert('submit f1!');
    $("#reservation").modal('hide');
    $("#paiement").modal("show");
    recuperer_valeur_reservation();
    console.log("hello toufik");

    });
});

    </script>

    <script>




$('#paiement').on('shown.bs.modal', function () {//quand #myModal s'affiche

    var heure_debut = $("#heure_debut").val(),  
    heure_fin = $("#heure_fin").val(),
    prix=$('#prixplace').val(),
    diff,
    total;
    console.log("prix"+prix);
    console.log('Ouverture du modal...');//vérifies si tu vois cette ligne dans la console quand le modal #myModal est affiché
    if (moment(heure_debut, "HH:mm").isValid() && moment(heure_fin, "HH:mm").isValid()) {
            diff = moment.utc(moment(heure_fin, 'HH:mm').diff(moment(heure_debut, 'HH:mm')));
            console.log("diif = "+diff);
            total=prix *  moment(diff,'HH:mm').hour()+ ( moment(diff,'HH:mm').minutes()/60 );
            console.log(total);
            $("#prix").val(total.toFixed(2)+"  DHS");
 console.log('Ouverture du modal, debut :'+heure_debut,", fin :"+heure_fin);

            console.log("différence :", diff.format('HH:mm'),", hour :",moment(diff,'HH:mm').hour(),
               ", minutes :",moment(diff,'HH:mm').minutes(), 
              ", total :",total.toFixed(2));
   } else 
        console.log("heure invalide !");
    console.log('Ouverture du modal, debut :'+heure_debut,", fin :"+heure_fin);

});



    </script>
    </body>
</html>

и это мой код Java-EE:

 protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String nom_local=request.getParameter("nom_localhidden");

         System.out.println("hello");

        String numeroplace=request.getParameter("numeroplacehidden");
        String prixplace=request.getParameter("prixplacehidden");
        String tailleplace=request.getParameter("tailleplacehidden");
        String cinlocataire=request.getParameter("cinlocatairehidden");
        String heure_debut=request.getParameter("heure_debut_hidden");
        String heure_fin=request.getParameter("heure_fin_hidden");
        String action=request.getParameter("action");
        DateFormat dateformat=new SimpleDateFormat("HH:mm");
        String cin=request.getParameter("cin");
        String typepaiement=request.getParameter("typepaiement");
        String prixtotalhidden=request.getParameter("prixtotalhidden");
        Connection c=Cnx.getcnx();
        try{
          if("payer".equals(action)){
            PreparedStatement st=c.prepareStatement("insert into reservation values (null,?,?,?,?,?,?,?)");
            st.setString(1, nom_local);
            st.setString(2, numeroplace);
            st.setString(3, prixplace);
            st.setString(4, tailleplace);
            st.setString(5, cinlocataire);
            st.setString(6, heure_debut);
            st.setString(7, heure_fin);
            int res=st.executeUpdate(); 
              System.out.println("hello");
             if(res>0){
                 System.out.println("reservation réaliser avec succes");

           }

           else {
                System.out.println("reservation non ajouter");
           }

             PreparedStatement st2=c.prepareStatement("insert into paiement values (null,?,?,?)");
             st2.setString(1, cin);
             st2.setString(2, typepaiement);
             st2.setString(3, prixtotalhidden);
            int res2= st2.executeUpdate();
            if(res2>0){
                 System.out.println("paiement réaliser avec succes");

           }

           else {
                System.out.println("paiement non ajouter");
           }
            }



        }
        catch(Exception ex){
            ex.printStackTrace();
        }
        getServletContext().getRequestDispatcher("/WEB-INF/Acceuil_locataire.jsp").forward(request, response);
    }

Большое спасибо за вашу помощь заранее!