Create ajax script for multiple form input php html

user_14159659 0
Viewed 81

I have a code with multiple forms submit,the submit doesn't work because of multiple submits in one page,i found that it needs a ajax script but im noob in it,can someone give me hints to create the script to make a mysqli registration system.

1/ It has 4 Modals id=MyModal1,2,3,4,eacch modal body has a form;

2/ The php isn't complete,his target job to make insertion in database.

3/ The css and javascript are working fine

Here's the code:

<!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">&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">&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">&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">&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>

i tried to add this ajax script but it didn't work:

<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>
css html php ajax javascript
1 Answers

If I'm understanding you correctly, you want every (or multiple) forms on the page to submit at the same time? Here's a simplified JSFiddle showing how that can be done.

Make a button outside of your forms that triggers a submit_all() function. submit_all() collects each form on the page, then runs those through your AJAX function. You can easily modify this to work for only certain forms on the page using classes or data-keys.

However, I would argue that this approach is a bad idea. If you have multiple forms on a page that must be sent together, it would be better to consolidate those forms into a single form. At the very least it will keep information that must be kept together, together and save you some organizational headaches.

In your case you could have one large form and use Javascript to split it into 4 groups, replacing the multiple submits with next buttons to display the next group of inputs.

Personally I would skip the modal approach entirely and show the whole form on it's own page. As a user, it would be nice to know ahead of time that this website wants so much information from me. Filling out a lengthy form only to be shown another form, and another, and another... This will likely lead to frustration.

user_128159330
Related