it was working on localhost:8000/login but not on localhost:8000 after this change its not working at all
yes it will be working on /login before because that’s what your login view is rendering but not opening the Modal which you want
how do i get it to open the modal ?
Share your code like this so that it will get formatted well, I’m sharing a screenshot of how to paste the code so it will be shared correctly.
{% include 'base.html' %}
{% load static %}
{% load socialaccount %}
<div class="modal fade" id="register" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="login_center">
<a href="/">
<img src="{% static 'images/logo.png' %}" alt="icon" />
</a>
<br>
<h>Sign up your new Account.<h>
</div>
<form method="POST" action="{% url 'register' %}" class="form auth__form">
{% csrf_token %}
<div id="reg1" style="display: flex;" class="form__field">
<div class = "field">
<label for="formInput#text">{{form.first_name.label}}</label>
{{form.first_name}}
{% for error in form.first_name.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<div class = "field">
<label for="formInput#text">{{form.last_name.label}}</label>
{{form.last_name}}
{% for error in form.last_name.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<div class = "field">
<label for="formInput#text">{{form.mobile.label}}</label>
{{form.mobile}}
{% for error in form.mobile.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<div class = "field">
<label for="formInput#text">{{form.email.label}}</label>
{{form.email}}
{% for error in form.email.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<br>
</div>
</div>
<div class="modal-footer">
<input type="button" class="ovalbtn" data-bs-target="#register2" data-bs-toggle="modal" value="Continue"/>
</div>
</div>
</div>
</div>
<div class="modal fade" id="register2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<i data-bs-target="#register" class="fa-solid fa-angle-left" data-bs-toggle="modal"></i>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="login_center">
<a href="/">
<img src="{% static 'images/logo.png' %}" alt="icon" />
</a>
<br>
<h>Sign up your new Account.<h>
</div>
<div class = "login_textbox1">
<label for="formInput#text">{{form.username.label}}</label>
{{form.username}}
{% for error in form.username.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<br><br>
<div class = "login_textbox1">
<label for="formInput#text">{{form.password1.label}}</label>
{{form.password1}}
{% for error in form.password1.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<br><br>
<div class = "login_textbox1">
<label for="formInput#text">Confirm Password</label>
{{form.password2}}
{% for error in form.password2.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
</div>
<div class="modal-footer">
<button type="button" class="ovalbtn" data-bs-target="#register3" data-bs-toggle="modal">Continue</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="register3" aria-hidden="true" aria-labelledby="exampleModalToggleLabel3" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<i data-bs-target="#register2" class="fa-solid fa-angle-left" data-bs-toggle="modal"></i>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="login_center">
<a href="/">
<img src="{% static 'images/logo.png' %}" alt="icon" />
</a>
<br>
<h>Select your country and city of residence.<h>
</div>
<div class = "login_textbox1">
<label for="formInput#text">{{form.country.label}}</label>
{{form.country}}
{% for error in form.country.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<br><br>
<div class = "login_textbox1">
<label for="formInput#text">{{form.city.label}}</label>
{{form.city}}
{% for error in form.city.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<br><br><br>
<label class="login_label" for="stay"><input type="checkbox" id="stay" name="stay" unchecked />I agree with <a class='href' data-bs-target="#register3" data-bs-toggle="modal">Terms and Conditions</a> by creating an account</label>
</div>
{% comment %} <input type="submit" value="Submit"> {% endcomment %}
<div class="modal-footer">
<button type="button submit" class="ovalbtn" data-bs-target="#register3" data-bs-toggle="modal">Continue</button>
</div>
</form>
</div>
</div>
</div>
{% if form.errors %}
{% for field in form %}
{% for error in field.errors %}
<div class="alert alert-danger alert-dismissible fade show"> {{ error}}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endfor %}
{% endfor %}
{% endif %}
i got register to open the modal on localhost:8000 but its not rendering the form ?
You are opening the Modal from index.html i.e index view right? and the form that you are passing is in registerUser view. So you have to handle it manually instead of using form.py i.e in your registerUser view get single single values in POST method and save it in your DB table or you can find another way to pass the form.
Make sure that you have included the necessary JavaScript dependencies for Bootstrap modal to work properly. These include Bootstrap’s JavaScript and jQuery. If these dependencies are not properly included on the page where you’re trying to open the modal from the navigation link, it might prevent the modal from functioning.