Click here to Skip to main content
15,884,472 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hi Team

I am getting this error on my register js file, how do i resolve it and have included the jquery plugin library for it.

What I have tried:

JavaScript
<pre>/**
*@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');
		window.location.href = 'dashboard.php';
		} else {
		$('body').registerMessage('Registration failed', 'alert');
    }
	}
	});

  });
});

/**
<pre lang="Javascript">*@author:Gcobani Mkontwana
*@date:03/05/2023
*@Validates messages for registering users to the ecommerce_site.
*/
(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);
  };
})


<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="form-group" id="registration-messages"></div>
</div>
<!----Javascript files validation during form submission ---->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/register-messages.js"></script>
<script src="js/register.js"></script>
Posted
Updated 3-May-23 2:31am

1 solution

Your register-messages.js script is invalid. You define a function to define the registerMessage extension, but you never call it.
JavaScript
(function($) {
  $.fn.registerMessage = function(message, type) {
    ...
  };
})
Add (jQuery); to the end of that file:
JavaScript
(function($) {
  $.fn.registerMessage = function(message, type) {
    ...
  };
})(jQuery);
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900