create menu instead of select to change form

Question

create menu instead of select to change form

Navigation

#1 by (2 votes)

1

I have several forms within 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 wanted to create a menu to change form

html

asked by anonymous 02.07.2018 / 10:57

1 answer

What is the best strategy for loading and persisting large volumes of data with Spring? Data structure - arithmetic expressions

score 2 · Accepted Answer

I made a template with jQuery in a way that was as simple as possible. I also left the CSS as simple as possible just to see how the dynamics of showing and hiding forms works.

Note that each item of nav has a href that references the ID of the form. So I get this href and I show ID that has the same name, and at the same time I hide all other forms .

Take a look at the example below to understand better. (I removed the PHP tags to work better in the snippet, after a revised one in 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><aclass="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>