我在由 AJAX 呼叫處理的表單上插入和更新時遇到問題。如果填寫了必填欄位（HTML、Ajax 和 PHP），一切正常。
如果我嘗試在未填寫必填欄位的情況下提交錯誤訊息，則會按預期設定錯誤訊息，但是當我對其進行調整時，填寫并提交它，插入會被觸發兩次。
我是新手，所以有可能我在某個地方犯了一個愚蠢的錯誤，但我真的沒有看到。在此先感謝您的幫助。
以下是我使用的代碼：
HTML：
<form method="post" id="formStepVisit">
<div class="form-group updt-form col-md-4">
<label for="firstVisitDate">Datum eerste bezoek*</label>
<input id="firstVisitDate" name="firstVisitDate" type="date" value="" class="form-control">
<small id="dateHelp" class="form-text text-muted">*Datum eerste bezoek bij klant: <?php echo $Voornaam.' '.$Achternaam;?> is verplicht.</small>
</div>
<div class="form-group updt-form">
<label for="firstVisitfb">Feedback eerste bezoek*</label>
<textarea class="form-control" id="firstVisitfb" name="firstVisitfb" rows="4"></textarea>
<small id="fbHelp" class="form-text text-muted">*Feedback eerste bezoek bij klant: <?php echo $Voornaam.' '.$Achternaam;?> is verplicht.</small>
</div>
<input type="hidden" id="sid" name="sid" value="<?php echo $sid?>">
<button type="submit" id="btnFaseVisit" class="btn btn-primary">Voltooid</button>
</form>
jQuery / AJAX：
$(document).on('click', '#btnFaseVisit', function(){
if( buttonclicked = true ){
$('#formStepVisit').on('submit', function (e) {
var formData = {
visitDate: $("#firstVisitDate").val(),
fb: $("#firstVisitfb").val(),
sid: $("#sid").val()
};
$.ajax({
type: "POST",
url: "actions/processVisit.php",
data: formData,
dataType: "json",
encode: true,
}).done(function (data) {
console.log(data);
if (!data.success) {
if (data.errors.fb) {
$("#firstVisitfb").addClass("has-error");
$("#fbHelp").prepend('<div >' data.errors.fb "</div>");
}
if (data.errors.visitDate) {
$("#firstVisitDate").addClass("has-error");
$("#dateHelp").prepend('<div >' data.errors.visitDate "</div>");
}
} else {
$("#formStepVisit").html('<div >' data.message "</div>");
setTimeout(window.location.reload(true),3000);
}
});
e.preventDefault();
});
}
});
PHP：
//Set empty errors and response
$errors = [];
$data = [];
if (empty($_POST['visitDate'])) {
$errors['visitDate'] = 'Datum is verplicht';
}
if (empty($_POST['fb'])) {
$errors['fb'] = 'Feedback is required';
}
if (empty($_POST['sid'])) {
$errors['sid'] = 'Sid is required.';
}
//Sanitation
$visitDate = preg_replace("([^0-9/])", "", $_POST['visitdate']);
$visitDate = date("Y-m-d");
$fb = cleanData ( $_POST['fb'] );
$sid = cleanData ( $_POST['sid'] );
$stepComplete = true;
if (!empty($errors)) {
$data['success'] = false;
$data['errors'] = $errors;
} else {
$sql = "UPDATE laadpalen SET visitDate = ?, visitFB = ?, faseVisitComp =?, fase='offerte' WHERE sid=?";
if($stmt = mysqli_prepare($con, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "ssis", $visitDate, $fb, $stepComplete, $sid);
if(mysqli_stmt_execute($stmt)){
$data['success'] = true;
$data['message'] = 'Update Succesvol! U wordt omgeleid in <span id="seconden">3</span> ';
}
}
$sql2 = "INSERT INTO laadpalenSteps (sid, datum, fase, feedback) VALUES (?, NOW(),? , ?)";
$fase = "bezoek";
if($stmt = mysqli_prepare($con, $sql2)){
mysqli_stmt_bind_param($stmt, "sss", $sid, $fase, $fb);
mysqli_stmt_execute($stmt);
}
}
echo json_encode($data);
?>
uj5u.com熱心網友回復：
你為什么用$(document).on？？？
它確實提交了兩次，因為您呼叫了兩次 ajax 方法！！！！！！
你真的需要重構你的代碼！
首先，您的 html 應該是這樣的：在這種情況下，您不需要使用表單。
<div>
<div class="form-group updt-form col-md-4">
<label for="firstVisitDate">Datum eerste bezoek*</label>
<input id="firstVisitDate" name="firstVisitDate" type="date" value="" class="form-control">
<small id="dateHelp" class="form-text text-muted">*Datum eerste bezoek bij klant: <?php echo $Voornaam.' '.$Achternaam;?> is verplicht.</small>
</div>
<div class="form-group updt-form">
<label for="firstVisitfb">Feedback eerste bezoek*</label>
<textarea class="form-control" id="firstVisitfb" name="firstVisitfb" rows="4"></textarea>
<small id="fbHelp" class="form-text text-muted">*Feedback eerste bezoek bij klant: <?php echo $Voornaam.' '.$Achternaam;?> is verplicht.</small>
</div>
<input type="hidden" id="sid" name="sid" value="<?php echo $sid?>">
<button type="submit" id="btnFaseVisit" class="btn btn-primary">Voltooid</button>
</div>
在您的 JS 代碼中，您應該在不使用時驗證您的空輸入不在表單中！
$(function() {
$('#btnFaseVisit').on('click', function (e) {
var formData = {
visitDate: $("#firstVisitDate").val(),
fb: $("#firstVisitfb").val(),
sid: $("#sid").val()
};
$.ajax({
type: "POST",
url: "actions/processVisit.php",
data: formData,
dataType: "json",
encode: true,
}).done(function (data) {
console.log(data);
if (!data.success) {
if (data.errors.fb) {
$("#firstVisitfb").addClass("has-error");
$("#fbHelp").prepend('<div >' data.errors.fb "</div>");
}
if (data.errors.visitDate) {
$("#firstVisitDate").addClass("has-error");
$("#dateHelp").prepend('<div >' data.errors.visitDate "</div>");
}
} else {
$("#formStepVisit").html('<div >' data.message "</div>");
setTimeout(window.location.reload(true),3000);
}
});
e.preventDefault();
});
});
uj5u.com熱心網友回復：
在已經具有 type=submit 的按鈕上呼叫提交函式是多余的。所以發生的事情是在單擊按鈕時，您的事件被呼叫并且提交函式也被呼叫。
您可以簡單地保留 .submit 功能并洗掉按鈕上的事件，但如果您想保留您的代碼，您可以嘗試在頂部添加 e.stopPropagation；
$(document).on('click', '#btnFaseVisit', function(e){
e.stopPropagation();
https://api.jquery.com/event.stopPropagation/
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/427840.html