Функция отправки JQuery, которая не работает - PullRequest
Новая
       1

Функция отправки JQuery, которая не работает

1 голос
/ 02 ноября 2019

Моя функция jQuery не работает, и я не знаю, откуда проблема, вот мой код: 

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

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

Сообщение от моего console.log не отображается в браузере, только первоеконсоль, которая появляется так, как вы видите здесь:

консоль сообщений

вот весь мой код 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>

Я действительно не знаю, где ошибка, если кто-то хочет помочь мне, я буду очень благодарен и заранее благодарю вас!

Ответы [ 3 ]

0 голосов
/ 02 ноября 2019

Вам нужно запретить отправку, если вы хотите отправить обе, но ТО, что вы хотите сделать? 

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(event) {
    event.preventDefault();
    recuperer_valeur_reservation();
    console.log('submit f1...');
    alert('Default prevented NOW WHAT?');
  });
});
<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>
0 голосов
/ 03 ноября 2019

Я обнаружил, что ошибка в ошибке возникает из-за начальной загрузки кода: data-target = "# payment" data-dismiss = "modal"

когда я нажимаю на кнопку, она автоматически закрывается безотправить отправить, вот решение, которое я нашел, я удалил data-target = "# payment" data-dismiss = "modal" в кнопке и вставил свой код jquery: 

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

    });
});

спасибовсем вам большое спасибо за помощь!

0 голосов
/ 02 ноября 2019

Пожалуйста, попробуйте вставить JQuery перед вашим кодом. Появляется ли первая запись в журнале? Когда jQuery реализован правильно, ваш код работает для формы $ ("# f") - это первая форма в вашей html-части.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...