I want to start by saying I do not have any JavaScript knowledge. I am reaching out to the r/django community for help with a problem I am currently trying to solve. I am trying to perform CRUD operations using JS/jquery/AJAX in my project.

I have a generic class based view with the name RegisterView as shown below. I also have created a custom user model with the name CustomUser. My intention is to show the registration form as a pop up instead of redirecting users to a webpage, which would be the standard way of handling things. I have used Bootstrap modal to display the registration form as a popup. I am currently facing 3 problems.

1. When user clicks on the 'Register' button, the pop up appears but the form fields which should be visible in the modal body is empty. How can I display form data in a Bootstrap modal?
2. If the user tries to access the registration form using a url, (Ex: http://127.0.0.1:8000/register/), the popup window doesn't work/appear. How can I make this happen?
3. The most difficult part. When user fills up the registration form and clicks the submit button, how can I update the database with all the details, like it would have been handled by a CBV? Obviously, since I called out in point 1, the form fields are not appearing in the modal body. Without it, user cannot fill the registration form.

I have been trying to figure this out for quite some time and somehow, I am not able to get it to work. I know this requires some form of JavaScript to get the desired functionality but I am unable to solve it on my own. Please help.

The modal is being triggered using the below button, both in the navbar and also in the login page.

<a class="nav-item nav-link register" type="button" data-toggle="modal" data-target="#myRegisterModal" href="{% url 'users-register' %}">Register</a>

forms.py

class CustomUserCreationForm(forms.ModelForm):
    password1 = forms.CharField(label='Password', widget=forms.PasswordInput)
    password2 = forms.CharField(label='Password confirmation', widget=forms.PasswordInput)

    class Meta:
        model = CustomUser
        # Add any required additional fields required for signup.
        fields = ('email', 'first_name', 'last_name', 'password1', 'password2')

    def clean_password2(self):
        # Check that the two password entries match
        password1 = self.cleaned_data.get("password1")
        password2 = self.cleaned_data.get("password2")
        if password1 and password2 and password1 != password2:
            raise forms.ValidationError("Passwords don't match")
        return password2

    def save(self, commit=True):
        # Save the provided password in hashed format
        user = super().save(commit=False)
        user.set_password(self.cleaned_data["password1"])
        if commit:
            user.save()
        return user

register.js

$(".register").click(function(ev) { 
    ev.preventDefault(); // prevent navigation
    var url = $(this).data("form"); 
    $("#myRegisterModal").load(url, function() { // load the url into the modal
        $(this).modal('show'); // display the modal on url load
    });
    return false; // prevent the click propagation
});

$('.register-form').live('submit', function() {
    $.ajax({
        type: $(this).attr('method'),
        url: this.action,
        data: $(this).serialize(),
        context: this,
        success: function(data, status) {
            $('#myRegisterModal').html(data);
        }
    });
    return false;
});

views.py

class RegisterView(SuccessMessageMixin, CreateView):
    model = CustomUser
    template_name = 'users_register.html'
    form_class = CustomUserCreationForm
    success_message = "Welcome '%(email)s'! You have successfully signed in!"
    success_url = reverse_lazy('users-login')

users_register.html template

<div class="container">
    <!-- Modal -->
     <div class="modal fade" id="myRegisterModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="text-center">Register</h4>
                    <button type="button" class="close text-left" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form class="register-form" method="POST">
                        {% csrf_token %}
                        {{form.as_p}}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-outline-danger" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-outline-success">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>