HTML - Operaciones en <input> mediante radiobutton

 
Vista:
sin imagen de perfil
Val: 5
Ha aumentado su posición en 21 puestos en HTML (en relación al último mes)
Gráfica de HTML

Operaciones en <input> mediante radiobutton

Publicado por Alejandro (3 intervenciones) el 26/11/2018 09:40:03
hola necesito su ayuda
lo que sucede es que necesito es que al ingresar a una cantidad a los input sea item_1 y item_2 y presionar el radiobutton se realice una operacion (en este caso una multiplicación por x cantidad) y se actualice el valor de los inputs con las nuevas cantidades.

aqui el codigo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br />
  <div class="container">
   <h3 align="center"></h3>
   <br />
   <h4 align="center">Enter Item </h4>
   <br />
   <form method="post" id="insert_form">
    <div class="table-repsonsive">
     <span id="error"></span>
     <table class="table table-bordered" id="item_table">
      <tr>
       <th>Enter Item_1</th>
       <th>Enter Item_2</th>
       <th>operacion1</th>
 
       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
      </tr>
     </table>
     <div align="center">
      <input type="submit" name="submit" class="btn btn-info" value="Insert" />
     </div>
    </div>
   </form>
  </div>
 </body>
</html>
 
<script>
$(document).ready(function(){
 
 $(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="item_1[]" class="form-control item_1" /></td>';
  html += '<td><input type="text" name="item_2[]" class="form-control item_2" /></td>';
    html += '<td><input type="radio" name="item_3[]" class="form-control item_3" /></td>';
 
 
  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $('#item_table').append(html);
 });
 
 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
 
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.item_1').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Item 1 at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
 
  $('.item_2').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Item 2 at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
 
  var form_data = $(this).serialize();
  if(error == '')
  {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
     if(data == 'ok')
     {
      $('#item_table').find("tr:gt(0)").remove();
      $('#error').html('<div class="alert alert-success">Item Saved</div>');
     }
    }
   });
  }
  else
  {
   $('#error').html('<div class="alert alert-danger">'+error+'</div>');
  }
 });
 
});
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzer0x
Val: 100
Bronce
Ha disminuido 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

Operaciones en <input> mediante radiobutton

Publicado por abzer0x (27 intervenciones) el 26/11/2018 23:32:40
Hola, te comparto un pequeño código que hice, el mismo esta comentado.
Nos comentas si es lo que buscas.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="item_1[]" class="form-control item_1" /></td>';
  html += '<td><input type="text" name="item_2[]" class="form-control item_2" /></td>';
  html += '<td><input type="radio" name="item_3[]" class="form-control item_3" /></td>';
  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $('#item_table').append(html);
 
  // Event Handler for radiobutton
  $(".item_3").on("click", function() {
	  const parent = $(this).parent().parent(); // Utilizo la función parent() para seleccionar el elemento <tr>  donde se encuentra el input,
	  											// esto es para que busque y seleccione aquellos inputs con las clases .item_1 e .item_2 unicamente
												// dentro de esta, ya que si no realizo esto y busco de forma global selecciona los elementos de la primera fila
	  const item1 = parseInt(parent.find(".item_1").val());
	  const item2 = parseInt(parent.find(".item_2").val());
	  alert(item1 * item2); // Realizo la operación. Aquí debería ir el elemento donde se mostraría el resultado final.
  });
 });
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar