0

¿Como hacer para que al presionar un botón se agregue un input nuevo y este cambie el valor de un input: Por ejemplo si Antes decia Evaluaciones 1 ahora diga Evaluaciones 2?. Me explico mas detalladamente.. Dispondré primero de unos capture para que puedan comprender mejor.

introducir la descripción de la imagen aquí

Cada que se presiona en el boton de "Más +" este añade un nuevo campo (Esto es un formulario). Pero no encuentro la manera de hacer que donde diga "Evaluacion" por cada campo que se agregue, este cambie de numero es decir:

Evaluación 1

Evaluación 2

Evaluación 3

      $(function(){
   
      $("#adicional").on('click', function(){
        $("#tabla tbody tr:eq(0)").clone().removeClass('fila-fija').appendTo("#tabla");
      });
     
      $(document).on("click",".eliminar",function(){
        var parent = $(this).parents().get(0);
        $(parent).remove();
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
   <div class="panel-heading mb-4">
  <h3 class="panel-title">Registrar plan de evaluación</h3>
   <select class="form-control" id="exampleFormControlSelect1" name="tipo">
      <option value="Oratoria">Oratoria</option>
</select>
   </div>

			
<table class="table table-striped"  id="tabla">

  <thead>
 <tr class="fila-fija">
     <td>Evaluación</td>
	 <td>Ponderación</td>
	 <td>Actividad a realizar</td>
	 <td></td>
  </tr>
  </thead>
                
  <tbody>
 <tr class="fila-fija">
 <td><input type="text" id= "evaluacion" class="form-control" value="Evaluacion 1" disabled /></td>
 <td>
   <select class="form-control" id="exampleFormControlSelect1" name="tipo">
      <option value="5">5%</option>
      <option value="10">10%</option>
      <option value="15">15%</option>
      <option value="20">20%</option>
       <option value="25">25%</option>
     </select></td>
  <td><input type="text" class="form-control" placeholder="Actividad que se realizara"/></td>
					
<td class="eliminar"><input type="button" class="btn btn-danger" value="Menos -"/></td>
   </tr>
 </tbody>
 </table>

   <div class="btn-der">
<input type="submit" name="insertar" value="Registrar" class="btn btn-primary"/>
<button id="adicional" name="adicional" type="button" class="btn btn-warning"> Más + </button>

   </div>
 </form>

2 respuestas 2

2

Alteraría el fragmento de javascript de la siguiente manera:

$(function(){
  $("#adicional").on('click', function() {
    var seleccion = $('#tabla tbody tr').last();
    var num = +seleccion.find('input#evaluacion').attr('value').split(' ')[1];

    var nuevoElemento = seleccion.clone().removeClass('fila-fija')
    nuevoElemento.appendTo("#tabla");
    nuevoElemento.find('input#evaluacion').attr('value','Evaluacion ' + (num + 1)) 
  });

  $(document).on("click",".eliminar",function(){
    var parent = $(this).parents().get(0);
    $(parent).remove();
  });
});

Así no tendrías que preocuparte en modificar el archivo HTML.

1
  • Funciona perfecto, muchas gracias Daniel!
    – Juan Osio
    el 27 sep. 2018 a las 3:48
0

En el evento on click es donde estas agregando el elemento, lo que puedes hacer es cambiar tu función :

  $("#adicional").on('click', function(){
    $("#tabla tbody tr:eq(0)").clone().removeClass('fila-fija').appendTo("#tabla");
  });

Por:

$("#adicional").on('click', function(){
var cantidad = $('.input-add').length + 1;
var nuevaFila = '<tr class="fila-fija">';
    nuevaFila +=   '<td>';
    nuevaFila +=      '<input type="text" id= "evaluacion-' + cantidad + '" class="input-add form-control" value="Evaluacion ' + cantidad + '" disabled />'
    nuevaFila +=   '</td>';
    nuevaFila +=   '<td>';
    nuevaFila +=       '<select class="form-control" id="exampleFormControlSelect1" name="tipo">';
    nuevaFila +=           '<option value="5">5%</option>';
    nuevaFila +=           '<option value="10">10%</option>';
    nuevaFila +=           '<option value="15">15%</option>';
    nuevaFila +=           '<option value="20">20%</option>';
    nuevaFila +=           '<option value="25">25%</option>';
    nuevaFila +=       '</select>';
    nuevaFila +=   '</td>';
    nuevaFila +=   '<td><input type="text" class="form-control" placeholder="Actividad que se realizara"/></td>';
    nuevaFila +=   '<td class="eliminar"><input type="button" class="btn btn-danger" value="Menos -"/></td>';
    nuevaFila += '</tr>';
 $(nuevaFila).appendTo("#tabla-body");
});

A tu input le agregue una clase llamada "input-add", esto para saber cuantos inputs con esa clase existen y funcione a manera de contador, obtenemos la cantidad de inputs mediante:

var cantidad = $('.input-add').length + 1;

Y se lo concatenamos a el id y a el texto, finalmente el código quedaría así:

$(function(){
   
   $("#adicional").on('click', function(){
var cantidad = $('.input-add').length + 1;
var nuevaFila = '<tr class="fila-fija">';
    nuevaFila +=   '<td>';
    nuevaFila +=      '<input type="text" id= "evaluacion-' + cantidad + '" class="input-add form-control" value="Evaluacion ' + cantidad + '" disabled />'
    nuevaFila +=   '</td>';
    nuevaFila +=   '<td>';
    nuevaFila +=       '<select class="form-control" id="exampleFormControlSelect1" name="tipo">';
    nuevaFila +=           '<option value="5">5%</option>';
    nuevaFila +=           '<option value="10">10%</option>';
    nuevaFila +=           '<option value="15">15%</option>';
    nuevaFila +=           '<option value="20">20%</option>';
    nuevaFila +=           '<option value="25">25%</option>';
    nuevaFila +=       '</select>';
    nuevaFila +=   '</td>';
    nuevaFila +=   '<td><input type="text" class="form-control" placeholder="Actividad que se realizara"/></td>';
    nuevaFila +=   '<td class="eliminar"><input type="button" class="btn btn-danger" value="Menos -"/></td>';
    nuevaFila += '</tr>';
 $(nuevaFila).appendTo("#tabla-body");
   });
  
 
  $(document).on("click",".eliminar",function(){
    var parent = $(this).parents().get(0);
    $(parent).remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
   <div class="panel-heading mb-4">
  <h3 class="panel-title">Registrar plan de evaluación</h3>
   <select class="form-control" id="exampleFormControlSelect1" name="tipo">
      <option value="Oratoria">Oratoria</option>
</select>
   </div>

			
<table class="table table-striped"  id="tabla">

  <thead>
 <tr class="fila-fija">
     <td>Evaluación</td>
	 <td>Ponderación</td>
	 <td>Actividad a realizar</td>
	 <td></td>
  </tr>
  </thead>
                
  <tbody id="tabla-body">
 <tr class="fila-fija">
 <td><input type="text" id= "evaluacion" class=" input-add form-control" value="Evaluacion 1" disabled /></td>
 <td>
   <select class="form-control" id="exampleFormControlSelect1" name="tipo">
      <option value="5">5%</option>
      <option value="10">10%</option>
      <option value="15">15%</option>
      <option value="20">20%</option>
       <option value="25">25%</option>
     </select></td>
  <td><input type="text" class="form-control" placeholder="Actividad que se realizara"/></td>
					
<td class="eliminar"><input type="button" class="btn btn-danger" value="Menos -"/></td>
   </tr>
 </tbody>
 </table>

   <div class="btn-der">
<input type="submit" name="insertar" value="Registrar" class="btn btn-primary"/>
<button id="adicional" name="adicional" type="button" class="btn btn-warning"> Más + </button>

   </div>
 </form>

2
  • Genial!, el problema es que ahora solo agrega un input nuevo, pero el tema de ponderación y la actividad a realizar ya no se clona.. La idea de todo esto es hacer un arreglo con cada input para poder guardarlo en una base de datos
    – Juan Osio
    el 27 sep. 2018 a las 2:39
  • Actualice la respuesta, solo estaba clonando el input, pero ahora construimos la fila completa y se la agregamos al cuerpo de la tabla, saludos. el 27 sep. 2018 a las 3:22

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.