javascript - php 不适用于 html 中的所有 $_POST
问题描述
我遇到了 $_POST 工作的问题（“未定义的索引”），只有最后 4 个变量继续工作，请帮忙。
求助：
1-我在那里使用 4 个模态 id's=MyModal1,2,3,4，每个模态都有自己的提交按钮。
2-最后 4 个帖子放置在最后一个模态 id=MyModal4 中，我认为因此其他 $_POSTS 不起作用（仅提交最后一个模态）。
3-每个模态体都有自己的形式
4-要充分使用，您必须填写所有字段
5-每个模态体都有自己的表单，methode=Post
我的代码：
<!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>
解决方案
您可以使用 JQuery ajax 来实现这一点。下面给出的示例代码
<!-- 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>
推荐阅读
- javascript - 如何使用一个表单 ID 制作多个切换表单？
- reactjs - Styled-components - 覆盖部分主题
- symfony - Symfony 4 应用程序与 Docker Compose 一起工作，但与 Docker Swarm 中断（没有登录，分析器损坏）
- regex - 如何从 Python 文件中提取两个子字符串之间的文本
- php - 在laravel中注册有手机号码问题的用户
- python - 如何从 odoo 在自动电子邮件中发送 word 文件
- bash - Azure Build Pipeline Bash 脚本现在可以正确设置构建变量
- java - PreparedStatement 处理/检索数据库中的 Null 值
- spring-boot - 为自定义数据源设置 hikari 池大小
- objective-c - MTKTextureLoader 混淆 PNG RGB 与 BGR 格式