display button into html form failed with initialize

Question

My script doesn’t work well. When the button “b5” clicked with ouside <form ...> ... element, the buttons b5 and b4 deseapper and the buttons b1,b2,b3 appear. This work normaly when my code about button is not inside the <form ...> ... element… When i put inside and i press or click the button b5, it reverses. It means i still get the buttons b4 and b5. Please help.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CRM Youtube</title>
    <!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <style>

        #logo{
        }

        body{
            background-color: #ebeff5;
        }


        #total-orders{
            background-color: #4cb4c7;
        }


        #orders-delivered{
            background-color: #7abecc;
        }

        #orders-pending{
            background-color: #7CD1C0;
        }

    </style>

</head>
<body>
<!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" />
    <!---<title>Sidebar Menu for Admin Dashboard</title>-->
    <!--link rel="stylesheet"  href="/static/css/stylev3adminspec.css"-->
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet"  href="/static/css/all.min.css">
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />-->
    
    <title> Tableau de bord </title>
    <!-- MDB icon -->
    <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
   
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
    />
    <!-- MDB -->
    <link rel="stylesheet" href="/static/css/mdb.min.css" >
    <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous">
    </script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light font-weight-bold text-uppercase">

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
          <i class="fa fa-circle" aria-hidden="true"></i>
          <div class="collapse navbar-collapse">
          </div>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item active">
                <a class="nav-link" >Visualiser le groupe C </a>
              </li>
            </ul>
          </div>
          <ul class="navbar-nav d-flex flex-row">
            
            <li class="nav-item">
              <span class="nav-link">admin</span>
            </li>
            

            <li class="nav-item me-3 me-lg-0 dropdown">
              <a data-mdb-dropdown-init
                 class="nav-link dropdown-toggle"
                 href="#"
                 id="navbarDropdown"
                 role="button"
                 aria-expanded="false"
              >
                <i class="fas fa-user" id="usericone"></i>
              </a>

              <ul class="dropdown-menu">
                <li>
                  
                  <a class="dropdown-item" href="/auth/logout">Déconnexion</a>
                  
                </li>
                <li><a class="dropdown-item" href="/auth/logout"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
                <li><a class="dropdown-item" href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
                <li><a class="dropdown-item" href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
                <li class="divider"></li>
                <li><a class="dropdown-item" href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
              </ul>

            </li>
          </ul>
    </nav>
    <script src="/static/js/mdb.umd.min.js"></script>
    <script src="/static/src/script3adminspec.js"></script>
  </body>
</html>



    <br>

<form action="" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="csrfmiddlewaretoken" value="3y5lCsdcp5KuFR5uG9xeGaB5RQlobzyGXcXth0AYtu5SDS636JqqUILOs4DJj04H">
    <div class="row">
        <div class="col-md">
            <div class="card card-body" >
                <h5>Informations</h5>
                <hr>
                <p>Nom:</p>
                <fieldset>
                    <input name="LibELE_GROUPE" type="text" id="LibELE_GROUPE" value="prenez" size="35"
                               placeholder="Nom du groupe" tabindex="1" required>*
                </fieldset>

                <fieldset>
                    <input name="created_at" type="date" id="created_at" value="5 octobre 2024 22:09" size="35" placeholder=""
                           tabindex="2" style="display:None;">
                </fieldset>
                <fieldset>
                    <input name="updated_at" type="date" id="updated_at" value="5 octobre 2024 22:09" size="35" placeholder=""
                           tabindex="3" style="display:None;">
                </fieldset>
                <fieldset>
                    <input name="UTIL_CREATION" type="text" id="UTIL_CREATION" value="admin" size="35"
                           placeholder="" tabindex="4" style="display:None;">
                </fieldset>
                <fieldset>
                    <input name="UTIL_MODIF" type="text" id="UTIL_MODIF" value="admin" size="35" placeholder=""
                           tabindex="5" style="display:None;">
                </fieldset>
                <fieldset>
                    <input name="Soc_sigle" type="text" id="Soc_sigle" value="ABI" size="35" placeholder=""
                           tabindex="6" style="display:None;">
                </fieldset>

            </div>

        </div>

        <div class="col-md">
            <div class="card card-body" style="width:300px; margin-left:40%;">
                <h5>Total des Utilisateurs</h5>
                <hr>
                <h1 style="text-align: center;padding: 10px"></h1>
            </div>
        </div>


        <div class="col-md">
            <div class="card card-body" style="width:200px; margin-left:50%;">
                <!--<h5>Client:</h5>-->

                <hr>

                
                <button class="b3  btn-outline-warning  btn-sm btn-block " href=""
                        style="font-size: 10px;display:None;">
                    Modifier
                </button>
                <button class="b2  btn-outline-danger  btn-sm btn-block " href=""
                        style="font-size: 10px; display:None;">
                    Supprimer
                </button>
                <button class="b1  btn-outline-secondary  btn-sm btn-block " href=""
                        style="font-size: 10px; display:None;">
                    Annuler
                </button>
                <button class="b4 btn-outline-success  btn-sm btn-block" id="AJ" name="Ajouter" type="submit"
                        value="Submit"
                        style="font-size: 10px; ">Ajouter
                </button>
                <button class="b5 btn-outline-info  btn-sm btn-block" type="button" id="QT" href="" style="font-size: 10px; ">Quitter
                </button>

                

            </div>

        </div>

    </div>

    <script>

            const buttons = document.getElementsByTagName("button");
            var clicked = false
            var b1 = document.querySelector(".b1")
            var b2 = document.querySelector(".b2")
            var b3 = document.querySelector(".b3")
            var b5 = document.querySelector(".b5")

            function hideButtons( button1, button2, button3) {
                clicked = false
                for (button of buttons) {
                    button.style.display = "inline";
                }
                button1.style.display = (clicked ? "inline" : "none")
                button2.style.display = (clicked ? "inline" : "none")
                button3.style.display = (clicked ? "inline" : "none")
                clicked = !clicked
                }
                b1.addEventListener("click", () => {hideButtons(b2, b3, b1)})

                function hideButtons1(button1, button2, button3) {

                    clicked = false
                    for (button of buttons) {
                        button.style.display = "none";
                    }
                    button1.style.display = "inline";
                    button2.style.display = "inline";
                    button3.style.display = "inline";
                    clicked = !clicked
                    }

                    b5.addEventListener("click", () => {
                    hideButtons1(b1, b2, b3)})

    </script>

