Django button submit not work after using javascript code

This would be my Registration page. When the script html tag testscript.js code is remove or commented out, the register button works perfectly fine but when I input the testscript.js, the register button is kind of disabled. So, I think the problem is the javascript code because that's the only part of the code that blocks the function of the register button.

Here's my source code:

views.py:

def registration(request):
    form = CustomUserCreationForm()
    print("Working Form")

    if request.method == 'POST':
        form = CustomUserCreationForm(request.POST)
        print("Form Submitted")
        if form.is_valid():
            form.save()

    context = {'form' : form}
    return render(request, 'activities/index.html', context)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="../static/CSS/styles.css">
    <link rel="stylesheet" href="../static/CSS/font-awesome/css/all.min.css">
    <link rel="stylesheet" href="../static/CSS/css/bootstrap.min.css">
    <script src="../static/Javascript/js/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- Header -->
    <div class="site-header" >
        <nav class="navbar fixed-top navbar-expand-lg navbar-dark index__navbar scrolled">
        <div class="container-fluid">
            <div>
                <img class="navbar-icon" style="margin-left:15px;" src="../static/Media/avatar.png" alt="dasma-logo">
                <span id="hideHomeTitle" class="brand__name" style="color:#2c5f2dff;">Preschooler Profiling and Monitoring</span>
            </a>
            </div>
        </div>
        </nav>
    </div>
    <!-- Form -->
    <div class="container-fluid" id="homeBody">
        <br>
        <div class="form">
            <div class="form-toggle"></div>
            <div class="form-panel one">
                <div class="form-header">
                    <h1>Login</h1>
                </div>
                <div class="form-content">
                    <form action="">
                        <div class="form-group">
                            <label for="">Username</label>
                            <input type="text" id="username" name="username">
                        </div>
                        <div class="form-group">
                            <label for="">Password</label>
                            <input type="password" id="password" name="password">
                        </div>
                        <div class="form-group">
                            <label class="form-remember">
                                <input type="checkbox">Remember Me
                            </label><a class="form-recovery" href="">Forgot Password?</a>
                        </div>
                        <div class="form-group">
                            <button type="submit">Log In</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="form-panel two">
                <div class="form-header">
                    <h1>Register Account</h1>
                </div>
                <div class="form-content">
                    <form method="POST" action="">
                        {% csrf_token %}
                        <div class="input-group mb-3">
                            <label for="">User Type</label>
                            {{ form.user_type }}
                            <br>
                        </div>
                        
                        <div class="form-group">
                            <div class="row">
                                <div class="col">
                                    <label for="">First Name</label>
                                    {{ form.first_name }}
                                </div>
                                <div class="col">
                                    <label for="">Last Name</label>
                                    {{ form.last_name }}
                                </div>
                            </div>
                        </div>
                
                        <div class="form-group">
                            <label for="">Email Address</label>
                            {{ form.email }}
                        </div>
                
                        <div class="form-group">
                            <label for="">Password</label>
                            {{ form.password1 }}
                        </div>
                
                        <div class="form-group">
                            <label for="">Confirm Password</label>
                            {{ form.password2 }}
                        </div>
                
                        <div class="form-group">
                            <button type="submit">Register</button>
                        </div>
                    </form>
                </div>  
            </div>
        </div>
    </div>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../static/Javascript/testscript.js"></script>
</html>

testscript.js:

