RuntimeError Issue with Django When Using Forms and POST Redirections

Using Django Templates & Frontend
12

here the rendering of the page before submission that generated the error

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    <link rel="stylesheet" href="/static/css/styles.css">
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" integrity="sha256-6XMVI0zB8cRzfZjqKcD01PBsAy3FlDASrlC8SxCpInY=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
    <!-- Bootstrap icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    <!-- Popper.js for Bootstrap -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- Custom CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

    

    
    
    <title> </title>
</head>
<body>
    <div class="container-fluid m-2 h-25">
        <div class="row">
            <div class="col-1 col-sm-1 d-flex justify-content-center justify-content-sm-start border border-secondary">
                <div style="width: 100px; height: 100px;">
                    
                    <img src="/static/images/logo.png" alt="BACOREX-SARL" class="img-fluid">
                </div>
                
            </div>
            <div class="col-10 col-sm-10 d-flex justify-content-center border border-success">
                
<style>
    .text-brown-light {
        color: #df7752; /* Marron clair */
        text-shadow: 2px 2px 4px #000000; /* Ombre noire pour le texte */
    }
    .text-brown-text {
        color: rgb(241, 236, 234); /* Marron clair */
        text-shadow: 2px 2px 4px #000000; /* Ombre noire pour le texte */
    }
    .bg-gradient {
        background-color: #6c757d;
        background-image: linear-gradient(315deg, #6c757d 0%, #d5d5d5 74%);
        /* Ajout d'une légère transparence pour le fond */
        opacity: 0.9; 
    }
</style>
<div class="container-fluid py-4 bg-gradient">
    <div class="row">
        <div class="col-md-6">
            <h2 class="text-brown-light display-4 font-weight-bold shadow-sm">BACOREX SARL</h2>
        </div>
        <div class="col-md-6 text-end">
            <span class="text-brown-text lead">Bienvenue, chef1</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p class="text-brown-text fst-italic">Votre tableau de bord de gestion des projets</p>
        </div>
    </div>
</div>

            </div>
            <div class="col-1 col-sm-1 d-flex justify-content-center justify-content-sm-end border border-warning ">
                 
    <div class="dropdown" >
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        
        
            <img src="/static/images/media/avatars/genetique.jpeg" alt="Avatar" class="rounded-circle" style="width:30px;height:30px;">
        
        <span class="ml-2">chef1</span>
    </button>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item" href="#"><i class="bi bi-person-fill me-2"></i>Votre Profile</a></li>
      <li><a class="dropdown-item" href="#"><i class="bi bi-gear-fill me-2"></i>Paramettre</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="/user/logout"><i class="bi bi-box-arrow-right me-2"></i>Se deconnecté</a></li>
    </ul>
</div>


            </div>
        </div>
    </div>
    
       
    <div class="row container-fluid border border-warning">
        <div class="d-flex p-2 bd-highlight col-sm border border-success">
            
            <!-- Choix de l'URL en fonction de la présence ou non de projet_id -->
            
                <a href="/boitereception/1/message/"> 
                    <img src="/static/images/write_email.png" alt="email" title="email" />
                </a>
                <!-- Construction de l'URL de la balise form pour messagerie liée au projet -->
                <form method="POST" action="/boitereception/1/message/" role="search" style="width: 15em; margin: 0.3em 2em;">
            
            <input type="hidden" name="csrfmiddlewaretoken" value="eRDcsXEObreBOQBpovyOFitKBnYhMsILd7vnY0ntPBTMYNz5qpK0rPLSsMqdV8EE">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <button type="submit" class="btn btn-default">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </div>
            </div>
        </form> 
    </div>
</div>                    

    <div class="row container-fluid border border-dark">
        <div class="col-12 col-sm-2 border border-success">
            
    chef1t@gmail.com
    <div class="list-group">
        
        
            <a href="/boitereception/entrant/1/" class="list-group-item list-group-item-action"> 
                <img src="/static/images/courrier-entrant.png" alt="email" title="email" />  Courrier entrant du Projet
            </a>
            <a href="#" class="list-group-item list-group-item-action"> <img src="/static/images/brouillon.png" alt="email" title="email" /> Brouillons du Projet</a>
            <a href="/boitereception/envoye/1/" class="list-group-item list-group-item-action">
                <img src="/static/images/envoye.png" alt="email" title="email" />Courrier Envoyés du Projet</a>
            <a href="#" class="list-group-item list-group-item-action"><img src="/static/images/corbeille.png" alt="email" title="email" />Corbeille du Projet</a>
            <!-- Ajouter d'autres liens spécifiques au projet ici -->
        
        <a href="/" class="list-group-item list-group-item-action">
            <img src="/static/images/menu.png" alt="email" title="menu " />
            Return to Menu
        </a>

    </div>

        </div>
        <div class="col-12 col-sm-10 border border-dark overflow-scroll">
            
    <script src="/static/ckeditor/ckeditor.js"></script>
    <form action="/boitereception/message" method="post" enctype="multipart/form-data">
        <input type="hidden" name="csrfmiddlewaretoken" value="eRDcsXEObreBOQBpovyOFitKBnYhMsILd7vnY0ntPBTMYNz5qpK0rPLSsMqdV8EE">
        <script src="/static/ckeditor/ckeditor-init.js" data-ckeditor-basepath="/static/ckeditor/ckeditor/" id="ckeditor-init-script"></script>
<script src="/static/ckeditor/ckeditor/ckeditor.js"></script>
        <p>
    <label for="id_objet">Objet :</label>
    <input type="text" name="objet" maxlength="200" required id="id_objet">
    
    
  </p>

  
  <p>
    <label for="id_messages">Messages :</label>
    <div class="django-ckeditor-widget" data-field-id="id_messages" style="display: inline-block;">
    <textarea name="messages" cols="40" rows="10" id="id_messages" data-processed="0" data-config="{&quot;skin&quot;: &quot;moono-lisa&quot;, &quot;toolbar_Basic&quot;: [[&quot;Source&quot;, &quot;-&quot;, &quot;Bold&quot;, &quot;Italic&quot;]], &quot;toolbar_Full&quot;: [[&quot;Styles&quot;, &quot;Format&quot;, &quot;Bold&quot;, &quot;Italic&quot;, &quot;Underline&quot;, &quot;Strike&quot;, &quot;SpellChecker&quot;, &quot;Undo&quot;, &quot;Redo&quot;], [&quot;Link&quot;, &quot;Unlink&quot;, &quot;Anchor&quot;], [&quot;Image&quot;, &quot;Flash&quot;, &quot;Table&quot;, &quot;HorizontalRule&quot;], [&quot;TextColor&quot;, &quot;BGColor&quot;], [&quot;Smiley&quot;, &quot;SpecialChar&quot;], [&quot;Source&quot;]], &quot;toolbar&quot;: &quot;Full&quot;, &quot;height&quot;: 291, &quot;width&quot;: 835, &quot;filebrowserWindowWidth&quot;: 940, &quot;filebrowserWindowHeight&quot;: 725, &quot;language&quot;: &quot;fr-fr&quot;}" data-external-plugin-resources="[]" data-id="id_messages" data-type="ckeditortype"></textarea>
</div>
    
    
  </p>

  
  <p>
    <label for="id_recepteurs">Recepteurs :</label>
    <select name="recepteurs" id="id_recepteurs" multiple>
  <option value="6">operateur1 : Coordinateur des Operations</option>

  <option value="7">intervenant1 : Intervenant</option>

  <option value="3">daoud : Conducteurs des Travaux</option>

  <option value="2">Barhamou : Admin</option>

  <option value="4">chef1 : Chef de Projet</option>

</select>
    
    
  </p>

  
  <p>
    <label for="id_documents">Documents :</label>
    <input type="file" name="documents" multiple id="id_documents">
    
    
      
    
  </p>
        <button type="submit"> Envoyer</button>
    </form>

        </div> 
    </div>
    <div id="footer" class="container-fluid border border-dark m-2">
        
            <footer class="footer bg-dark py-4"> <!-- Changement du fond à une couleur foncée pour un contraste élevé -->
  <div class="container">
      <div class="row">
          <div class="col text-center">
              <h5 class="text-white mb-2">BACOREX-SARL</h5> <!-- Converti le nom de la société en en-tête pour plus d'importance -->
              <p class="text-muted mb-1">&copy; 2023 Tous droits réservés.</p>
              <p class="text-muted">Réalisé par <a href="https://hamabarhamou.onrender.com/" class="text-primary">ISSAKA HAMA Barhamou</a>.</p> <!-- Mise en évidence du lien avec une couleur primaire pour une meilleure visibilité -->
          </div>
      </div>
      <div class="row mt-3"> <!-- Ajout d'une rangée supplémentaire pour d'éventuels liens ou informations supplémentaires -->
          <div class="col text-center">
              <a href="#" class="text-muted mx-2">Mentions légales</a> <!-- Exemple de liens supplémentaires -->
              <a href="#" class="text-muted mx-2">Politique de confidentialité</a>
          </div>
      </div>
  </div>
</footer>

        
    </div>
    <!-- Bootstrap JS bundle -->
    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <!-- CKEditor JS -->
    <script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
    <!-- Select2 JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</body>
</html>