Создать ajax-скрипт для ввода нескольких форм php html

ProgramBox

Создать ajax-скрипт для ввода нескольких форм php html

Post author:admin
Запись опубликована:12 апреля, 2023
Post category:Вопросы по программированию

#javascript #php #html #css #ajax

#javascript #php #HTML #css #ajax

Вопрос:

У меня есть код с отправкой нескольких форм, отправка не работает из-за нескольких отправлений на одной странице, я обнаружил, что для этого нужен ajax-скрипт, но я новичок в нем, может кто-нибудь дать мне подсказки по созданию скрипта для создания системы регистрации mysqli.

1 / Он имеет 4 модальных идентификатора = MyModal1,2, 3, 4, каждое модальное тело имеет форму;

2/ php не завершен, его целевая задача — выполнить вставку в базу данных.

3/ CSS и javascript работают нормально

Вот код:

 <!DOCTYPE html>
<html>

<head>
  
<?php

  $date=date('Y-m-d');
  $date3=date('Y-m-d', strtotime($date . " 3 months") );
  $date6=date('Y-m-d', strtotime($date . " 6 months") );
  $date12=date('Y-m-d', strtotime($date . " 12 months") );
 



  ?>
  
     <?php
     
      
   if(isset($_POST['enregistrer'])){
        
      $nom=$_POST['nom_client'];
      $prenom=$_POST['pernomclient'];
      $date_naissance=$_POST['datenaiss'];
      $lieu_naissance=$_POST['lieunaiss'];
      $commune=$_POST['commune'];
      $dayra=$_POST['daira'];
      $willaya=$_POST['wilaya'];
      $proffession=$_POST['proffesion'];
      $testdate="2000-01-01";
      $testtext="?";

        
          $Num_per=$_POST['numpermis'];
    
      $date_obt=$_POST['dateobt'];
      $date_deliv=$_POST['delivre'];
     

        
      
          $date_eff=$_POST['effet'];
          $date_exp=$_POST['expiration'];
          
      
  

          $numserie=$_POST['numserie'];
          $type=$_POST['typevoi'];
          $marque=$_POST['marque'];
          $aces_asies=$_POST['acesass'];
          $num_matricul=$_POST['immatricul'];
          echo "test";
        }


 
     
  
 
              ?>

    <title>assurence</title>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 <!-- <link rel="stylesheet" href="css/bootstrap.min.css">-->
  <link rel="stylesheet" href="assurance1css.css">

</head>


<body>
 <div>
  <form method="POST">
<div class="button">
  <img src="lll.jpg" class="rounded" width="170px" height="170px">

    <button type="submit" name="suivantn" class="btn button1 " data-toggle="modal" data-target="#myModal">

      Nouveau-Client
     </button>
  
      <button type="button" class="btn button1 " data-toggle="modal" data-target="#myModal">
      Ancien Client
     </button>

</div>

 

   <!-- information de client -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
    
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Informations personnelle </h4>
          <button type="button" class="close" data-dismiss="modal">amp;times;</button>
        </div>
        <form  method="POST" class="needs-validation" novalidate>
        <!-- Modal body -->
        <div class="modal-body">
          
            <p> --------------------------------------------------------- </p>
<input type="radio" name="gender" value="male"> Mr
<input type="radio" name="gender" value="female"> Meme
<input type="radio" name="gender" value="unknown" > Melle
<p> --------------------------------------------------------- </p>
                        

  <div class="form-group">
    <label for="nauto">Nom  du client:</label>

    <input type="text" class="form-control" id="nom_client" placeholder="Entrer le Nom  du client" name="nom_client"  required >

    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>
  
  <div class="form-group">
    <label for="nauto">Prenom du client :</label>
 
    <input type="text" class="form-control" id="pernomclient" placeholder="Entrer le Prenom du client" name="pernomclient"  required >
  
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>

 <div class="form-group">
    <label for="nauto">Date de naissance :</label>

    <input type="Date" class="form-control" id="datenaiss" placeholder=" " name="datenaiss" value="<?php echo $date; ?>"
 required >
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>

  <div class="form-group">
    <label for="nauto">Lieu de naissance:</label>
 
    <input type="text" class="form-control" id="lieunaiss" placeholder="Entrer le Lieu de naissance" name="lieunaiss"  required >
 
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>



 <div class="form-group">
    <label for="nauto">Commune du client:</label>
    
    <input type="text" class="form-control" id="commune" placeholder="Entrer la Commune du client" name="commune"  required >
 
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>

  <div class="form-group">
    <label for="nauto">Daira du client:</label>
 
    <input type="text" class="form-control" id="daira" placeholder="Entrer la Daira du client" name="daira"  required >
  
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>

  <div class="form-group">
    <label for="nauto">Willaya du client:</label>
   
    <input type="text" class="form-control" id="wilaya" placeholder="Entrer la Willaya du client" name="wilaya"  required >
 
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>

  <div class="form-group">
    <label for="nauto">Sa proffesion:</label>
   
    <input type="text" class="form-control" id="proffesion" placeholder="Entrer Sa proffesion" name="proffesion"  required >
 
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>


