create menu instead of select to change form

Asked

Viewed 46 times

1

I have several forms inside the same page this way:

<section class="hide-section" id="produto_1"> 
<form class="form-validate" id="feedback_form">
    <div class="campo">
        <fieldset> 
            <h1>
                <legend>
                    <center>
                        <strong>Produtos de Higiene</strong>
            </center>
        </h1><br> 
        </div>
        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Nome do Produto">Nome do Produto</label></strong> 
            <input type="text" id="DescricaoProd" name="DescricaoProd" required="" style="width:350px">
        </div>
    <div class="campo"> 
        <strong><label for="Unidade">Unidade</label></strong> 
            <input type="text" id="DescricaoUnid" name="DescricaoUnid" style="width:160px" required="" size="120">
        </div>
        </fieldset>
        <button class="btn btn-success btn_contact" type="button">Registo</button>
        <div id="success_messages" class="hide">sucessso</div>
        <div id="error_message" class="hide">erro</div>
</form>    
</section> 


<section class="hide-section" id="produto_2"> 
    <form name="form1" id="form1" method="POST" action="./inserir" onsubmit="return form_validation()"> 
         <fieldset> 
            <h1>
                <legend>
                    <center>
                        <strong>Entrada de Produtos de Higiene</strong>
            </center>
        </h1><br>       
        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Data Entrada">Data Entrada</label></strong>
            <input id="DataEntrada" type="date" name="DataEntrada" required="" style="width:180px" value="<?php echo date("Y-m-d");?>">
        </div>
        </fieldset>
        <fieldset class="grupo">
    <div class="campo"> 
        <strong><label for="Produto">Produto</label></strong>
        <select id="first_dd" name="Produto" style="width:250px" required> 
            <option></option> 
            <?php 
                $sql = "SELECT * FROM centrodb.ProdHigieneteste WHERE Ativo = 1 ORDER BY DescricaoProd ASC"; 
                $qr = mysqli_query($conn, $sql); 
                while($ln = mysqli_fetch_assoc($qr)){ 
                    echo '<option value="'.$ln['IDProd'].'"> '.$ln['DescricaoProd'].'</option>'; 
                    $valencia[$ln['IDProd']]=array('DescricaoUnid'=>$ln['DescricaoUnid'],'DescricaoUnid'=>$ln['DescricaoUnid']); 
                } 
            ?> 
        </select> 
        </div>
    <div class="campo"> 
        <strong><label for="Unidade">Unidade</label></strong>
        <select id="second_dd" name="Unid" style="width:150px" required> 
            <option></option> 
            <?php
                foreach ($valencia as $key => $value) { 
                    echo '<option data-id="'.$key.'" value="'.$value['DescricaoUnid'].'">'.$value['DescricaoUnid'].'</option>'; 
                }
            ?> 
        </select><br> 
        </div>
        </fieldset>
        <fieldset class="grupo">
    <div class="campo"> 
        <strong><label for="Quantidade">Quantidade</label></strong>
            <input type="text" id="Quantidade" name="Quantidade" style="width:80px" required="" size="40">
        </div>
    <div class="campo"> 
        <strong><label for="Preço">Preço</label></strong>
            <input type="text" id="Preco" name="Preco" style="width:100px" value="0.00">
        </div> 
    </fieldset>
        <button type="submit" name="submit1" class="botao submit">Registo</button>
    </form>
</section>

To change form I am using this code:

<select id="mudar_produto">
    <option></option> 
    <option value="#produto_1">Novo Produto Higiene</option> 
    <option value="#produto_2">Entrada de Produtos Higiene</option>  
</select>

but instead of select I wanted to create a menu to change forms

html

  • Try to explain better what you want. You want two buttons, and when you click on one or the other it shows a certain form is this?

  • @hugocsl, yes that’s what I intend

1 answer

2


I made a model with jQuery in a way that was as simple as possible. I also made CSS as simple as possible just so you understand how the dynamics of showing and hiding forms.

Notice that each item of nav has a href that reference to the ID form. Then I take this href and show the ID that has the same name, and at the same time I hide all the others forms.

Take a look at the example below to better understand. (I removed the PHP tags to work better in the snippet, after a review on that ok)

