php is not working with all $_POST in html - javascript

I have a problem where $_POST is working ("Undefined index"), only the last 4 variables that keep working, please help.
For help:
1- I'm using 4 modals there id's=MyModal1,2,3,4, each modal has his own submit button.
2- the last 4 Posts are placed in the last modal id=MyModal4 and I think because of it the other $_POSTS don't work (submit only the last modal).
3- each modal body has his own form
4- for full use you must fill all the field
5- each modal body has his own Form with methode=Post
my 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
$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'];
$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 $nom;
echo $prenom;
echo $date_naissance;
echo $lieu_naissance;
echo $commune;
echo $dayra;
echo $willaya;
echo $proffession;
echo $Num_per;
echo $date_obt;
echo $date_deliv;
echo $date_eff;
echo $date_exp;
echo $numserie;
echo $type;
echo $marque;
echo $aces_asies;
echo $num_matricul;
?>
<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">×</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="nauto" 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="dateverif" 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="datefin" 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="nauto" 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="nauto" 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="nauto" 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="nauto" 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="nauto" 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="submit" 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">×</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="nauto" 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="dateverif" 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="datefin" 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="submit" 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">×</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="eff" 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="exp" 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="submit" 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">×</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="nauto" 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="dateverif" 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="dateverif" 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="dateverif" 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="dateverif" 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" 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>
</form>
</div>
</body>
</html>


You can use JQuery ajax to achieve this. Sample code given below
<!-- include JQuery if not added already -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#myModal1 form, #myModal2 form, #myModal3 form, #myModal4 form').submit(function() {
$.ajax({
url : '',
type : 'POST',
data : $('#myModal1 form, #myModal2 form, #myModal3 form, #myModal4 form').serialize(),
success : function() {
window.location = '';
}
});
return false;
});
</script>

Related

Redirect modal form (PHP-JS-HTML5)

I try to learn frontend and backend. I create a simple login form with bootstrap modal but i have this problem. When i submit the data the modal disappear and i see the message only if i click to the button of my modal. How can i prevenent this event? Sorry for my English.
This is the code
PHP MODAL
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-content" id="modalContent">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeForm"></button>
</div>
<div class="modal-body">
<div id="errori" >
<!-- controllo sui campi lasciati vuoi !-->
<?php
if(!empty($_SESSION['errore'])){ ?>
<div class="alert alert-danger"><?=$_SESSION['errore'] ?> </div>
<?php
$_SESSION['errore']='';
}
?>
<!-- fine controllo !-->
</div>
<form action="signup.php" method="POST" id="formLogin">
<div class="mb-3">
<label for="email" class="form-label">Indirizzo email</label>
<input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">Il tuo indirizzo email</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="mb-3 form-check">
<input value="1" type="checkbox" class="form-check-input" id="remember" name="remember">
<label class="form-check-label" for="exampleCheck1">Ricordami</label>
</div>
<div class="mb-3">
<p> Non sei ancora Registrato? <a data-bs-toggle="modal" href="#regModal" data-bs-target="#regModal" onclick="clickreg()"> Clicca qui</a> per registrarti </p>
</div>
<button type="submit" id="regBtn" class="btn btn-primary">Invia</button>
</form>
</div>
<div class="modal-footer">
<!--
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
!-->
</div>
</div>
</div>
</div>
<?php include 'regModal.php'; ?>
<script>
function clickreg(){
$('#loginModal').modal("hide");
$('#regModal').modal("show");
}
</script>
<script>
$('#formLogin').on('submit', function() {
$('#loginModal').addClass('modal fade show').css('display','block');
});
</script>
SIGNUP.PHP. This part of code check if the data insert in the form are blanck and save all in a session variable named "error"
<?php
if(!isset($_SESSION))
{
session_start();
}
$errore= '';
if(empty($_POST['email'])){
$errore .= 'Email richiesta <br>';
}
if(empty($_POST['password'])){
$errore .= 'Password richiesta';
}
if(!empty($errore)){
$_SESSION['errore'] = $errore;
}

That's exactly how it should behave. If you don't want the page to reload, then you should consider using ajax.
In case you're not willing to use ajax you can show the modal when an error is detected after the form is submitted like so.
<?php if(!empty($_SESSION['errore'])){ ?>
<script>
$('#regModal').modal("show");
</script>
<?php } ?>

jquery submit function that does not work

My jQuery function does not work and I do not know where the problem comes from here is my code:
$(document).ready(function(){
console.log("document prêt !!!");
$("#f").on("submit",function(e){
recuperer_valeur_reservation();
console.log('submit f1...');
});
});
The message from my console.log is not displayed in the browser, just the first console that appears as you can see here:
message console
here is all my jquery code:
<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>
and this is my html code :
<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">×</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">×</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">×</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">×</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>
I really do not know where the mistake comes if someone wants to help me I will be really grateful and thank you in advance!