<script>
// Disable form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Get the forms we want to add validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('a été validé');
      }, false);
    });
  }, false);
})();
</script>
        </div>
       
        <!-- Modal footer -->
        <div class="modal-footer">
            <h4 class="modal-title text-left "> .</h4>
          <button type="button" class="btn btn-primary"  name="suivant1"  data-toggle="modal" data-dismiss="modal" data-target="#myModal2">Suivant</button>
        </div>
    </form>
      </div>
    </div>
  </div>




  <!-- Permis -->
  <div class="modal" id="myModal2">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Permis :</h4>
          <button type="button" class="close" data-dismiss="modal">amp;times;</button>
        </div>
      <form method="POST" class="needs-validation" novalidate>
        <!-- Modal body -->
        
        <div class="modal-body">
          
                        

  <div class="form-group">
    <label for="nauto">NUM-Permi:</label>
    <input type="number" class="form-control" id="numpermis" placeholder="Entrer le NUM-Permi" name="numpermis"  required >
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>
  
  <div class="form-group">
    <label for="nauto">Date Obtention :</label>
    <input type="Date" class="form-control" id="dateobt" placeholder=" " name="dateobt"   required >
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>


    
  
 <div class="form-group">
    <label for="nauto">Deliver le :</label>
    <input type="Date" class="form-control" id="delivre" placeholder=" " name="delivre"  required="" >
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>

<div>
  <p><u><strong> Permis Categorie</strong></u> </p>
<select >
            <option id="one"><strong>Type A </strong></option>
            <option id="two"><strong>Type B </strong></option>
            <option id="three"><strong>Type C </strong></option>
        </select>



</div>





<script>
// Disable form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Get the forms we want to add validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('a été validé');
      }, false);
    });
  }, false);
})();
</script>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <h4 class="modal-title text-left "> .</h4>
          <button type="button" class="btn btn-primary"  name="suivant2" data-toggle="modal" data-dismiss="modal" data-target="#myModal3">Suivant</button>
        </div>
        </form>
      </div>
    </div>
  </div>


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




        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Durée :</h4>
          <button type="button" class="close" data-dismiss="modal">amp;times;</button>

        </div>
         <form  method="POST" class="needs-validation" novalidate>
        <!-- Modal body -->
        <div class="modal-body">

         
                    

  <div class="form-group">
    <label for="nauto">Durée :</label>
    <select onclick="modal1()" id="durée">
  <option value="volvo">3mois</option>
  <option value="saab">6mois</option>
  <option value="mercedes">12mois</option>
  
</select>


<div class="form-group">
    <label for="nauto">Effet:</label>
    <input type="text" class="form-control" id="effet" name="effet"  required readonly>
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>

  <div class="form-group">
    <label for="nauto">Expiration</label>
    <input type="text" class="form-control" id="expiration"  name="expiration"  required readonly >
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>
</div>




<script>
// Disable form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Get the forms we want to add validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('a été validé');
      }, false);
    });
  }, false);
})();
</script>

 </div>

        
        <!-- Modal footer -->
        <div class="modal-footer">
          <h4 class="modal-title text-left "> .</h4>
          <button type="button" class="btn btn-primary" name="suivant3" data-toggle="modal" data-dismiss="modal" data-target="#myModal4" >Suivant</button>
        </div>
        </form>
      </div>
    </div>
  </div>