</form>

<br>
<div class="row">
    <div class="col">
        <div class="card card-body">
            <form method="get">

            <button class="btn btn-primary" type="submit">Search</button>
          </form>
        </div>
    </div>

</div>
<br>

<div class="row">
    <div class="col-md">
        <div class="card card-body">
            <table class="table table-sm">
                <tr>
                    <th>ID</th>
                    <th>login</th>
                    <th>Prenom et Nom</th>
                    <th>Telephone</th>
                    <th>EMAIL</th>
                    <th>Util création</th>
                    <th>Date création</th>
                    <th>Util modification</th>
                    <th>Date modification</th>
                </tr>

                
                <tr>
                    <th>2</th>
                    <th>[email protected]</th>
                    <th>alino - koffi</th>
                    <th></th>
                    <th>[email protected]</th>
                    <th>admin</th>
                    <th>7 octobre 2024 23:17</th>
                    <th>admin</th>
                    <th>7 octobre 2024 23:17</th>

                    <th><a href="">Mise à Jour</a></th>
                    <th><a href="">Supprimer</a></th>

                </tr>

                

            </table>
        </div>
    </div>
</div>
<!--https://stackoverflow.com/questions/72089986/how-to-toggle-between-button-display -->

<hr>
<h1>Footer</h1>
</body>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</html>

@mykaf the html display the buttons b1,b2 and b3 and reverse to display b4 and b5. So it still or comeback display b4 and b5 when click on b5. Please help to fix this javascript issue. — Fulbert KOFFI
– Fulbert KOFFI, Commented Oct 22, 2024 at 0:05
I don't know what the {% csrf_token %} syntax is, but it's not javascript. Javascript works with the rendered html. Please edit your question to show the relevant rendered html. By default, buttons have type="submit", so a button in the form would submit the form. Try changing your button type to "button" or using preventDefault() in its event listener. — mykaf
– mykaf, Commented Oct 22, 2024 at 13:48
Add to the question a description of the overall objective. What is the idea behind showing/hiding buttons? — chrwahl
– chrwahl, Commented Oct 24, 2024 at 15:50
Thank you for your reply. First, this '{% csrf_token %}' is to get the token when i post the form. I am programming in django (python framework) not only in javascript. second, i am junior in javascript so may be i don't understand you well about what you are saying by 'Try changing your button type to "button" or using preventDefault() in its event listener'. — Fulbert KOFFI
– Fulbert KOFFI, Commented Oct 24, 2024 at 17:36
My objective is very simple: I have 5 buttons (b1,b2,b3,b4,b5). When i show the page at first time, i want just only buttons b4 (add ou submit form) and b5( quit) to be showed or displayed. When i press press the button b5, i should get the buttons b4 and b5 diseapper and the buttons b1, b2(delete data) and b3 ( change data) showed or displayed. When i press button b1 it should reverse to display b4 and b5 and the tree buttons b1, b2 and b3 deseapper. I hope is clear now. thank you so much. — Fulbert KOFFI
– Fulbert KOFFI, Commented Oct 24, 2024 at 17:37

Collectives™ on Stack Overflow

display button into html form failed with initialize

0

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest

Linked