Я новичок в AJAX и создаю регистрационную форму, которая отправляет данные с использованием AJAX.
Я следовал руководству, которое проверяет, что поля ввода не пусты, а затем отправляет значения в файл PHP и сохраняет их в базе данных ... и это работает. Но я также пытаюсь интегрировать дополнительный скрипт, чтобы проверить, занято ли имя пользователя.
Если я использую -only- скрипт для проверки доступности имени пользователя, без учебника, он работает как шарм. Но проблема в том, когда я пытаюсь объединить оба сценария.
Может ли кто-нибудь помочь мне, указав на мои ошибки? Я перепробовал много вещей, и они заставляют работать только части всего сценария, но не все.
Вот модель учебного рабочего скрипта:
$(function() {
$('.error').hide();
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
Вот мой рабочий код проверки имени пользователя:
$(function() {
$('.error').hide();
$(".button").click(function() {
$('.error').hide();
// validate and process form here
var checkdata = username ['value'];
//alert ("usuario guardado =" + checkdata);
$.get("usernameCheck.php", { username: checkdata },
function(data){
//alert("Data Loaded: " + data);
if ( data == 0 )
{
$("label#misuser_error").show();
$("input#username").focus();
return false;
}
});
return false;
});
});
И вот моя попытка объединить оба:
$(function () {
$('.error').hide();
$(".button").click(function () {
$('.error').hide();
// validate and process form here
var flag = 1;
var username = $("#username").val();
var password = $(" #password").val();
var passwordC = $(" #password_confirm").val();
var type = $(" #type").val();
var name = $("#firstname").val();
var lastname = $(" #lastname").val();
var day = $(" #bdate_day").val();
var month = $(" #bdate_month").val();
var year = $(" #bdate_year").val();
var email = $(" #email").val();
var country = $(" #country").val();
var state = $(" #state").val();
var city = $(" #city").val();
var payment_email = $(" #payment_email").val();
if (username == "") {
$("#username_error").show();
$("#username").focus();
return false;
}
else {
if (password == "") {
$(" #password_error").show();
$(" #password").focus();
return false;
}
else {
if (passwordC == "") {
$(" #password_confirm_error").show();
$(" #password_confirm").focus();
return false;
}
else {
if ( password != passwordC ) {
$(" #password_mismatch_error").show();
$("#password_confirm").focus();
return false;
}
else {
if (type == "") {
$(" #type_error").show();
$(" #type").focus();
return false;
}
else {
if (name == "") {
$("#firstname_error").show();
$("#firstname").focus();
return false;
}
else {
if (lastname == "") {
$(" #lastname_error").show();
$(" #lastname").focus();
return false;
}
else {
if (day == "") {
$(" #bdate_day_error").show();
$(" #bdate_day").focus();
return false;
}
else {
if (month == "") {
$(" #bdate_month_error").show();
$(" #bdate_month").focus();
return false;
}
else {
if (year == "") {
$(" #bdate_year_error").show();
$(" #bdate_year").focus();
return false;
}
else {
if (email == "") {
$(" #email_error").show();
$(" #email").focus();
return false;
}
else {
if (state == "") {
$("#state_error").show();
$(" #state").focus();
return false;
}
else {
if (city == "") {
$("#city_error").show();
$(" #city").focus();
return false;
}
else {
if (payment_email == "") {
$("#payment_email_error").show();
$(" #payment_email").focus();
return false;
}
else {
var flag = 1;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
if (flag === 1) {
var checkdata = document.getElementById('username').value;
//alert ("usuario guardado =" + checkdata);
$.get("usernameCheck.php", { username: checkdata },
function(data){
//alert("Data Loaded: " + data);
if (data === 0) {
$("label#misuser_error").show();
$("input#username").focus();
return false;
}
});
}
(function (save) {
//alert ("usuario guardado: " + checkdata);
$.get("insert_user.php", { username: checkdata },
function(sent){
('#userForm').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
});
return false;
});
});
});
Есть какие-нибудь мысли, кто-нибудь?
Я знаю, что могу делать все неправильно, но я изучаю PHP / Javascript и AJAX только на уроках. Так что помилуй меня.
Заранее большое спасибо за помощь.