How can I perform an operation in input with radiobutton HTML?

Question

How can I perform an operation in input with radiobutton HTML?

Navigation

#1 by (0 votes)

0

hello I need your help, what I need is that when entering quantities in item_1 and item_2, and mark a radiobutton, in the same one where the initial amount was entered (item_1 and item_2) the new amount in this case will be shown that pressing the radiobutton is multiplied by an "x" amount.

this is the code:

<!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>

javascript html

asked by outsider 25.11.2018 в 05:35

source

1 answer

I see many errors in my program, these are doing a novel in Java, I am learning on my own to use the JFrame and the Jbutton how to receive values continuously from one form to another in VB.NET?

score 0 · Answer 1

Something like this?

// 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>