Estoy tratando de preparar un formulario html que requiere un diseño en hasta 4 filas distintas. Vea el código a continuación con notas. Básicamente, estoy buscando los primeros 3 elementos de formulario para estar en la fila 1. Los próximos 3 en la fila 2, etc. Cada elemento debe ser repartido de los demás. Usé el tamaño de 3 columnas ya que cada cuadro de texto espera una entrada relativamente corta (una palabra).

Las casillas 3 a 8 (filas 2 y 3) se activan y desactivan en función de la opción de selección. Si se desactiva, solo hay 2 filas (los primeros 3 elementos, fila 1, botón, fila 2).

Cuando agrego class-"row", los elementos del formulario se mezclan entre sí y cuando se selecciona el tipo 2, se pone aún más fuera de golpe ya que se agregan 6 cajas adicionales al desorden.

Uso de bootstrap 4

¿Está la clase de fila en el lugar correcto? ¿Hay otra clase que deba usar? Soy nuevo en todo esto, por lo que cualquier ayuda en conseguir este formulario configurado a las especificaciones correctas sería apreciado.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("#conj").hide();
        $("#type").on("change", function() {
            if ($(this).val() === "addl") {
                $("#conj").show();
            }
            else {
                $("#conj").hide();
            }
        });
    });
</script>

<h1 align="left">Dev Env - Test 110319C</h1>
<form action="/addvocab" method="post" class="form-inline">

    <!-- Box 1, box 2 and select menu on row 1 -->
    <div class="row">
        <div class="form-group col-sm-3">
            <input autocomplete="off" autofocus class="form-control" name="box1" placeholder="Box 1" type="text">
        </div>
        <div class="form-group col-sm-3">
            <input autocomplete="off" class="form-control" name="box2" placeholder="Box 2" type="text">
        </div>
        <div class="form-group col-sm-3">
            <select id="type" class="form-control" name="part">
                <option disabled selected value="">Type</option>
                <option>Type 1</option>
                <option value="addl">Type 2</option>
                <option>Type 3</option>
                <option>Type 4</option>
                <option>Type 5</option>
                <option>Type 6</option>
                <option>Type 7</option>
            </select>
        </div>
    </div>

    <div>

        <!-- Boxes 3 through 8 only show if select option TYpe 2 is selected -->
        <label id="conj">

            <!-- Boxes 3, 4 and 5 on row 2 if visible -->
            <div class="row">
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box3" placeholder="Box 3" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box4" placeholder="Box 4" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box5" placeholder="Box 5" type="text">
                </div>
            </div>


            <!-- Boxes 6, 7 and 8 on row 3 if visible -->
            <div class="row">
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box6" placeholder="Box 6" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box7" placeholder="Box 7" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box8" placeholder="Box 8" type="text">
                </div>
            </div>

        </label>
    </div>

    <!-- Button on row 2 if boxes 3 through 8 are not visible. On row 4 if visible -->
    <div class="row">
        <button class="btn btn-primary col-xs-6" type="submit">Add Word</button>
    </div>

</form>
0
mdisandro2 4 nov. 2019 a las 05:26

2 respuestas

No hay nada malo con su código de JavaScript, el problema son las etiquetas de arranque. Varios cambios pueden resolver su problema:
1. no use la clase form-inline. solo form class lo haría.
2. cambie la etiqueta de etiqueta a etiqueta div con la misma identificación.
3. para el botón agregar ubicación de palabras, olvidó ponerlo entre las etiquetas de columna.

esto sucederá si se selecciona el tipo 2

    <h1 align="left">Dev Env - Test 110319C</h1>


<form action="/addvocab" method="post" class='form'>
    <!-- Box 1, box 2 and select menu on row 1 -->
    <div class="row">
        <div class="form-group col-sm-3">
            <input autocomplete="off" autofocus class="form-control" name="box1" placeholder="Box 1" type="text">
        </div>
        <div class="form-group col-sm-3">
            <input autocomplete="off" class="form-control" name="box2" placeholder="Box 2" type="text">
        </div>
        <div class="form-group col-sm-3">
            <select id="type" class="form-control" name="part">
                <option disabled selected value="">Type</option>
                <option>Type 1</option>
                <option value="addl">Type 2</option>
                <option>Type 3</option>
                <option>Type 4</option>
                <option>Type 5</option>
                <option>Type 6</option>
                <option>Type 7</option>
            </select>
        </div>
    </div>

    <div>

        <!-- Boxes 3 through 8 only show if select option TYpe 2 is selected -->

            <!-- Boxes 3, 4 and 5 on row 2 if visible -->
            <div id='conj'>

            <div class="row ">
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box3" placeholder="Box 3" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box4" placeholder="Box 4" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box5" placeholder="Box 5" type="text">
                </div>
            </div>


            <!-- Boxes 6, 7 and 8 on row 3 if visible -->
            <div class="row">
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box6" placeholder="Box 6" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box7" placeholder="Box 7" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box8" placeholder="Box 8" type="text">
                </div>
            </div>

    </div>
    </div>

    <!-- Button on row 2 if boxes 3 through 8 are not visible. On row 4 if visible -->
    <div class="row">
    <div class="col-sm-3">
      <button class="btn btn-primary col-xs-6" type="submit">Add Word</button>
    </div>

    </div>

</form>

¡¡Espero eso ayude!!

0
Ayu Anggraeni 4 nov. 2019 a las 09:13

He realizado algunos cambios en su código. Espero que ayude

<h1 align="left">Dev Env - Test 110319C</h1>
<form action="/addvocab" method="post" class="">

    <!-- Box 1, box 2 and select menu on row 1 -->
    <div class="row">
        <div class="form-group col-sm-4">
            <input autocomplete="off" autofocus class="form-control" name="box1" placeholder="Box 1" type="text">
        </div>
        <div class="form-group col-sm-4">
            <input autocomplete="off" class="form-control" name="box2" placeholder="Box 2" type="text">
        </div>
        <div class="form-group col-sm-4">
            <select id="type" class="form-control" name="part">
                <option disabled selected value="">Type</option>
                <option>Type 1</option>
                <option value="addl">Type 2</option>
                <option>Type 3</option>
                <option>Type 4</option>
                <option>Type 5</option>
                <option>Type 6</option>
                <option>Type 7</option>
            </select>
        </div>
    </div>

    <div class="row">

        <!-- Boxes 3 through 8 only show if select option TYpe 2 is selected -->
<!--        <label id="conj">-->

            <!-- Boxes 3, 4 and 5 on row 2 if visible -->
<!--             <div class=""> -->
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box3" placeholder="Box 3" type="text">
                </div>
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box4" placeholder="Box 4" type="text">
                </div>
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box5" placeholder="Box 5" type="text">
                </div>
<!--             </div> -->


            <!-- Boxes 6, 7 and 8 on row 3 if visible -->
<!--             <div class="col-12"> -->
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box6" placeholder="Box 6" type="text">
                </div>
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box7" placeholder="Box 7" type="text">
                </div>
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box8" placeholder="Box 8" type="text">
                </div>
<!--             </div> -->

<!--        </label>-->
    </div>

    <!-- Button on row 2 if boxes 3 through 8 are not visible. On row 4 if visible -->
    <div class="row">
        <button class="btn btn-primary col-xs-6" type="submit">Add Word</button>
    </div>

</form>
0
Clemence Ayekple 4 nov. 2019 a las 07:42