2

Como puedo hacer para agregar a través de un botón el texto que se escribe en el input, este debe agregar en la parte inferior del input ya sea creando un input dinámico y agregarle un estado disabled mediante Jquery o Javascript, no se como hacerlo.

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Example</title>

    <!-- CDN Bootstrap 4 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- CSS  -->
    <link href="main.css" rel="stylesheet">

    <!-- CDN Jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>
    <div class="container">
      <form class="form-horizontal">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        <button type="button" class="btn btn-primary">Agregar</button>
      </div>
      </form>
    </div>
  </body>
</html>

5
  • Qué es lo que haz intentado? deberías poner tu código JS. el 30 abr. 2019 a las 16:45
  • @VickMuñoz Es que no se como hacerlo, que me recomiendas tu o planteas :(, estoy perdido
    – zerokira
    el 30 abr. 2019 a las 16:45
  • 1
    Requieres que se vaya agregando 1x1 o que se reescriba el nombre del usuario? el 30 abr. 2019 a las 16:47
  • @VickMuñoz Agregando 1x1 abajo del input que luego se van a enviar con el formulario estos textos que se van agregando
    – zerokira
    el 30 abr. 2019 a las 16:48
  • ya quedo listo lo que solicitas. el 30 abr. 2019 a las 17:50

3 respuestas 3

3

Espero te funcione creo los inputs y los deshabilito para que no puedan ser modificados.

var btn = document.getElementById('agregar');
var user = document.getElementById('name');
var contenedor = document.getElementById('almacenar');

var contador = 0;

btn.addEventListener('click',function(){

if(user.value == ""){ //si no ingresa nada en el input le manda mensaje de que ingrese un nombre
  alert('ingresa un nombre de usuario');
  return false;
}else{

  contador++;
 
 console.log(contador);

   var input = document.createElement('input');//creo elemento input y le creo un salto de línea
   var salto = document.createElement('br');
   var btn_eliminar = document.createElement('button');
   btn_eliminar.innerText= "Eliminar";
   btn_eliminar.type = 'button';
   btn_eliminar.id = "btn"+contador;
   input.type = 'text';
   input.id = "input"+contador;
   input.name = 'btn'+contador;
   input.value = user.value;
   input.setAttribute('disabled',''); // propiedad disabled
   contenedor.append(salto);//todo lo agrego al div de almacenar
   contenedor.append(input);
   contenedor.append(btn_eliminar);
   console.log(input);
    console.log(btn_eliminar);
  
  var botones = document.getElementById('btn'+contador);
  
  botones.addEventListener('click', function(){
     
    var btn_id = document.getElementById(this.id);
    
    var input_name = document.querySelector('input[name='+this.id+']');
       contenedor.removeChild(btn_id);
       contenedor.removeChild(input_name);
       contenedor.removeChild(salto);
  
  });
  
}


});
<html lang="en">

  <head>
    <title>Example</title>

    <!-- CDN Bootstrap 4 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- CSS  -->
    <link href="main.css" rel="stylesheet">

    <!-- CDN Jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>
    <div class="container">
      <form class="form-horizontal">
      <div class="input-group">
        <input type="text" id="name" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        <div id="almacenar"></div>
        <button type="button" id="agregar" class="btn btn-primary">Agregar</button>
      </div>
      </form>
    </div>
  </body>
</html>

3

Puedes crear un arreglo de usuarios para luego poder enviarlo a tu controlador y alli poder recorrer ese array:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example</title>

    <!-- CDN Bootstrap 4 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

   <!-- CDN Jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script >
    function eliminar(correlativo){
        $('#fila'+correlativo).remove();

    }
    var correlativo=0;
    function miFuncion(){
        correlativo++;
        var username = $('#username').val();
        var myLabel = $('#miLabel');
        $('#tableUsuario').append("<tr id='fila"+correlativo+"'><td> <input type='hidden' name='arrayUsername[row"+correlativo+"][usuario]' value="+username+"/> <p>"+username+"</p></td><td><button  onClick='eliminar("+correlativo+")'>Eliminar</button></td></tr>");
    }

    </script>

</head>
<body>
    <div class="container">

            <div class="input-group">
                <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" id="username"><button type="button" class="btn btn-primary" onclick="miFuncion()">Agregar</button>
                <div class="form-horizontal">
                    <table id="tableUsuario" class="table">
                        <thead>
                            <tr>
                                <th>usuario</th>

                            </tr>
                        </thead>
                    </table>
                </div>

                
            </div>

    </div>
</body>
</html>

Si ves va dentro de un input tipo hidden que si quieres editarlo con otro boton solo debes quitarse esa propiedad para mostrarlo editable

3
  • Puedes hacer de que exista como un botón al lado que permita eliminar lo que se ha agregado?
    – zerokira
    el 30 abr. 2019 a las 17:09
  • @zerokira edite mi respuesta para agregar ese boton el 30 abr. 2019 a las 17:24
  • voy agregarlo a mi código creo que me ha de servir, gracias.
    – zerokira
    el 30 abr. 2019 a las 17:26
1

Se tiene que crear una función donde al dar click en el botón mandamos llamar a la misma, le asigne un id al input para poder tomar su valor, después se crea un párrafo y le insertamos el valor del input:

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Example</title>

    <!-- CDN Bootstrap 4 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- CSS  -->
    <link href="main.css" rel="stylesheet">

    <!-- CDN Jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <script>
  function agregar(){
	var valor =	document.getElementById("texto");
  var input = document.createElement("input");
  var inputs = document.getElementsByClassName("input-group");
  
  if (valor.value !== "") {
  	input.value = valor.value;
    input.disabled = "true";
    inputs[0].appendChild(input); 
    valor.value = "";
    
  }
}
  </script>
  </head>
  <body>
    <div class="container">
      <form class="form-horizontal">
      <div class="input-group">
        <input id="texto" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        <button type="button" class="btn btn-primary" onClick="agregar();">Agregar</button>
      </div>
      </form>
    </div>
  </body>
</html>

EDITADO: Se agrego el input disabled, ya quedaría de tu lado aplicar el estilo correspondiente.

4
  • puedes hacerlo para que cree un input debajo con un disabled y un button al lado que diga eliminar?
    – zerokira
    el 30 abr. 2019 a las 17:03
  • En lugar del <p> o en conjunto? el 30 abr. 2019 a las 17:03
  • En lugar de <p>, la idea es que se cree un input disabled y al lado un boton de eliminar para eliminar ese input
    – zerokira
    el 30 abr. 2019 a las 17:05
  • Edite mi respuesta el 30 abr. 2019 a las 17:09

Tu Respuesta

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

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