Я пытаюсь опубликовать свою форму через jQuery. Это первый раз для меня. :)
Мой HTML и JS хорошо выглядит, мой код JS отправляет мне сообщение об ошибке.
Не могли бы вы мне помочь?
-
Мой HTML-код:
<form id="createAccount" action="login.php" method="post" class="default-form">
<p class="alert-message warning"><i class="ico fa fa-exclamation-circle"></i> All fields are required! <i class="fa fa-times close"></i></p>
<input class="required" type="text" id="Username" placeholder="Username">
<input class="required email" type="text" id="Email" placeholder="Email">
<input class="required" type="password" id="Password" placeholder="Password">
<input class="required" type="password" placeholder="Repeat Password">
<button type="submit" class="submit-btn button"><i class="fa fa-plus-circle"></i> Register</button>
</form>
Мой JS:
<script>
$(document).ready(function() {
$('#createAccount').on('submit', function() {
var Username = $('#Username').val();
var Email = $('#Email').val();
var Password = $('#Password').val();
if(Username == '' || Email == '' || Password == '') {
alert('Fields are empty.');
} else {
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
dataType: 'json',
success: function(json) {
if(json.reponse == 'ok') {
alert('All is good');
} else {
alert('Error : '+ json.reponse);
}
}
});
}
return false;
});
});
</script>
Мой PHP (login.php):
<?php
if(isset($_POST['Username']) && isset($_POST['Email']) && isset($_POST['Password'])) {
if(($_POST['Username'] != '') && ($_POST['Email'] != '') && ($_POST['Password'] != '')) {
$reponse = 'ok';
} else {
$reponse = 'Fields are empty.';
}
} else {
$reponse = 'Error';
}
$array['reponse'] = $reponse;
echo json_encode($array);
?>
Когда я пробую форму, отправив ее, мое предупреждение перекликается с "Ошибка".
JQuery serialize
метод, при вызове на form
элемента, будет использовать name
атрибуты полей, а не id
с. Вы можете включать атрибуты id, если хотите, но вам также нужны имена:
<form id="createAccount" action="login.php" method="post" class="default-form">
<p class="alert-message warning"><i class="ico fa fa-exclamation-circle"></i> All fields are required! <i class="fa fa-times close"></i></p>
<input class="required" type="text" id="Username" name="Username" placeholder="Username">
<input class="required email" type="text" id="Email" name="Email" placeholder="Email">
<input class="required" type="password" id="Password" name="Password" placeholder="Password">
<input class="required" type="password" name="Repeat-Password" placeholder="Repeat Password">
<button type="submit" class="submit-btn button"><i class="fa fa-plus-circle"></i> Register</button>
</form>