0

estoy tratando de hacer una inscripcion que al completar los inputs nombre, apellido ,telefono y al presionar inscribirse me muestre un modal con los datos ingresados, pero no me muestra nada por lo visto tengo problemas al querer concatenar el texto ingresado, que debería cambiar en mi código para que funcione?

pd: quiero concatenar el valor de los inputs por que si pongo text() se va modificando a cada rato el valor ya que se puede agregar mas inputs en caso de que mas personas quieran inscribirse

$(document).ready(function(){
 $(".formulario").on('click', '.remove' , function(){
       
       $(this).parent().hide();

   })


    $(".formulario").on('click', '.no-remove', function(){
       
         $('.borrar-dato').val('');
   })


    $(".add").click(function(){
         
         const formulario = $(".formulario");
         const div = $("<div>");
         const input1 = $("<input>");
         const input2 = $("<input>");
         const input3 = $("<input>");

         div.addClass("remove-container");
         div.attr("id" , "datos");
         input1.addClass("inscripcion");
         input2.addClass("inscripcion");
         input3.addClass("inscripcion");

         input1.attr("type" , "text");
         input1.attr("id" , "nombre");
         input1.attr("placeholder" , "Nombre");

         input2.attr("type" , "text");
         input2.attr("id" , "apellido");
         input2.attr("placeholder" , "Apellido");


         input3.attr("type" , "text");
         input3.attr("id" , "telefono");
         input3.attr("placeholder" , "Telefono");


         formulario.append(div);
         div.append("<div class='icon-minus remove'>-</div>")
         div.append(input1);
         div.append(input2);
         div.append(input3);
        
    })



function modal(){

let boton= $("#btnModal");
boton.click(function(){
let modal=$("#modal");
let container = $(".modalContainer");
    

    modal.css("display","block");
    
});

let cerrarModal = $(".close");
cerrarModal.click(function(){

 let modal=$("#modal");

    modal.css("display","none");
    

    
});


}

modal();

//mostrar datos ingresados

const datos = {
   nombre:$("#nombre").val(),
   apellido:$("#apellido").val(),
   telefono:$("#telefono").val(),
    }

$("#btnModal").click(function(){

   function mostrarInscriptos(datos){
    
    let inscriptos = $(".inscriptos");
    let pNombre = $("<p class='nombre'></p");
    let pApellido = $("<p class='apellido'></p");
    let pTelefono = $("<p class='telefono'></p");

    inscriptos.append(pNombre);
    inscriptos.append(pApellido);
    inscriptos.append(pTelefono);

     for(dato in datos){

        $(".nombre").concat('Nombre: ',datos[dato].nombre);
        $(".apellido").concat(', Apellido: ',datos[dato].apellido);
        $(".telefono").concat(', Telefono: ',datos[dato].telefono);

     }
   }

   mostrarInscriptos(datos);

   })



})
.add , .remove , .no-remove{
    font-weight: bold;
    cursor: pointer;
}

.modal-container{
  display: none; 
  position: fixed; 
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal-content{
     background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid lightgray;
      border-top: 10px solid #000;
      width: 60%;
      height: 60%;
}

.modal-container .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .modal-container .close:hover,
    .modal-container .close:focus {
      color: #f00;
      text-decoration: none;
      cursor: pointer;
    }
<!DOCTYPE html>
<html>
 <head> 
  <meta charset= "utf-8">
  <meta name="viewport" content="width=device-width , user-scalable=no , initial-scale=1 , maximum-scale=1 , minium-scale=1">

  <link rel="stylesheet" type="text/css" href="css/form.css">
  <link rel="stylesheet" type="text/css" href="css/modal.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/form.js"></script>
  <script type="text/javascript" src="js/modal.js"></script>


 </head>
  <body>

       <div class="datos">
            <p class="inscripcion">Inscripcion</p>
        
           </div>
           <form class="formulario" name="formulario" id="formulario">
                  
                 <div class="no-remove-container" id="datos">
                   <div class="icon-minus no-remove">-</div>
                   <input type="text" id="nombre" class="borrar-dato inscripcion" placeholder="Nombre"> 
                   <input type="text" id="apellido" class="borrar-dato inscripcion" placeholder="Apellido">
                   <input type="text" id="telefono" class="borrar-dato inscripcion" placeholder="Telefono">
                 </div>

                <div class="remove-container" id="datos">
                   <div class="icon-minus remove">-</div>
                   <input type="text" id="nombre" class="inscripcion" placeholder="Nombre">
                   <input type="text" id="apellido" class="inscripcion" placeholder="Apellido">
                   <input type="text" id="telefono" class="inscripcion" placeholder="Telefono">
               </div>
               <div class="remove-container" id="datos">
                   <div class="icon-minus remove">-</div>
                   <input type="text" id="nombre" class="inscripcion" placeholder="Nombre">
                   <input type="text" id="apellido" class="inscripcion" placeholder="Apellido">
                   <input type="text" id="telefono" class="inscripcion" placeholder="Telefono">
              </div>

           </form>

             <div class="agregar">
             <p class="add">+</p> <h4>Agregar persona</h4>
           </div>
            <input type="button" value="INSCRIBIRSE" class="boton2" id="btnModal" form="formulario">
            <!--------modal----------->
            <div  id="modal" class="modal-container">
              <div class="modal-content">
                <span class="close">X</span>
                <h2 class="estado-inscripcion">¡Felicidades se ha inscrito correctamente!</h2>
                <br>
                <div class="inscriptos">
                 
                </div>
              </div>
            </div>


       </div>
  

  </body>
</html>

1
  • Por qué estás tomando el tag input 3 veces y un div? Usa clases el 15 feb. 2021 a las 17:59

1 respuesta 1

1

Te recomiendo que para tus filas de tu formulario no uses ids repetido como id="datos". Los id deben ser únicos especificación. En cambio usa class. Para este ejemplo usé class="... item"

<form class="formulario" name="formulario" id="formulario">
              /*class=" item"*/
             <div class="no-remove-container item" /*id="datos"*/>
               <div class="icon-minus no-remove">-</div>
               <input type="text" id="nombre" class="borrar-dato inscripcion" placeholder="Nombre"> 
               <input type="text" id="apellido" class="borrar-dato inscripcion" placeholder="Apellido">
               <input type="text" id="telefono" class="borrar-dato inscripcion" placeholder="Telefono">
             </div>

En tu archivo .js, específicamente al dar click en btnModal. puedes aplicar el método nativo map() y template strings usando ` .Te va ayudar mucho a reducir código.

$("#btnModal").click(function () {
    //Obtienes todas tus filas del formulatio
    let rows = document.getElementsByClassName("item")
    //Recorremos cada fila con el método nativo map()
    let html = Array.from(rows).map(item => {
        console.log(item);
        let nombre = $(item).find("#nombre").val()
        let apellido = $(item).find("#apellido").val()
        let telefono = $(item).find("#telefono").val()
        //Literal strings `` para retornar html
        return `<p class='nombre'>${nombre}</p><p class='Apellido'>${apellido}</p><p class='telefono'>${telefono}</p>`
    })
    //En ves de concat usamos join para convertir el array en cadena, y lo pintamos
    $(".inscriptos").html(html.join(""))
})

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.