我有一个用作订阅表单的html表单。表单通过POST方法发送到PHP文件进行处理和数据库输入。表单验证通过JavaScript完成。
我不想重定向到PHP文件，我想保留我的表单样式。也就是说，当用户点击SUBMIT按钮时，表单会动画并在页面上显示成功消息，而无需重新加载或发送到php文件。
我已经单独测试了PHP文件并且工作正常，在mySQL数据库表中按预期编写。 JavaScript验证文件也可以自行运行。问题是，当单击“提交”按钮时，在所有必填字段都有效后，表单会动画，就好像数据已成功发送，但没有数据写入我的数据库。我尝试在JavaScript代码的不同位置插入不同格式的AJAX，但没有任何效果。
JS验证文件链接到HTML文件中的via。 PHP文件通过Form Action =＆＃34;＆＃34;链接到属性。
当我在HTML中使用以下脚本以及form.js的链接时：
<script type="text/javascript">
$("#submitBtn").click(function() {
var dataString = $('#register').serialize();
$.ajax({
type: "POST",
url: "contact/validate.php",
data: dataString
});
});
</script>
它确实有效 - 表单按预期动画，没有重定向到PHP文件，表单数据被写入数据库，但这会产生dublicate条目，并且还允许将无效条目写入数据库，尽管输入字段上的JavaScript启动的错误消息。
这是我的HTML表单：
<div id="contactForm" class="contactForm">
<div id="formHeader" class="formHeader">
<h2 id="message">Форма за регистрация</h2>
</div>
<div id="formBody" class="formBody">
<form action="contact/validate.php" method="POST" name="contactForm" id="register">
<div class="row">
<div class="inputContainer hlf">
<input name="fullname" id="fullname" type="text" placeholder="Вашето име" minlength="2" maxlength="40" required tabindex="1">
</div>
<div class="inputContainer hlf">
<input name="location" id="location" type="text" placeholder="Населено място" minlength="5" maxlength="40" required tabindex="2">
</div>
</div>
<div class="row">
<div class="inputContainer hlf">
<input name="email" id="email" type="email" placeholder="Ваш имейл за контакт" maxlength="75" required tabindex="3">
</div>
<div class="inputContainer hlf">
<input name="phone" id="phone" type="tel" placeholder="Телефон" pattern="[0-9 ]" maxlength="15" tabindex="4">
</div>
</div>
<div class="row">
<div class="inputContainer">
<textarea name="comment" id="comment" rows="4" placeholder="Допълнителен коментар" minlength="5" maxlength="250" tabindex="5"></textarea>
</div></div>
<input id="submitBtn" class="submitBtn" type="submit" value="Изпрати">
</form>
</div>
这是我的PHP文件：
<?php
//Clean form data from backslashes and evil tags
//define variables and set to empty values
$fullname = $location = $email = $phone = $comment = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$fullname = test_input($_POST["fullname"]);
$location = test_input($_POST["location"]);
$email = test_input($_POST["email"]);
$phone = test_input($_POST["phone"]);
$comment = test_input($_POST["comment"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
//All input is tested and validated, now connect to DB and send data to the mySQL database table:
$servername = "localhost";
$username = "usename";
$password = "password";
$dbname = "database name";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO subscribed (fullname, location, email, phone, comment)
VALUES ('$fullname', '$location', '$email', '$phone', '$comment')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
最后，这是我的JavaScript验证文件：
$(function() {
"use strict";
var //GLOBAL VARIABLES
input,
container,
//CSS CLASSES
classSuccess = "success",
classError = "error",
//FORM VALIDATOR
formValidator = {
init: function() {
this.cacheDom();
this.bindEvents();
},
cacheDom: function() {
//MAIN PARENT ELEMENT
this.contactForm = document.getElementById("contactForm");
//MAIN FORM ELEMENTS
this.formHeader = document.querySelector("#formHeader h2");
this.formBody = document.getElementById("formBody");
this.inputContainer = document.getElementsByClassName("inputContainer");
//USER INPUT ELEMENTS
//INPUT FIELDS
this.fields = {
fullname: document.getElementById("fullname"),
location: document.getElementById("location"),
email: document.getElementById("email")
};
this.submitBtn = document.getElementById("submitBtn");
},
bindEvents: function() {
var i;
//RUN RULES ON SUBMIT BUTTON CLICK
this.submitBtn.onclick = this.runRules.bind(this);
//BIND EVENTS TO EACH INPUT FIELD
for (i in this.fields) {
if (this.fields.hasOwnProperty(i)) {
//VARIABLES
input = this.fields[i];
container = input.parentElement;
//RUN RULES WHEN INPUT HAS FOCUS
input.onfocus = this.runRules.bind(this);
//RESET ERRORS WHEN CONTAINER IS CLICKED
container.onclick = this.resetErrors.bind(this, input);
}
}
},
runRules: function(evnt) {
var target = evnt.target,
type = evnt.type;
//IF EVENT ON SUBMIT BUTTON
if (target === this.submitBtn) {
//PREVENT FORM SUBMITTION
this.preventDefault(evnt);
//IF INPUT HAS FOCUS
} else if (type === "focus") {
//RESET CLASSLIST
this.resetClassList(target.parentElement);
//RESET ERRORS
this.resetErrors(target);
return false;
}
//RESET CLASSLIST
this.resetClassList();
//CHECK FIELDS
this.checkFields();
},
preventDefault: function(evnt) {
//PREVENT DEFUALT
evnt.preventDefault();
},
checkFields: function() {
var i,
validCount = 0,
//EMAIL FILTER
filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
//CYLCE THROUGH INPUTS
for (i in this.fields) {
if (this.fields.hasOwnProperty(i)) {
input = this.fields[i];
//CHECK IF FIELD IS EMPTY
if (input.value === "") {
//ADD ERROR CLASS
this.addClass(input, classError);
//CHECK IF EMAIL IS VALID
} else if (i === "email" && !filter.test(input.value)) {
//ADD ERROR CLASS
this.addClass(input, classError);
} else {
//FIELD IS VALID
this.addClass(input, classSuccess);
validCount += 1;
}
}
}
//IF ALL FIELDS ARE VALID
if (validCount === 3) {
//SUBMIT FORM
this.submitForm();
}
},
addClass: function(input, clss) {
container = input.parentElement;
//IF INPUT HAS ERROR
if (clss === classError) {
//SHOW ERROR MESSAGE
this.errorMessage(input);
}
//ADD CLASS
input.parentElement.classList.add(clss);
},
errorMessage: function(input) {
var message;
//IF NAME HAS ERROR
if (input === this.fields.fullname) {
message = "Моля, въведете пълно име";
//ELSE IF LOCATION HAS ERROR
} else if (input === this.fields.location) {
message = "Моля, въведете град/село";
//ELSE IF USEREMAIL HAS ERROR
} else if (input === this.fields.email) {
message = "Има грешка в имейла";
}
this.renderError(input, message);
},
renderError: function(input, message) {
var html;
//GET INPUT CONTAINER
container = input.parentElement;
//RENDER HTML
html = document.createElement("div");
html.setAttribute("class", "message");
html.innerHTML = message;
//IF MESSAGE ELEMENT DOESN'T EXIST
if (!container.getElementsByClassName("message")[0]) {
//INSERT MESSAGE TO INPUT CONTAINER
container.insertBefore(html, container.firstElementChild);
}
},
resetClassList: function(input) {
var i;
//IF TARGETING SPECIFIC INPUT
if (input) {
//GET INPUT CONTAINER
container = input.parentElement;
//REMOVE CLASSES
container.classList.remove(classError, classSuccess);
//FOCUS ON INPUT FIELD
input.focus();
} else {
for (i in this.fields) {
if (this.fields.hasOwnProperty(i)) {
//REMOVE CLASSES FROM ALL FIELDS
this.fields[i].parentElement.classList.remove(classError, classSuccess);
}
}
}
},
resetErrors: function(input) {
//GET INPUT CONTAINER
container = input.parentElement;
//IF CONTAINER CONTAINS ERROR
if (container.classList.contains(classError)) {
//RESET CLASSES
this.resetClassList(input);
}
},
submitForm: function() {
var waitForAnimation;
//ADD SUCCESS CLASS
this.contactForm.classList.add(classSuccess);
//WAIT FOR ANIMATION TO FINISH
this.changeHeader("Регистрацията е успешна!");
//WAIT FOR ANIMATION TO FINISH
setTimeout(this.changeHeader.bind(this, "ДОБРЕ ДОШЛИ!"), 1800);
},
changeHeader: function(text) {
//CHANGE HEADER TEXT
this.formHeader.innerHTML = text;
}
};
//INITIATE FORM VALIDATOR
formValidator.init();
}());
答案 0 :(得分：-1)
command.CommandText = "insert into Payment (payment_name, payment_ccNo,
payment_ccType, payment_ccCode, payment_expDate, payment_price,
payment_optionPay, payment_date, reg_id)
values (@payment_name, @payment_ccNo, @payment_ccType, @payment_ccCode,
@payment_expDate, @payment_price, @payment_optionPay,
@payment_date, @reg_id)";
command.Parameters.AddWithValue("@payment_ccNo", sc.CreditCard);
command.Parameters.AddWithValue("@payment_ccType", sc.CreditCardType);
command.Parameters.AddWithValue("@payment_ccType", sc.CreditCardType);
command.Parameters.AddWithValue("@payment_ccCode", sc.SecurityCode);
command.Parameters.AddWithValue("@payment_expDate", sc.CCExpiryDate);
command.Parameters.AddWithValue("@payment_price", sc.TotalAmount);
command.Parameters.AddWithValue("@payment_optionPay", sc.OptionPay);
command.Parameters.AddWithValue("@reg_id", sc.Registration.RegId);