2

Estoy creando un formulario bastante completo, lo que necesito es que en la sección de "experiencia laboral" se pueda ingresar mas de una experiencia al mismo tiempo, eliminarla si se quiere y por ultimo guardar esos datos de cada experiencia y enviar todo esos datos al archivo .php usando "ajax" junto con todo el formulario para guardar en una base de datos.

Form html

<form id="form_datos" action="forms/datos_user.php" method="POST">
      <div class="row">
        <div class="col-md-3">
          <div class="input-field ">
            <input id="nombre" name="nombre" type="text" class="validate">
            <label for="nombre">Nombre</label>
          </div>
        </div>
        <div class="col-md-3">
          <div class="input-field">
            <input id="apellido" name="apellido" type="text" class="validate">
            <label for="apellido">Apellido</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field">
            <select name="sexo">
              <option value="" disabled selected>Seleccionar</option>
              <option value="Masculino">Masculino</option>
              <option value="Femenino">Femenino</option>
            </select>
            <label>Sexo</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field">
            <select name="estado_civil">
              <option value="" disabled selected>Seleccionar</option>
              <option value="Soltero/a">Soltero/a</option>
              <option value="Unión Libre">Unión Libre</option>
              <option value="Divorsiado/a">Divorsiado/a</option>
              <option value="Pareja de Hecho">Pareja de Hecho</option>
              <option value="Viudo">Viudo</option>
            </select>
            <label>Estado Civil</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field ">
            <input id="dni" name="dni" type="text" class="validate">
            <label for="dni">N° de documento</label>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-2">
          <div class="input-field ">
            <input id="telefono_fijo" name="telefono_fijo" type="tel" class="validate">
            <label for="telefono_fijo">Teléfono fijo</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field ">
            <input id="celular" name="celular" type="tel" class="validate">
            <label for="celular">Teléfono celular</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field">
            <select name="pais">
              <option value="" disabled selected>País de residencia</option>
              <?php paises(); ?>
            </select>
            <label>Pais</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field ">
            <input id="provincia" name="provincia" type="text" class="validate">
            <label for="provincia">Provincia</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field ">
            <input id="ciudad" name="ciudad" type="text" class="validate">
            <label for="ciudad">Ciudad</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field ">
            <input id="calle" name="calle" type="text" class="validate">
            <label for="calle">Calle</label>
          </div>
        </div>
      </div>
      <h6>Objetivo Laboral</h6>
      <div class="row">
        <div class="col-md-12">
          <div class="input-field">
            <textarea id="objetivo_laboral" name="objetivo_laboral" class="materialize-textarea"></textarea>
            <label for="objetivo_laboral">¿Cuáles son tus expectativas?</label>
          </div>
        </div>
      </div>
      <h6>Experiencia Laboral</h6>
      <div class="row">
        <div class="col-md-12">
          <!-- Modal Trigger -->
          <a class="btn-floating waves-effect waves-light red modal-trigger" href="#modal_ex_laboral">
            <i class="material-icons">add</i>
          </a>
          <!-- Modal Structure -->
          <div id="modal_ex_laboral" class="modal modal-fixed-footer">
            <div class="modal-content">
              <h4>Agrega tus datos</h4>
              <div class="row mx-0">
                <div class="col-md-4">
                  <div class="input-field ">
                    <input id="empresa" name="empresa" type="text" class="validate">
                    <label for="empresa">Empresa</label>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="input-field">
                    <select name="empresa_actividad">
                      <option value="" disabled selected>Selecciona una opción</option>
                      <option value="AFJP" id="78">AFJP</option>
                      <option value="Agro-Industrial" id="60">Agro-Industrial</option>
                      <option value="Agropecuaria" id="7">Agropecuaria</option>
                      <option value="Alimenticia" id="71">Alimenticia</option>
                      <option value="Arquitectura" id="8">Arquitectura</option>
                      <option value="Artesanal" id="72">Artesanal</option>
                      <option value="Automotriz" id="42">Automotriz</option>
                      <option value="Aérea" id="140">Aérea</option>
                      <option value="Banca-Financiera" id="9">Banca / Financiera</option>
                      <option value="Biotecnología" id="38">Biotecnología</option>
                      <option value="Comercio" id="12">Comercio</option>
                      <option value="Comercio Exterior" id="130">Comercio Exterior</option>
                      <option value="Construcción" id="41">Construcción</option>
                      <option value="Consultoría" id="10">Consultoría</option>
                      <option value="Consumo masivo" id="11">Consumo masivo</option>
                      <option value="Correo" id="75">Correo</option>
                      <option value="Defensa" id="13">Defensa</option>
                      <option value="Diseño" id="31">Diseño</option>
                      <option value="Editorial" id="76">Editorial</option>
                      <option value="Educación" id="14">Educación</option>
                      <option value="Energía" id="15">Energía</option>
                      <option value="Entretenimiento" id="30">Entretenimiento</option>
                      <option value="Farmacéutica" id="16">Farmacéutica</option>
                      <option value="Ferroviaria" id="141">Ferroviaria</option>
                      <option value="Financiera" id="32">Financiera</option>
                      <option value="Forestal" id="37">Forestal</option>
                      <option value="Ganadería" id="77">Ganadería</option>
                      <option value="Gastronomía" id="70">Gastronomía</option>
                      <option value="Gobierno" id="17">Gobierno</option>
                      <option value="Higiene y Perfumería" id="79">Higiene y Perfumería</option>
                      <option value="Holding" id="50">Holding</option>
                      <option value="Hotelería" id="46">Hotelería</option>
                      <option value="Imprenta" id="48">Imprenta</option>
                      <option value="Información e Investigación" id="73">Información e Investigación</option>
                      <option value="Informática / Tecnología" id="40">Informática / Tecnología</option>
                      <option value="Inmobiliaria" id="51">Inmobiliaria</option>
                      <option value="Internet" id="18">Internet</option>
                      <option value="Jurídica" id="19">Jurídica</option>
                      <option value="Laboratorio" id="81">Laboratorio</option>
                      <option value="Manufactura" id="20">Manufactura</option>
                      <option value="Medios" id="24">Medios</option>
                      <option value="Minería / Petróleo / Gas" id="23">Minería / Petróleo / Gas</option>
                      <option value="ONGs" id="25">ONGs</option>
                      <option value="Otra" id="27">Otra</option>
                      <option value="Papelera" id="80">Papelera</option>
                      <option value="Pesca" id="36">Pesca</option>
                      <option value="Petroquímica" id="82">Petroquímica</option>
                      <option value="Plásticos" id="87">Plásticos</option>
                      <option value="Publicidad / Marketing / RRPP" id="21">Publicidad / Marketing / RRPP</option>
                      <option value="Química" id="33">Química</option>
                      <option value="Retail" id="83">Retail</option>
                      <option value="Salud" id="44">Salud</option>
                      <option value="Seguros" id="34">Seguros</option>
                      <option value="Servicios" id="29">Servicios</option>
                      <option value="Siderurgia" id="52">Siderurgia</option>
                      <option value="Supermercado / Hipermercado" id="35">Supermercado / Hipermercado</option>
                      <option value="Tabacalera" id="85">Tabacalera</option>
                      <option value="Telecomunicaciones" id="39">Telecomunicaciones</option>
                      <option value="Textil" id="53">Textil</option>
                      <option value="Transportadora" id="84">Transportadora</option>
                      <option value="Transporte" id="26">Transporte</option>
                      <option value="Turismo" id="45">Turismo</option>
                    </select>
                    <label>Actividad de la empresa</label>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="input-field ">
                    <input id="puesto" name="puesto" type="text" class="validate">
                    <label for="puesto">Puesto</label>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="input-field ">
                    <select name="puesto_nivel">
                      <option value="" disabled selected>Selecciona una opción</option>
                      <option value="Training">Training</option>
                      <option value="Junior">Junior</option>
                      <option value="SemiSenior">SemiSenior</option>
                      <option value="Senior">Senior</option>
                    </select>
                    <label>Nivel</label>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="input-field">
                    <select name="empresa_pais">
                      <option value="" disabled selected>País</option>
                      <?php paises(); ?>
                    </select>
                    <label>Pais</label>
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="input-field ">
                    <select name="mes_inicio_experiencia">
                      <option value="" disabled selected>Mes</option>
                      <option id="iex01" value="01">Ene</option>
                      <option id="iex02" value="02">Feb</option>
                      <option id="iex03" value="03">Mar</option>
                      <option id="iex04" value="04">Abr</option>
                      <option id="iex05" value="05">May</option>
                      <option id="iex06" value="06">Jun</option>
                      <option id="iex07" value="07">Jul</option>
                      <option id="iex08" value="08">Ago</option>
                      <option id="iex09" value="09">Sep</option>
                      <option id="iex10" value="10">Oct</option>
                      <option id="iex11" value="11">Nov</option>
                      <option id="iex12" value="12">Dic</option>
                    </select>
                    <label>Desde</label>
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="input-field ">
                    <select name="year_inicio_experiencia">
                      <option value="" disabled selected>Año</option>
                      <?php
                        $year = date("Y");                        
                        for($i = ($year-60); $i <= $year; $i++){
                          echo '<option value="'.$i.'">'.$i.'</option>';
                        };
                      ?>
                    </select>
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="input-field ">
                    <select name="mes_final_experiencia">
                      <option value="" disabled selected>Mes</option>
                      <option id="iex01" value="01">Ene</option>
                      <option id="iex02" value="02">Feb</option>
                      <option id="iex03" value="03">Mar</option>
                      <option id="iex04" value="04">Abr</option>
                      <option id="iex05" value="05">May</option>
                      <option id="iex06" value="06">Jun</option>
                      <option id="iex07" value="07">Jul</option>
                      <option id="iex08" value="08">Ago</option>
                      <option id="iex09" value="09">Sep</option>
                      <option id="iex10" value="10">Oct</option>
                      <option id="iex11" value="11">Nov</option>
                      <option id="iex12" value="12">Dic</option>
                    </select>
                    <label>Hasta</label>
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="input-field ">
                    <select name="year_final_experiencia">
                      <option value="" disabled selected>Año</option>
                      <option>Al presente</option>
                      <?php
                        $year = date("Y");                        
                        for($i = ($year-60); $i <= $year; $i++){
                          echo '<option value="'.$i.'">'.$i.'</option>';
                        };
                      ?>
                    </select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="input-field ">
                    <select name="area_puesto">
                      <option value="" disabled selected>Elige un área</option>
                      <option id="3">Abastecimiento y Logística</option>
                      <option id="1">Administración, Contabilidad y Finanzas</option>
                      <option id="2">Aduana y Comercio Exterior</option>
                      <option id="25">Atención al Cliente, Call Center y Telemarketing</option>
                      <option id="6">Comercial, Ventas y Negocios</option>
                      <option id="18">Comunicación, Relaciones Institucionales y Públicas</option>
                      <option id="31">Diseño</option>
                      <option id="9">Educación, Docencia e Investigación</option>
                      <option id="33">Enfermería</option>
                      <option id="34">Farmacia / Bioquímica</option>
                      <option id="10">Gastronomía y Turismo</option>
                      <option id="11">Gerencia y Dirección General</option>
                      <option id="4">Ingeniería Civil y Construcción</option>
                      <option id="30">Ingenierías</option>
                      <option id="13">Legales</option>
                      <option id="14">Marketing y Publicidad</option>
                      <option id="29">Minería, Petróleo y Gas</option>
                      <option id="22">Oficios y Otros</option>
                      <option id="16">Producción y Manufactura</option>
                      <option id="17">Recursos Humanos y Capacitación</option>
                      <option id="32">Salud</option>
                      <option id="23">Salud, Medicina y Farmacia</option>
                      <option id="26">Secretarias y Recepción</option>
                      <option id="28">Seguros</option>
                      <option id="19">Tecnología, Sistemas y Telecomunicaciones</option>
                      <option id="35">Trabajo Social</option>
                    </select>
                    <label>Área del puesto</label>
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="input-field">
                    <input id="personas_a_cargo" name="personas_a_cargo" type="text" class="validate">
                    <label for="personas_a_cargo">Personas a cargo</label>
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="input-field">
                    <input id="referencia" name="referencia" type="text" class="validate">
                    <label for="referencia">Referencia</label>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="input-field">
                    <textarea id="descripcion_puesto" name="descripcion_puesto" class="materialize-textarea"></textarea>
                    <label for="descripcion_puesto">Describe brevemente tus responsabilidades</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <a id="boton_ex_laboral" href="#!" class="modal-close waves-effect waves-green btn-flat">Guardar</a>
            </div>
          </div>
        </div>
      </div>
      <h6>Estudios</h6>
      <div class="row">
        <div class="col-md-2">
          <div class="input-field">
            <input id="institucion" name="institucion" type="text" class="validate">
            <label for="institucion">Institución</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field ">
            <select name="nivel_estudio">
              <option value="" disabled selected>Seleccionar</option>
              <option id="1">Secundario</option>
              <option id="2">Terciario</option>
              <option id="3">Universitario</option>
              <option id="4">Posgrado</option>
              <option id="5">Master</option>
              <option id="6">Doctorado</option>
              <option id="7">Otro</option>
            </select>
            <label>Nivel de estudio</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field">
            <input id="especialidad" name="especialidad" type="text" class="validate">
            <label for="especialidad">Especialidad</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field ">
            <select name="year_inicio_estudio">
              <option value="" disabled selected>Año</option>
              <?php
                $year = date("Y");                        
                for($i = ($year-60); $i <= $year; $i++){
                  echo '<option value="'.$i.'">'.$i.'</option>';
                };
              ?>
            </select>
            <label>Desde</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field ">
            <select name="year_final_estudio">
              <option value="" disabled selected>Año</option>
              <?php
                $year = date("Y");                        
                for($i = ($year-60); $i <= $year; $i++){
                  echo '<option value="'.$i.'">'.$i.'</option>';
                };
              ?>
            </select>
            <label>Hasta</label>
          </div>
        </div>
      </div>
      <h6>Idiomas</h6>
      <div class="row">
        <div class="col-md-2">
          <div class="input-field ">
            <select name="idioma">
              <option value="" disabled selected>Seleccionar</option>
              <option>Alemán</option>
              <option>Español</option>
              <option>Inglés</option>
              <option>Chino Mandarín</option>
              <option>Coreano</option>
              <option>Francés</option>
              <option>Holandés</option>
              <option>Italiano</option>
              <option>Japonés</option>
              <option>Portugués</option>
            </select>
            <label>Idioma</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field ">
            <select name="nivel_oral_idioma">
              <option value="" disabled selected>Seleccionar</option>
              <option>Básico</option>
              <option>Intermedio</option>
              <option>Avanzado</option>
              <option>Nativo</option>
            </select>
            <label>Nivel oral</label>
          </div>
        </div>
        <div class="col-md-2">
          <div class="input-field ">
            <select name="nivel_escrito_idioma">
              <option value="" disabled selected>Seleccionar</option>
              <option>Básico</option>
              <option>Intermedio</option>
              <option>Avanzado</option>
              <option>Nativo</option>
            </select>
            <label>Nivel escrito</label>
          </div>
        </div>
      </div>
      <button id="enviar" type="submit" class="btn btn-primary">Enviar</button>
    </form>