<div class="modal" id="myModal4">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Information de voiture:</h4>
          <button type="button" class="close" data-dismiss="modal">amp;times;</button>

        </div>
        
        <!-- Modal body -->
        <form  method="POST" class="needs-validation" novalidate>

            <div class="modal-body">
          
                    

  <div class="form-group">
    <label for="nauto">NUM-dans la serie du type :</label>
    <input type="number" class="form-control" id="numserie" placeholder="Entrer NUM-dans la serie du type " name="numserie"  required >
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>
  
  <div class="form-group">
    <label for="nauto">Type :</label>
    <input type="number" class="form-control" id="typevoi" placeholder="Entrer type d voiture" name="typevoi"  required >
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>
   <div class="form-group">
    <label for="nauto">Marque :</label>
    <input type="text" class="form-control" id="marque" placeholder="Entrer la marque " name="marque"  required >
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>
   <div class="form-group">
    <label for="nauto">Aces assise:</label>
    <input type="number" class="form-control" id="acesass" placeholder="Entrer nmbr d places" name="acesass"  required >
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>
   <div class="form-group">
    <label for="nauto">Energie:</label>
    <select >
            <option id="ess" value="Ess"><strong>Ess</strong></option>
            <option id="gaz" value="Gaz"><strong>Gaz</strong></option>
            <option id="dsl" value="Dsl"><strong>Dsl</strong></option>
        </select>

  </div>
  <div class="form-group">
    <label for="nauto">Num d'immatriculation:</label>
    <input type="number" class="form-control" id="immatricul" placeholder="Entrer Num d'immatriculation" name="immatricul"  required >
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>


<script>
// Disable form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Get the forms we want to add validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('a été validé');
      }, false);
    });
  }, false);
})();
</script>
</div>
<!-- Modal footer -->

        <div class="modal-footer">
         

          <h4 class="modal-title text-left "> .</h4>
          
          <button type="submit" class="btn btn-success"  onclick="post()" name="enregistrer">Enregistrer</button>
         
        </div>

        </form>

        

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

<script>
function modal1() {
  var select=document.getElementById('durée');
  var strUser = select.options[select.selectedIndex].value;
  if(strUser=="volvo"){
    document.getElementById("eff").defaultValue = "<?php echo $date;?>";
document.getElementById("exp").defaultValue = "<?php echo $date3;?>";
}
else if(strUser=="saab"){
  document.getElementById("eff").defaultValue = "<?php echo $date;?>";
document.getElementById("exp").defaultValue = "<?php echo $date6;?>";
}
else if(strUser=="mercedes"){
  document.getElementById("eff").defaultValue = "<?php echo $date;?>";
document.getElementById("exp").defaultValue = "<?php echo $date12;?>";
}
}


}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


</form>
</div>

</body>

</html>

я пытался добавить этот ajax-скрипт, но он не сработал:

 <script>
$('#myModal1 form, #myModal2 form, #myModal3 form, #myModal4 form').submit(function() {

        $.ajax({
            url  : 'test.php',
            type : 'POST',
            data : $('#myModal1 form, #myModal2 form, #myModal3 form, #myModal4 form').serialize(),
            success : function() {
                window.location = '';
            }
        });
        return false;
    });
    </script>

1. Нет причин, по которым вы не можете обрабатывать несколько отдельных отправлений форм на одной странице, не прибегая к Ajax. Это не значит, что Ajax не улучшит ситуацию (при условии, что у ваших пользователей включен Javascript), но это не обязательно. Что касается остального, пожалуйста, сузьте код до проблемных областей, там слишком много всего, через что нужно пройти. Попробуйте завершить PHP, а затем спросите о любых конкретных проблемах, которые у вас есть, вместо того, чтобы просить кого-то завершить это за вас.

2. @droopsnoot я не хочу заставлять других завершать код, я просто ищу, есть ли способ отправить все формы на одной странице с помощью ajax-скрипта

Ответ №1:

Если я вас правильно понимаю, вы хотите, чтобы все (или несколько) форм на странице отправлялись одновременно? Вот упрощенный JSFiddle, показывающий, как это можно сделать.

Создайте button вне ваших форм, которая запускает submit_all() функцию. submit_all() собирает каждую форму на странице, затем запускает их через вашу AJAX-функцию. Вы можете легко изменить это, чтобы оно работало только для определенных форм на странице, используя классы или ключи данных.

Однако я бы сказал, что такой подход — плохая идея. Если у вас на странице есть несколько форм, которые необходимо отправлять вместе, было бы лучше объединить эти формы в единую форму. По крайней мере, он сохранит информацию, которая должна храниться вместе, вместе и избавит вас от некоторых организационных проблем.

В вашем случае вы могли бы создать одну большую форму и использовать Javascript, чтобы разделить ее на 4 группы, заменив множественные отправки кнопками next для отображения следующей группы входных данных.

Лично я бы полностью пропустил модальный подход и показал всю форму на ее собственной странице. Как пользователю, было бы неплохо знать заранее, что этот веб-сайт хочет получить от меня так много информации. Заполнение длинной формы только для того, чтобы была показана другая форма, и еще одна, и еще одна… Это, скорее всего, приведет к разочарованию.

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Регистрировать плотные обратные вызовы dash после app.run_server() без необходимости перезагрузки веб-страницы?

Ошибка при сборке apk с помощью gradlew assembleRelease

HTML.Выпадающий список для назначения класса