Javascript 为多表单输入php html创建ajax脚本
我有一个包含多个表单提交的代码，提交不起作用，因为一个页面中有多个提交，我发现它需要一个ajax脚本，但其中没有即时消息，有人能给我一些提示，让我创建一个mysqli注册系统的脚本吗 1/它有4个模态id=MyModal1,2,3,4，每个模态体都有一个形式 2/php尚未完成，他的目标任务是在数据库中进行插入 3/css和javascript工作正常 代码如下：Javascript 为多表单输入php html创建ajax脚本,javascript,php,html,css,ajax,Javascript,Php,Html,Css,Ajax,我有一个包含多个表单提交的代码，提交不起作用，因为一个页面中有多个提交，我发现它需要一个ajax脚本，但其中没有即时消息，有人能给我一些提示，让我创建一个mysqli注册系统的脚本吗 1/它有4个模态id=MyModal1,2,3,4，每个模态体都有一个形式 2/php尚未完成，他的目标任务是在数据库中进行插入 3/css和javascript工作正常 代码如下： <!DOCTYPE html> <html> <head> <?php $d
<!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">×</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">×</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">×</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">×</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>
确信
新客户
古代客户
信息人员
&时代；
-------------------------------------------------------------
先生
模因
梅勒
-------------------------------------------------------------
客户名称：
瓦利德。
维列兹·雷普利尔是冠军。
Prenom du客户：
瓦利德。
维列兹·雷普利尔是冠军。
出生日期：
如果我理解正确，您希望页面上的每个（或多个）表单同时提交吗？展示如何做到这一点
在表单外部创建一个按钮，触发submit\u all（）
函数submit\u all（）
收集页面上的每个表单，然后通过AJAX函数运行这些表单。您可以使用类或数据键轻松地修改它，使其仅适用于页面上的某些表单
然而，我认为这种方法是个坏主意。如果一个页面上有多个表单必须一起发送，那么最好将这些表单合并为一个表单。至少它会将必须保存在一起的信息保存在一起，并为您节省一些组织方面的麻烦
在您的例子中，您可以使用一个大表单并使用Javascript将其拆分为4个组，用next按钮替换多个submits以显示下一组输入
就我个人而言，我会完全跳过模态方法，在它自己的页面上显示整个表单。作为一个用户，如果能提前知道这个网站需要我提供这么多的信息，那将是一件好事。填写一份冗长的表格，却被另一张表格，另一张，另一张。。。这可能会导致失望。如果我理解正确，您希望页面上的每个（或多个）表单同时提交吗？展示如何做到这一点
在表单外部创建一个按钮，触发submit\u all（）
函数submit\u all（）
收集页面上的每个表单，然后通过AJAX函数运行这些表单。您可以使用类或数据键轻松地修改它，使其仅适用于页面上的某些表单
然而，我认为这种方法是个坏主意。如果一个页面上有多个表单必须一起发送，那么最好将这些表单合并为一个表单。至少它会将必须保存在一起的信息保存在一起，并为您节省一些组织方面的麻烦
在您的例子中，您可以使用一个大表单并使用Javascript将其拆分为4个组，用next按钮替换多个submits以显示下一组输入
就我个人而言，我会完全跳过模态方法，在它自己的页面上显示整个表单。作为一个用户，如果能提前知道这个网站需要我提供这么多的信息，那将是一件好事。填写一份冗长的表格，却被另一张表格，另一张，另一张。。。这可能会导致失望。没有理由不借助Ajax就不能在同一页面上处理多个单独的表单提交。这并不是说Ajax不会让事情变得更好（只要您的用户启用了Javascript），但它不是必不可少的。至于其余的，请把代码缩小到问题区域，有太多的内容需要涉猎。尝试完成PHP，然后询问您遇到的任何具体问题，“我不想让其他人完成代码，我只是在搜索是否有办法使用ajax脚本在一个页面中提交所有表单。没有理由不使用ajax就不能在同一页面上处理多个单独的表单提交。”。这并不是说Ajax不会让事情变得更好（只要您的用户启用了Javascript），但它不是必不可少的。至于其余的，请把代码缩小到问题区域，有太多的内容需要涉猎。尝试完成PHP，然后询问您遇到的任何具体问题，而不是要求他人为您完成。@droopsnoot我不想让其他人完成代码，我只是在搜索是否有办法使用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>