Js

$(document).ready(function() {
$("#boton_ex_laboral").on("click",function(){
    var experienciaLaboral = new Object();
    experienciaLaboral.empresa = $("input[name=empresa]").val();
    experienciaLaboral.empresa_actividad = $("input[name=empresa_actividad]").val();
    experienciaLaboral.puesto = $("input[name=puesto]").val();
    experienciaLaboral.puesto_nivel = $("input[name=puesto_nivel]").val();
    experienciaLaboral.empresa_pais = $("input[name=empresa_pais]").val();
    experienciaLaboral.mes_inicio_experiencia = $("input[name=mes_inicio_experiencia]").val();
    experienciaLaboral.year_inicio_experiencia = $("input[name=year_inicio_experiencia]").val();
    experienciaLaboral.mes_final_experiencia = $("input[name=mes_final_experiencia]").val();
    experienciaLaboral.year_final_experiencia = $("input[name=year_final_experiencia]").val();
    experienciaLaboral.area_puesto = $("input[name=area_puesto]").val();
    experienciaLaboral.personas_a_cargo = $("input[name=personas_a_cargo]").val();
    experienciaLaboral.referencia = $("input[name=referencia]").val();
    experienciaLaboral.descripcion_puesto = $("input[name=descripcion_puesto]").val();  

});
$("#form_datos").on("submit", function(e){
    e.preventDefault();


    return false;
})

});

2
  • Hola, para tu caso puedes utilizar select2, es genial para crear un <select> donde puedas seleccionar mas de una opción, eliminarlas, etc. Commented el 30 may. 2018 a las 21:44
  • @the-breaker gracias por responder, quizas no se entendio lo quiero, yo necesito poder crear varias experiencias laborales que dentro contienen muchos input. Ejemplo: -experiencia 1(nombre empresa, puesto, años, actividad de la empresa) -experiencia 2 (nombre empresa, puesto, etc..) y asi la cantidad de veces que sea necesario Commented el 30 may. 2018 a las 22:32

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.