$(".menu-item").click(function(event){
    event.preventDefault();
    $(this).toggleClass("ativo").siblings().removeClass("ativo");
    var id = $(this).attr("href");
    $(id).toggleClass("show").siblings().removeClass("show");
});
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
nav {
    margin-bottom: 40px;
}
.menu-item {
    padding: 1em;
    background-color: antiquewhite;
}
.item {
    display: none;
}
.ativo {
    background-color: rgb(248, 198, 0) !important;
}
.show {
    display: block;
}
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
 <nav>
        <a class="menu-item" href="#produto_1">Itens 1</a>
        <a class="menu-item" href="#produto_2">Itens 2</a>
    </nav>


    <section class="hide-section item" id="produto_1">
        <form class="form-validate" id="feedback_form">
            <div class="campo">
                <fieldset>
                    <h1>
                        <legend>
                            <center>
                                <strong>Produtos de Higiene</strong>
                            </center>
                    </h1>
                    <br>
            </div>
            <fieldset class="grupo">
                <div class="campo">
                    <strong>
                        <label for="Nome do Produto">Nome do Produto</label>
                    </strong>
                    <input type="text" id="DescricaoProd" name="DescricaoProd" required="" style="width:350px">
                </div>
                <div class="campo">
                    <strong>
                        <label for="Unidade">Unidade</label>
                    </strong>
                    <input type="text" id="DescricaoUnid" name="DescricaoUnid" style="width:160px" required="" size="120">
                </div>
            </fieldset>
            <button class="btn btn-success btn_contact" type="button">Registo</button>
            <div id="success_messages" class="hide">sucessso</div>
            <div id="error_message" class="hide">erro</div>
        </form>
    </section>

    <section class="hide-section item" id="produto_2">
        <form name="form1" id="form1" method="POST" action="./inserir" onsubmit="return form_validation()">
            <fieldset>
                <h1>
                    <legend>
                        <center>
                            <strong>Entrada de Produtos de Higiene</strong>
                        </center>
                </h1>
                <br>
                <fieldset class="grupo">
                    <div class="campo">
                        <strong>
                            <label for="Data Entrada">Data Entrada</label>
                        </strong>
                        <input id="DataEntrada" type="date" name="DataEntrada" required="" style="width:180px">
                    </div>
                </fieldset>
                <fieldset class="grupo">
                    <div class="campo">
                        <strong>
                            <label for="Produto">Produto</label>
                        </strong>
                        <select id="first_dd" name="Produto" style="width:250px" required>
                            <option></option>
                            <option value="'.$ln['IDProd'].'"> '.$ln['DescricaoProd'].'</option>

                        </select>
                    </div>
                    <div class="campo">
                        <strong>
                            <label for="Unidade">Unidade</label>
                        </strong>
                        <select id="second_dd" name="Unid" style="width:150px" required>
                            <option></option>
                            <option data-id="'.$key.'">.$value['DescricaoUnid'].'</option>

                        </select>
                        <br>
                    </div>
                </fieldset>
                <fieldset class="grupo">
                    <div class="campo">
                        <strong>
                            <label for="Quantidade">Quantidade</label>
                        </strong>
                        <input type="text" id="Quantidade" name="Quantidade" style="width:80px" required="" size="40">
                    </div>
                    <div class="campo">
                        <strong>
                            <label for="Preço">Preço</label>
                        </strong>
                        <input type="text" id="Preco" name="Preco" style="width:100px" value="0.00">
                    </div>
                </fieldset>
                <button type="submit" name="submit1" class="botao submit">Registo</button>
        </form>
    </section>

  • just one more thing and if you want to have sub-buttons inside a button as I do?

  • 1

    @Beginner The dynamics are the same, this script will always look for the ID that has the same value as the href of the clicked link. Then it will show the Section that has this ID and will hide the other Section. Now if you are in doubt on how to make the CSS of a menu that has submenus I think it would be interesting you open another question so that it does not get messy. I came up with the answer thinking about what you said, a button for each form. If you open another question tell me that I try to give you a help there too!

  • we can chat?

  • @Beginner yes just call, I saw that you opened the question, but then gave up?

  • can create the room to be able to chat with you, because I cannot create and associate with this question

  • @Beginner https://chat.stackexchange.com/rooms/79662/beginner

Show 1 more comment

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.