Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Form PHP e accordion menu

  1. #1
    Utente di HTML.it
    Registrato dal
    May 2018
    Messaggi
    5

    Form PHP e accordion menu

    Buongiorno a tutti, sono nuovo del forum.
    Premetto che non ho molta esperienza con HTML e PHP.
    Non riesco a venire a capo di un problema.
    Sto creando un form in stile accordion menu (preso da www.w3school.com), le varie sottocategorie conterrano dei textbox da compilare.
    Ho racchiuso tutto all'interno di un form.
    Il problema è che cliccando sui menu mi parte l'invio dei dati.
    La pagina l'ho salvata con estensione .php

    codice HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }
    
        .active, .accordion:hover {
            background-color: #ccc;
        }
    
        .accordion:after {
            content: '\002B';
            color: #777;
            font-weight: bold;
            float: right;
            margin-left: 5px;
        }
    
        .active:after {
            content: "\2212";
        }
    
        .panel {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
    </style>
    </head>
    <body>
    
        <h2>Accordion with symbols</h2>
        <p>In this example we have added a "plus" sign to each button.  When the user clicks on the button, the "plus" sign is replaced with a  "minus" sign.</p>
        
        <form method="post" action="invia.php">
            <button class="accordion">Section 1</button>
            <div class="panel">
              <p>Lorem ipsum dolor sit amet, consectetu.</p>
            </div>
    
            <button class="accordion">Section 2</button>
            <div class="panel">
              <p>Lorem ipsum dolor sit amet.</p>
            </div>
    
            <button class="accordion">Section 3</button>
            <div class="panel">
              <p>Lorem ipsum dolor sit amet, con.</p>
            </div>
    
            <script>
                var acc = document.getElementsByClassName("accordion");
                var i;
    
                for (i = 0; i < acc.length; i++) {
                  acc[i].addEventListener("click", function() {
                    this.classList.toggle("active");
                    var panel = this.nextElementSibling;
                    if (panel.style.maxHeight){
                      panel.style.maxHeight = null;
                    } else {
                      panel.style.maxHeight = panel.scrollHeight + "px";
                    } 
                  });
                }
            </script>
            
            <br>
            <input type="submit" name="invia" value="InviaDati">
        </form>
     
    </body>
    </html>

  2. #2
    prova a mettere il type nel button.
    tipo così:
    codice:
     <button type="button" class="accordion">Section 1</button>

    se non sbaglio di default il type è submit, che serve per inviare il form

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2018
    Messaggi
    5
    Funziona fermat!
    Grazie mille!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.