Please try to insert jQuery before your code. Does the first log entry appear?
When jQuery is implemented right, your code works for form $("#f") - that's the first form in your html part.

You need to prevent the submit if you want both to submit, but THEN what do you want to do?
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">×</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">×</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>

I found the error in the error come from the code bootstrap that one: data-target = "# payment" data-dismiss = "modal"
when I click on the button it is automatically closed without the submit send so here is the solution I found, I removed data-target = "# payment" data-dismiss = "modal" in the button and I put in my jquery code:
$(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");
});
});
thank you very much to all of you for helping me!

Modal box on submitting a form

I am trying to generate a modal box on submitting a form but when I submit it, it is not validating the required input because it's type='button'. If I replace it with 'submit' then it not showing pop-up box. And also I want to validate first and then generate pop-up. Would someone please help me out in this!
<html>
<head>
<meta name="viewport" content="width = device-width , initial-scale = 1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form>
<div class="form-group">
<label for="water">Enter Water :</label>
<input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
</div>
<div class="form-group">
<label for="compressiveStrength">Compresive Strength :</label>
<input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
</div>
<div class="form-group">
<label for="plasticViscosity">Plastic Viscosity :</label>
<input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
</div>
<div class="form-group">
<label for="fiber">Fiber Volume Fraction :</label>
<input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
</div>
<div class="form-group">
<label for="aspectRatio">Aspect Ratio :</label>
<select id="aspectRatio" class="form-control">
<option>60</option>
<option>50</option>
</select>
</div>
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg">Generate</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</html>

Simply prevent the default behaviour like this:
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
//If the form is valid open modal
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
So for your example it would be:
<html>
<head>
<meta name="viewport" content="width = device-width , initial-scale = 1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form id="form1" name="form1">
<div class="form-group">
<label for="water">Enter Water :</label>
<input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
</div>
<div class="form-group">
<label for="compressiveStrength">Compresive Strength :</label>
<input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
</div>
<div class="form-group">
<label for="plasticViscosity">Plastic Viscosity :</label>
<input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
</div>
<div class="form-group">
<label for="fiber">Fiber Volume Fraction :</label>
<input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
</div>
<div class="form-group">
<label for="aspectRatio">Aspect Ratio :</label>
<select id="aspectRatio" class="form-control">
<option>60</option>
<option>50</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-lg">Generate</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
</script>
</html>
For more information check out:
https://stackoverflow.com/a/5688798/7667467

Change your button to:
<input type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg" value="Generate">
You can add classes to any element and it will look the same

Why javascript only runs on the first record and not in others

