我有一个表格,如果不刷新页面,我不想提交。我不想从这个表格中得到结果并在同一页面中使用它。
表单在我的客户表中添加了一行,所以我想做的是获取这个插入行的 ID 并在同一页面中使用它。
我遇到的问题是我的jquery代码不起作用,我想我的$.post(..)部分有问题,但我似乎无法弄清楚它是什么。
网页代码:
<form id='FormAjoutNewClient' class="form-style-9">
<img class="PointerCursor CloseNouveauClient" width="16" src="#">
<h2 class='titelAJoutNwClient' >New Client </h2>
<ul>
<li>
<input type="text" name="NomNouveauClient" class="field-style field-split align-left requiNouveauClient NomNouveauClient" placeholder="Nom" />
<input type="text" name="PrenomNouveauClient" class="field-style field-split align-right requiNouveauClient PrenomNouveauClient" placeholder="Prenom" />
</li>
<li>
<input type="email" name="EmailNouveauClient" class="field-style field-split align-left requiNouveauClient EmailNouveauClient" placeholder="Email" />
<input type="number" name="TelNouveauClient" class="field-style field-split align-right requiNouveauClient TelNouveauClient" placeholder="Telephone" />
</li>
<li>
<input type="text" name="EntrepriseNouveauClient" class="field-style field-full align-none requiNouveauClient EntrepriseNouveauClient" placeholder="Entreprise..." />
</li>
<li>
<input type="text" name="AdrssLine1NouveauClient" class="field-style field-full align-none requiNouveauClient AdrssLine1NouveauClient" placeholder="Adresse Ligne 1" />
</li>
<li>
<input type="text" name="AdrssLine2NouveauClient" class="field-style field-full align-none AdrssLine2NouveauClient" placeholder="Adresse Ligne 2" />
</li>
<li>
<input type="number" name="CodePostalNouveauClient" class="field-style field-split align-left requiNouveauClient CodePostalNouveauClient" placeholder="Code Postal" />
<input type="text" name="VilleNouveauClient" class="field-style field-split align-right requiNouveauClient VilleNouveauClient" placeholder="ville" />
</li>
<!-- Bouton Ajouter Nouveau Client -->
<li>
<center><input type="button" name='AjoutClient' class='AjoutNewClient' value="Ajouter client" /></center>
</li>
</ul>
</form>
我的 JQuery 代码:
$('body').on('click', '.AjoutNewClient', function(event) {
var EmailNCF = $(".EmailNouveauClient").val();
var TelNCF = $(".TelNouveauClient").val();
if (EmailNCF == '' || TelNCF == '' ) {
alert("please fill all required fields");
}
else {
$.post("../formsTraitements/FormAddClient.php", {
EmailNC: EmailNCF,
TelNC: TelNCF
}, function(data) {
alert(data);
$('#FormAjoutNewClient').reset(); // To reset form fields
});
}
我的php代码非常简单:
$EmailNC = $_POST['EmailNC'];
$TelNC = $_POST['TelNC'];
$query = mysqli_query(" INSERT INTO MyTable VALUES ('$EmailNC','$TelNC')");
if($query){
echo "added.";
}
mysql_close($connexion);
我还没有尝试过,但试试这个:
$.post("../formsTraitements/FormAddClient.php", {
EmailNC: EmailNCF,
TelNC: TelNCF
}, function(data) {
alert(data);
$('#FormAjoutNewClient').reset(); // To reset form fields
});
只需在函数(数据)之前添加","并更改电子邮件NCF参数的名称
编辑
我试过这个:
网页代码 :
<form id='FormAjoutNewClient' class="form-style-9">
<img class="PointerCursor CloseNouveauClient" width="16" src="#">
<h2 class='titelAJoutNwClient' >New Client </h2>
<ul>
<li>
<input type="text" name="NomNouveauClient" class="field-style field-split align-left requiNouveauClient NomNouveauClient" placeholder="Nom" />
<input type="text" name="PrenomNouveauClient" class="field-style field-split align-right requiNouveauClient PrenomNouveauClient" placeholder="Prenom" />
</li>
<li>
<input type="email" name="EmailNouveauClient" class="field-style field-split align-left requiNouveauClient EmailNouveauClient" placeholder="Email" />
<input type="number" name="TelNouveauClient" class="field-style field-split align-right requiNouveauClient TelNouveauClient" placeholder="Telephone" />
</li>
<li>
<input type="text" name="EntrepriseNouveauClient" class="field-style field-full align-none requiNouveauClient EntrepriseNouveauClient" placeholder="Entreprise..." />
</li>
<li>
<input type="text" name="AdrssLine1NouveauClient" class="field-style field-full align-none requiNouveauClient AdrssLine1NouveauClient" placeholder="Adresse Ligne 1" />
</li>
<li>
<input type="text" name="AdrssLine2NouveauClient" class="field-style field-full align-none AdrssLine2NouveauClient" placeholder="Adresse Ligne 2" />
</li>
<li>
<input type="number" name="CodePostalNouveauClient" class="field-style field-split align-left requiNouveauClient CodePostalNouveauClient" placeholder="Code Postal" />
<input type="text" name="VilleNouveauClient" class="field-style field-split align-right requiNouveauClient VilleNouveauClient" placeholder="ville" />
</li>
<!-- Bouton Ajouter Nouveau Client -->
<li>
<center><input type="button" name='AjoutClient' class='AjoutNewClient' value="Ajouter client" /></center>
</li>
</ul>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$('body').on('click', '.AjoutNewClient', function(event) {
var EmailNCF = $(".EmailNouveauClient").val();
var TelNCF = $(".TelNouveauClient").val();
if (EmailNCF == '' || TelNCF == '' ) {
alert("please fill all required fields");
}
else {
$.post("../formsTraitements/FormAddClient.php", {
EmailNC: EmailNCF,
TelNC: TelNCF
}, function(data) {
alert(data);
});
}
});
</script>
PHP代码
<?php
header("Access-Control-Allow-Origin: *");
var_dump($_POST);
$EmailNC = $_POST['EmailNC'];
$TelNC = $_POST['TelNC'];
$sql = " INSERT INTO MyTable VALUES ('$EmailNC','$TelNC')"
/*
$query = mysqli_query(" INSERT INTO MyTable VALUES ('$EmailNC','$TelNC')");
if($query){
echo "added.";
}
mysql_close($connexion);*/
我在我的 php 代码中接收数据。因此,请尝试使用它,看看它是否有效。