$(function () {
  $(document).scroll(function () {
    var $nav = $(".fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

$(document).ready(function() {
    var panelOne = $('.form-panel.two').height(),
      panelTwo = $('.form-panel.two')[0].scrollHeight;
  
    $('.form-panel.two').not('.form-panel.two.active').on('click', function(e) {
      e.preventDefault();
  
      $('.form-toggle').addClass('visible');
      $('.form-panel.one').addClass('hidden');
      $('.form-panel.two').addClass('active');
      $('.form').animate({
        'height': panelTwo
      }, 200);
    });
  
    $('.form-toggle').on('click', function(e) {
      e.preventDefault();
      $(this).removeClass('visible');
      $('.form-panel.one').removeClass('hidden');
      $('.form-panel.two').removeClass('active');
      $('.form').animate({
        'height': panelOne
      }, 200);
    });
  });

styles.css:

/* Login Form */
  .overlay, .form-panel.one:before {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
  }
  
  .form {
    z-index: 15;
    position: relative;
    background: #FFFFFF;
    width: 600px;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 100px auto 10px;
    overflow: hidden;
  }
  .form-toggle {
    z-index: 10;
    position: absolute;
    top: 60px;
    right: 60px;
    background: #FFFFFF;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    transform-origin: center;
    transform: translate(0, -25%) scale(0);
    opacity: 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .form-toggle:before, .form-toggle:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 4px;
    background: rgb(33, 146, 71);
    transform: translate(-50%, -50%);
  }
  .form-toggle:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .form-toggle:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .form-toggle.visible {
    transform: translate(0, -25%) scale(1);
    opacity: 1;
  }
  .form-group{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 20px;
  }
  .form-group:last-child {
    margin: 0;
  }
  .form-group label ,.input-group label{
    display: block;
    margin: 0 0 10px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.2em;
  }
  .two .form-group label ,.input-group label{
    color: #FFFFFF;
  }

  .form-group input {
    outline: none;
    display: block;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    border: 0;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 12px 20px;
    color: rgba(0, 0, 0, 0.6);
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    transition: 0.3s ease;
  }
  .form-group input:focus {
    color: rgba(0, 0, 0, 0.8);
  }
  .two .form-group input {
    color: #FFFFFF;
  }
  .two .form-group input:focus  {
    color: #FFFFFF;
  }
  .form-group button {
    outline: none;
    background: rgb(33, 146, 71);
    width: 100%;
    border: 0;
    border-radius: 4px;
    padding: 12px 20px;
    color: #FFFFFF;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    text-transform: uppercase;
    cursor: pointer;
  }
  .two .form-group button{
    background: #FFFFFF;
    color: rgb(33, 146, 71);
  }
  .form-group .form-remember {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
  .form-group .form-remember input[type=checkbox] {
    display: inline-block;
    width: auto;
    margin: 0 10px 0 0;
  }
  .form-group .form-recovery {
    color: rgb(33, 146, 71);
    font-size: 12px;
    text-decoration: none;
  }
  .form-panel {
    padding: 60px calc(5% + 60px) 60px 60px;
    box-sizing: border-box;
  }
  .form-panel.one:before {
    content: "";
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
  }
  .form-panel.one.hidden:before {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  .form-panel.two {
    z-index: 5;
    position: absolute;
    top: 0;
    left: 95%;
    background: rgb(33, 146, 71);
    width: 100%;
    min-height: 100%;
    padding: 60px calc(10% + 60px) 60px 60px;
    transition: 0.3s ease;
    cursor: pointer;
  }
  .form-panel.two:before, .form-panel.two:after {
    content: "";
    display: block;
    position: absolute;
    top: 60px;
    left: 1.5%;
    background: rgba(255, 255, 255, 0.2);
    height: 30px;
    width: 2px;
    transition: 0.3s ease;
  }
  .form-panel.two:after {
    left: 3%;
  }
  .form-panel.two:hover {
    left: 93%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
  .form-panel.two:hover:before, .form-panel.two:hover:after {
    opacity: 0;
  }
  .form-panel.two.active {
    left: 10%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    cursor: default;
  }
  .form-panel.two.active:before, .form-panel.two.active:after {
    opacity: 0;
  }
  .form-header {
    margin: 0 0 40px;
  }
  .form-header h1 {
    padding: 4px 0;
    color: rgb(33, 146, 71);
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .two .form-header h1 {
    position: relative;
    z-index: 40;
    color: #FFFFFF;
  }

I know it's too long but I hope someone would have a solution for this. Thanks!

The Django button which is not working after using javascript code is because , I feel like the div with form-panel is been used in the Js code whereas If you see the button is also under the same tag(form-panel). Try by removing the button div and place it outside the main div. I hope it help. Best of luck

Back to Top