I have a problem, i recovered data from a file using a foreach to the data in each row show a button to edit, that calls a modal window in the window that select a type of criteria and the corresponding inputs are shown, the problem is that in the first row only does and not in others.
part of the code:
if (sel2.value == "actual") {
document.getElementById("divactual").style.display = "block";
divT=document.getElementById("divnuevo");
divT.style.display = "none";
}
if(sel2.value == "nuevo"){
document.getElementById("divnuevo").style.display = "block";
divT=document.getElementById("divactual");
divT.style.display = "none";
}
if(sel2.value == "vacio"){
document.getElementById("divnuevo").style.display = "none";
divT=document.getElementById("divactual");
divT.style.display = "none";
}
}
#divnuevo, #divactual{
display: block;
}
<table class="table table-list-search table-striped table-bordered text-table">
<thead>
<tr>
<th class="text-center">Tipo de Regla</th>
<th class="text-center">Nombre Campo</th>
<th class="text-center">Nombre Regla</th>
<th class="text-center">Pos Ini</th>
<th class="text-center">Pos Fin</th>
<th class="text-center">Token</th>
<th class="text-center">Criterio</th>
<th class="text-center">Argumentos</th>
<th class="text-center">Descripción</th>
<th></th>
</tr>
</thead>
<tbody>
<c:choose>
<c:when test="${generals.size()==0}">
<td colspan="11"><h3 class="text-danger">No existen Registros de Reglas Generales en el Archivo</h3> </td>
<br/>
</c:when>
<c:otherwise>
<c:forEach items="${generals}" var="generals">
<tr>
<td>${generals.tipoRegla}</td>
<td>${generals.nomCampo}</td>
<td>${generals.nomRegla}</td>
<td>${generals.posIni}</td>
<td>${generals.posFin}</td>
<td>${generals.token}</td>
<td class="wrap"><p class="test"> ${generals.criterio} </p> </td>
<td class="wrap"><p class="test2">${generals.argumentos} </p> </td>
<td class="wrap"><p class="test"> ${generals.descrip} </p> </td>
<c:set var="salary" scope="session" value="${generals.nomRegla}"/>
<td>
<a role="button"
data-target="#Modificar_${generals.token }_${generals.tipoRegla}_${generals.nomCampo}_${generals.nomRegla}_${generals.posIni}_${generals.posFin}_${generals.criterio}"
class="btn btn-default modify" data-toggle="modal">
<span class="fa fa-pencil-square-o white"></span>
</a>
<form action="deletegeneral" method="POST">
<input type="hidden" value="${nombreArchivoReglas}" name="nombreArchivo" />
<input type="hidden" value="${generals.nomRegla}" name="dnomRegla">
<button type="submit" class="btn btn-default delete" onclick="showAlert('¿Está seguro que desea eliminar la regla \n " ${generals.nomRegla} "?',3);">
<span class="fa fa-trash-o white"></span></button>
</form>
<!--button type="button" class="btn btn-default modify" data-toggle="modal"
data-target="#Modificar2"><span class="fa fa-pencil-square-o white"></span></button-->
</td>
</tr>
<!--Para Modal de Modificacion-->
<div class="modal fade" id="Modificar_${generals.token}_${generals.tipoRegla}_${generals.nomCampo}_${generals.nomRegla}_${generals.posIni}_${generals.posFin}_${generals.criterio}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span> <span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modificar Regla</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form action="actualizargenerals" method="POST">
<input type="hidden" value="${nombreArchivoReglas}" name="nombreArchivo" >
<label for="exampleInputPassword1">Tipo Regla</label>
<input type='text' name='tipoRegla' class='form-control' id='nomCampo' readonly="readonly" placeholder=Tipo de Regla" value="${generals.tipoRegla}" required>
<label for="exampleInputPassword1">Campo</label>
<input type='text' name='nombreCampo' class='form-control' id='nomCampo' placeholder="Nombre del Campo" value="${generals.nomCampo}" required>
<label for="exampleInputPassword1">Regla</label>
<input type='text' name='nombreRegla' readonly="readonly" class='form-control' id='nombreRegla' placeholder="Nombre de la Regla" value="${generals.nomRegla}" required />
<label for="exampleInputPassword1">Inicio</label>
<input type='number' name='posIni' class='form-control' id='posInicial' placeholder="Posición Inicial" value="${generals.posIni}" required min="0" max="254" />
<label for="exampleInputPassword1">Fin</label>
<input type='number' name='posFin' class='form-control' id='posFinal' placeholder="Posición Final" value="${generals.posFin}" min="0" max="254" required>
<c:choose>
<c:when test="${generals.tipoRegla eq 'TOKEN' }">
<label for="token">Token</label>
<input type='text' name='token' class='form-control' id='token' value="${generals.token}" placeholder="Token">
</c:when>
</c:choose>
<label for="exampleInputPassword1">Argumentos</label>
<div class="row">
<select class="form-control" name="tipocriterio" onchange="changeFunc4(this);" >
<option selected value="vacio" >----------</option>
<option value="actual" >ACTUAL</option>
<option value="nuevo" >NUEVO</option>
</select>
<div id="divactual" name="divactual">
div actul no mostrara mas que el valor actual
</div>
<div id="divnuevo" name="divnuevo">
div nuevo tendra mas elementos
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
<button href="#" class="btn btnAceptar">Modificar Regla</button>
</div>
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
<button type="button" class="btn btnCancelar" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--Finaliza Modal de modifacion-->
</c:forEach>
</c:otherwise>
</c:choose>
</tbody>
</table>
ideas?

