0

hola necesito de su ayuda,lo que necesito es que al ingresar cantidades en los item_1 y item_2 ,y marcar un radiobutton ,en el mismo donde se ingreso la cantidad inicial (item_1 y item_2) se muestre la nueva cantidad en este caso que al presionar el radiobutton se multiplique por una "x" cantidad.

este es el codigo:

<!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>operacion2</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><input type="radio" name="item_4[]" class="form-control item_4" /></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 Details Saved</div>');
     }
    }
   });
  }
  else
  {
   $('#error').html('<div class="alert alert-danger">'+error+'</div>');
  }
 });
 
});
</script>

1
  • Según entiendo lo que quieres es presionar el checkbox y que eso aplique un calculo al primer input ? pudiera ser operación1 una multiplicación y el otro una división por ejemplo... Commented el 25 nov. 2018 a las 23:05

1 respuesta 1

0

Algo como esto ?

// Se guarda el input que recibirá el dato
var input = document.querySelector('#input');
// Se guarda el checkbox que ejecutara la acción
var checkbox = document.querySelector('#checkbox');
// Se asigna la funcion cuando el elemento reciba un cambio
checkbox.addEventListener('change', executeOperation);


function  executeOperation() {
// Se valida que el input contentga algun valor
    if (!input.value) {
        return;
    }
    // En caso de que el input sea checkeado se multiplica el valor dentro del input
    if (this.checked) {
        input.value = Number(input.value) * 2;
    }
}
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Stackoverflow helps</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<form>
    <label>inserte dato</label>
    <input type="number" placeholder="Inserte dato" id="input">
    <input type="checkbox" id="checkbox">
    <button id="submitButton">Submit</button>
</form>

<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

2
  • gracias por la ayuda,en respuesta a tu comentario ,al presionar el radiobutton la operación se tendría que realizar en los 2 input
    – outsider
    Commented el 26 nov. 2018 a las 6:10
  • intente la de forma que publicaste pero no me funciona.
    – outsider
    Commented el 26 nov. 2018 a las 8:16

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.