Counter in an input with Javascript

Navigation
0

How to do so that a new input is added when a button is pressed and it changes the value of an input: For example, if Before evaluations 1 now say Evaluations 2 ?. I explain myself more in detail .. I will have some capture first so you can understand better.

Each press on the "More +" button adds a new field (This is a form). But I can not find the way to say "Evaluation" for each field that is added, this one changes in number, ie:

Evaluation 1

Evaluation 2

Evaluation 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>
    
asked by Juan Osio 27.09.2018 в 03:48
source

2 answers

2

It would alter the javascript fragment in the following way: 

$(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();
  });
});

So you do not have to worry about modifying the HTML file.

    
answered by 27.09.2018 / 04:56
source
0

In the event on click is where you are adding the element, what you can do is change your function: 

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

By: 

$("#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");
});

To your input I added a class called "input-add", this to know how many inputs with that class exist and work as a counter, we get the amount of inputs by: 

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

And we concatenated it to the id and the text, finally the code would look like this: 

$(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>
    
answered by 27.09.2018 в 04:13
mysql php registration form does not work correctly Schedule in JavaScript