How to use a single form where your fields are in different tabs, jquery?

Question

How to use a single form where your fields are in different tabs, jquery?

Navigation

#1 by (1 votes)

0

The design of tabs in html remains this way

<div class="tabs-animated-wrap">
    <div class="tabs">
        <div id="tab1-2" class="tab active">
            <div class="list login-form-box">
                <form id="formulario_creacion_multa1" class="form nice-label">
                    <div class="content-block-title">
                       <h2>Datos del vehiculo</h2>
                    </div>
                    <div class="form-row">
                        <label for="idboleta"><span class="icon-document"></span></label>
                        <input type="text" id="idboleta" placeholder="Ingrese numero de boleta">
                    </div>
                     <div class="form-row">
                        <label for="numplaca"><span class="icon-news"></span></label>
                        <input type="text" id="numplaca" placeholder="Ingrese placa">
                    </div>
                </form>
            </div>
        </div>
        <div id="tab2-2" class="tab">
            <form id="formulario_creacion_multa2" class="form nice-label">
                <div class="content-block-title">
                   <h2>Datos del Infractor</h2>
                </div>
                <div class="form-row">
                    <label for="conducto"><span class="icon-user"></span></label>
                    <input type="text" id="conducto" placeholder="Nombre conductor">
                </div>
                 <div class="form-row">
                    <label for="conductor_ausente"><span class="icon-user-minus"></span></label>
                    <input type="text" id="conductor_ausente" placeholder="Conductor ausente">
                </div>
            </form>
        </div>
    </div>
</div>

In these tabs I have two forms id="formulario_creacion_multa1" and id="formulario_creacion_multa2" , but in reality it should only be a form since the fields of that form will keep them in a table of the BD, at the moment I only show some fields, but in Reality are more like another tab. How could I do to have only one form that is distributed in the tabs and how to apply it in jquery.validate

Thank you very much in advance.

jquery html

asked by JG_GJ 14.09.2018 в 09:01

source

1 answer

Delete residual Word file from my project The index does not link the .css files. MIME error type text / html

score 1 · Accepted Answer

You can place your code like this calmly:

let boton = document.getElementById("obtener");
boton.addEventListener("click", () => {
  
  let form = document.getElementById("formulario_creacion_multa").elements;
  console.log(form)
  console.log(form[1].value)
});

#obtener{
margin-top:50px;
}

<form id="formulario_creacion_multa" class="form nice-label">
     <div class="tabs-animated-wrap">
        <div class="tabs">
            <div id="tab1-2" class="tab active">
                <div class="list login-form-box">
                    <div class="content-block-title">
                       <h2>Datos del vehiculo</h2>
                    </div>
                    <div class="form-row">
                       <label for="idboleta"><span class="icon-document"></span></label>
                       <input type="text" id="idboleta" placeholder="Ingrese numero de boleta" name="idboleta">
                    </div>
                    <div class="form-row">
                       <label for="numplaca"><span class="icon-news"></span></label>
                       <input type="text" id="numplaca" placeholder="Ingrese placa" name="numplaca">
                    </div>
                </div>
            </div>
            <div id="tab2-2" class="tab">
               <div class="content-block-title">
                  <h2>Datos del Infractor</h2>
               </div>
               <div class="form-row">
                  <label for="conducto"><span class="icon-user"></span></label>
                  <input type="text" id="conducto" placeholder="Nombre conductor" name="conducto">
               </div>
                  <div class="form-row">
                     <label for="conductor_ausente"><span class="icon-user-minus"></span></label>
                     <input type="text" id="conductor_ausente" placeholder="Conductor ausente" name="conductor_ausente">
                  </div>
            </div>
        </div>
    </div>
</form>

<button id="obtener">Obtener datos del formulario</button>

If you notice, place the form as a top label that includes everything, apart from the fields, place the name attribute in case you need to do a serialize , and place a js where when you give the Get form data button you can see the values of the form with its elements and verify that if you are reading all the inputs so they are in different tabs, if you notice there are two console.log () , the first for you to see what elements the form has and the second you see how you get the value of one of them. I hope it serves you.