Here is an example of placing the code below the closing table tag.
</table>
<c:if test="${generals.size()!=0}">
<c:forEach items="${generals}" var="generals">
<!--Para Modal de Modificacion-->
<div class="modal fade" id="Modificar_${generals.token}_${generals.tipoRegla}_${generals.nomCampo}_${generals.nomRegla}_${generals.posIni}_${generals.posFin}_${generals.criterio}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span> <span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modificar Regla</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form action="actualizargenerals" method="POST">
<input type="hidden" value="${nombreArchivoReglas}" name="nombreArchivo" >
<label for="exampleInputPassword1">Tipo Regla</label>
<input type='text' name='tipoRegla' class='form-control' id='nomCampo' readonly="readonly" placeholder=Tipo de Regla" value="${generals.tipoRegla}" required>
<label for="exampleInputPassword1">Campo</label>
<input type='text' name='nombreCampo' class='form-control' id='nomCampo' placeholder="Nombre del Campo" value="${generals.nomCampo}" required>
<label for="exampleInputPassword1">Regla</label>
<input type='text' name='nombreRegla' readonly="readonly" class='form-control' id='nombreRegla' placeholder="Nombre de la Regla" value="${generals.nomRegla}" required />
<label for="exampleInputPassword1">Inicio</label>
<input type='number' name='posIni' class='form-control' id='posInicial' placeholder="Posición Inicial" value="${generals.posIni}" required min="0" max="254" />
<label for="exampleInputPassword1">Fin</label>
<input type='number' name='posFin' class='form-control' id='posFinal' placeholder="Posición Final" value="${generals.posFin}" min="0" max="254" required>
<c:choose>
<c:when test="${generals.tipoRegla eq 'TOKEN' }">
<label for="token">Token</label>
<input type='text' name='token' class='form-control' id='token' value="${generals.token}" placeholder="Token">
</c:when>
</c:choose>
<label for="exampleInputPassword1">Argumentos</label>
<div class="row">
<select class="form-control" name="tipocriterio" onchange="changeFunc4(this);" >
<option selected value="vacio" >----------</option>
<option value="actual" >ACTUAL</option>
<option value="nuevo" >NUEVO</option>
</select>
<div id="divactual" name="divactual">
div actul no mostrara mas que el valor actual
</div>
<div id="divnuevo" name="divnuevo">
div nuevo tendra mas elementos
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
<button href="#" class="btn btnAceptar">Modificar Regla</button>
</div>
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
<button type="button" class="btn btnCancelar" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--Finaliza Modal de modifacion-->
</c:forEach>
</c:if>
So just move the modal code and leave the rest as is.
EDIT:
Here is an example of your changeFunc4 function written in jQuery to target just the elements next to the current select box:
function changeFunc4(sel2){
var sel = $(sel2);
if (sel.val() == "actual") {
sel.siblings( ".divactual" ).show();
sel.siblings( ".divnuevo" ).hide();
}
if(sel.val() == "nuevo"){
sel.siblings( ".divnuevo" ).show();
sel.siblings( ".divactual" ).hide();
}
if(sel.val() == "vacio"){
sel.siblings( ".divnuevo" ).hide();
sel.siblings( ".divactual" ).hide();
}
}
Note, this uses css class reference so you need to update your divs to include a class. e.g.
<div id="divactual" class="divactual" name="divactual">
div actul no mostrara mas que el valor actual
</div>

Jquery .html wont load the css

Says, i write this code :
<div class="modal fade" id="addnewevent">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">
New Event
</h4>
</div>
<div class="modal-body">
<form name="newevent" id="newevent" action="" method="post">
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=date("d-m-Y",$now)?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option value="1">Normal</option>
<option value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="add" type="button">Add</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">close</button>
</div>
</div>
</div>
</div>
This will gave me result like this picture :
http://imageshack.com/a/img542/7466/okj7.png
Then, i use :
function change(id) {
$.post('ajax/change.php', {
data: id,
rand: Math.random()
},
function (html) {
$('#changeform').html(html);
$("#modalchange").modal('show');
});
}
triggered from this button :
<a class="table-actions" href="#" onClick="change('<?=$tm['id']?>');return false;"><i class="icon-pencil"></i></a>
The code for html (from change.php) is like this :
<?php
if(isset($_POST['data'])) {
$id = $_POST['data'];
$evt = mysql_query("select * from cal_event where id = '$id'");
$evt = mysql_fetch_array($evt);
$dt = explode(",",$evt['date']);
?>
<input type="hidden" value="<?=$id?>" name="uid" />
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text" value="<?=$evt['title']?>">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=$dt[2]."-".($dt[1]+1)."-".$dt[0]?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option <?=($evt['level']==1)?"selected":""?> value="1">Normal</option>
<option <?=($evt['level']==2)?"selected":""?> value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"><?=$evt['deskripsi']?></textarea>
</div>
<?php
}
?>
this is modal change
<div class="modal fade" id="modalchange">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Change Event</h4>
</div>
<div class="modal-body" >
<form name="changeform" id="changeform" action="" method="post">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="change" type="button">Change</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
but the result is different, it's give me like this :
http://imageshack.com/a/img89/3892/tpo5.png
So, how can i solve this problem?
and sorry for my bad in english.

From the picture you posted, the select element should not be just styled with css, there should be some javascript magic (which transform the select element to something else and hide the select element).
So you have to apply the javascript to the new html content again.

Categories

Resources