Hi Team
I am unable to register new users, due to this issue to my js file. How do i resolve this issue? I have the correct js library. Let me share my logic below;
// register.js
(function($) {
$.fn.registerMessage = function(message, type) {
// create a new element to display the message
var messageElem = $('<div>', {
class: 'register-messages ' + type,
text: message
});
// append the message element to the div card
$('#registration-messages').html(messageElem);
// set a timeout to remove the message element after 5 seconds
setTimeout(function() {
messageElem.remove();
}, 5000);
};
})
// html code
<div class="card">
<div class="card-body">
<form id="registration-form" action="register.php" method="POST">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="card-footer" id="registration-messages"></div>
</div>
<!----Javascript files validation during form submission ---->
<script src="js/register-messages.js"></script>
<script src="js/register.js"></script>
</body>
// register.js
/**
*@author:Gcobani Mkontwana
*@date:03/05/2023
*@Register users to the form and validate empty submission.
**/
$(document).ready(function() {
$('#registration-form').submit(function(event) {
event.preventDefault(); // prevent the form from submitting normally
var name = $('#name').val();
var email = $('#email').val();
var password = $('#password').val();
// validate the form data
if (!name || !email || !password) {
alert('Please fill in all fields');
return;
}
// submit the form data using AJAX
$.ajax({
type: 'POST',
url: 'register.php',
data: {
name: name,
email: email,
password: password
},
success: function(response) {
if (response === 'success') {
$('body').registerMessage('Registration successful', 'success');
} else {
$('body').registerMessage('Registration failed', 'alert');
}
}
});
});
});