Skip to content

th-app-java
th-app-java
Commit b4fafd3a by Joel Florentin
Options

experiencia con modal bootstrap

parent bce55aca
Showing with 77 additions and 54 deletions
curriculumsearch/src/main/resources/static/main.js
var cont_experiencia = 0; var cont_experiencia = 0;
let cont_estudios = 0; let cont_estudios = 0;
let cont_tecnologia = 0; let cont_tecnologia = 0;
function agregarFieldExpierncia(evt){ const experiencias = [];
const estudios = [];
const tecnologias = [];
function agregarFieldExpierncia(){
//recoger del form
const pairs = {};
const formexp = document.querySelector("[name=experiencia-form]");
const formData = new FormData(formexp);
for (const [name, value] of formData){
pairs[name] = value
}
experiencias[cont_experiencia] = pairs;
formexp.reset();
//imprimir lista actualizada
const div = document.querySelector("#experiencias")
const div1 = document.createElement('div');
let content='<ul>'
const btn = evt.target for (let index = 0; index < experiencias.length; index++) {
const exp = experiencias[index];
if(exp==null) continue;
content += `
<li id="exp-${index}">
${exp.institucion}
<button type="button" onclick="eliminarExperiencia(event)">Eliminar</button>
</li>
`
}
content += "</ul>"
div1.innerHTML = content
div.innerHTML = '';
div.appendChild(div1);
cont_experiencia++; cont_experiencia++;
const nee = document.createElement("div")
nee.innerHTML = `
<label for="institucion" class="form-label">Institucion</label>
<input type="text" class="form-control " name="experiencia-${cont_experiencia}-institucion" id="institucion" >
<label for="fechaDesde" class="form-label">FechaDesde</label>
<input type="date" class="form-control " name="experiencia-${cont_experiencia}-fechaDesde" id="fechaDesde" >
<label for="fechaHasta" class="form-label">Fecha Hasta</label>
<input type="date" class="form-control " name="experiencia-${cont_experiencia}-fechaHasta" id="fechaHasta" >
<label for="cargo" class="form-label">Cargo</label>
<input type="cargo" class="form-control " name="experiencia-${cont_experiencia}-cargo" id="cargo" >
<label for="refNombre" class="form-label">Referencia Nombre</label>
<input type="text" class="form-control " name="experiencia-${cont_experiencia}-referencias" id="refNombre" >
<button type="button" onclick="eliminarExperiencia(event)">Eliminar</button>
`;
nee.className = "mb-3 col-5"
form.insertBefore(nee,btn)
} }
function eliminarExperiencia(event) { function eliminarExperiencia(event) {
//eliminar del array
console.log(event.target.parentElement.id.split("-")[1])
experiencias[event.target.parentElement.id.split("-")[1]]=null
//eliminar en html
event.target.parentElement.remove() event.target.parentElement.remove()
} }
function serializeJSON (form) { function serializeJSON (form) {
...@@ -33,38 +51,11 @@ function serializeJSON (form) { ...@@ -33,38 +51,11 @@ function serializeJSON (form) {
// Create an object to hold the name/value pairs // Create an object to hold the name/value pairs
const pairs = {}; const pairs = {};
const experiencias = [];
const estudios = [];
const tecnologias = [];
// Add each name/value pair to the object // Add each name/value pair to the object
for (const [name, value] of formData) { for (const [name, value] of formData) {
//los atributos no primitivos tiene una nomenclatura distinta en sus names
//ej.: experiencia-4-institucion == experencias[4].institucion
let codificacion = name.split("-")
if(codificacion.length==1){
pairs[name] = value pairs[name] = value
} }
else{
switch (codificacion[0]) {
case "experiencia":
if(experiencias[codificacion[1]]==null) experiencias[codificacion[1]]={};
experiencias[codificacion[1]][codificacion[2]] = value
break;
case "estudio":
if(estudios[codificacion[1]]==null) estudios[codificacion[1]]={};
estudios[codificacion[1]][codificacion[2]] = value
break;
case "tecnologia":
if(tecnologias[codificacion[1]]==null) tecnologias[codificacion[1]]={};
tecnologias[codificacion[1]][codificacion[2]] = value
break;
default:
break;
}
}
}
pairs["experiencias"] = experiencias.filter(exp => exp)//eliminacion de nulos pairs["experiencias"] = experiencias.filter(exp => exp)//eliminacion de nulos
pairs["estudios"] = estudios.filter(est => est)//eliminacion de nulos pairs["estudios"] = estudios.filter(est => est)//eliminacion de nulos
pairs["tecnologias"] = tecnologias.filter(tec => tec)//eliminacion de nulos pairs["tecnologias"] = tecnologias.filter(tec => tec)//eliminacion de nulos
......
curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
...@@ -70,20 +70,51 @@ ...@@ -70,20 +70,51 @@
<button type="button" name="addExp" onclick="agregarFieldExpierncia(event)">Agregar</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#experienciaForm">
Agregar Experiencia
</button>
<div id="experiencias">
</div>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</form> </form>
<!-- Optional JavaScript; choose one of the two! --> <div class="modal fade" id="experienciaForm" tabindex="-1" role="dialog" aria-labelledby="experienciaForm" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Experiencia</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form name="experiencia-form">
<label for="institucion" class="form-label">Institucion</label>
<input type="text" class="form-control " name="institucion" id="institucion" >
<label for="fechaDesde" class="form-label">FechaDesde</label>
<input type="date" class="form-control " name="fechaDesde" id="fechaDesde" >
<label for="fechaHasta" class="form-label">Fecha Hasta</label>
<input type="date" class="form-control " name="fechaHasta" id="fechaHasta" >
<label for="cargo" class="form-label">Cargo</label>
<input type="cargo" class="form-control " name="cargo" id="cargo" >
<label for="refNombre" class="form-label">Referencia Nombre</label>
<input type="text" class="form-control " name="referencias" id="refNombre" >
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="agregarFieldExpierncia()" data-dismiss="modal">Agregar</button>
</div>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper --> <!-- Optional JavaScript; choose one of the two! -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
<script src="./main.js"></script> <script src="./main.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment