To replace the login form with a registration form when a user clicks a link, you can use JavaScript to toggle between the two forms. Here's an example of how you can achieve this within your login popup:
```html
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Include Bootstrap JavaScript and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Your product page content -->
<button onclick="addToWishlist(123)">Add to Wishlist</button>
<!-- Login Popup -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modalContent">
<!-- Login form -->
<form id="loginForm">
<!-- Your login form fields go here -->
<a href="javascript:void(0);" onclick="toggleRegistrationForm()">Switch to Registration</a>
</form>
<!-- Registration form (hidden by default) -->
<form id="registrationForm" style="display: none;">
<!-- Your registration form fields go here -->
<a href="javascript:void(0);" onclick="toggleLoginForm()">Switch to Login</a>
</form>
</div>
</div>
</div>
</div>
<script>
function addToWishlist(product_id) {
// Check if the user is logged in (you might use a PHP session or other method)
var userLoggedIn = false; // Replace with your login check
if (userLoggedIn) {
// User is logged in, add the product to the wishlist
// Implement this part using an AJAX request to a PHP script
} else {
// User is not logged in, show the login popup
$('#loginModal').modal('show');
}
}
function toggleRegistrationForm() {
$('#modalTitle').text('Registration');
$('#loginForm').hide();
$('#registrationForm').show();
}
function toggleLoginForm() {
$('#modalTitle').text('Login');
$('#registrationForm').hide();
$('#loginForm').show();
}
</script>
</body>
</html>
```
In this code, we have two forms: a login form and a registration form, and they are initially both present but one is hidden using the `style="display: none;"` attribute. When the user clicks on the "Switch to Registration" link, the JavaScript functions `toggleRegistrationForm()` hide the login form and show the registration form, and when they click "Switch to Login," the reverse happens.
You can replace the placeholder comments with your actual form fields for both the login and registration forms.
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me