Home / Questions / 390977
Accepted
HENRY VARGAS
Asked: 2020-09-21 11:41:27 +0800 CST 2020-09-21 11:41:27 +0800 CST

How to activate "submit" button when the sum "Total" has to meet the condition that it has to be "greater than" 50 (for example)

  • 772

please if you can help me with this: I need the submit button to be disabled until the condition that "total" is equal to or greater than 50 is met. In my code, the "total" is formed by checking the checkboxes of each product.

I'm learning to program and I'm having some problems, I haven't detected the error yet, it may be in the sum of the checkbox values, which are linked to a java code, but I think it's most likely in applying the conditional.

Help please, here is the code.

$(document).ready(function() {

  $(document).on('click keyup', '.mis-checkboxes,.mis-adicionales', function() {
    calcular();
  });

});

function calcular() {
  var tot = $('#total');
  tot.val(0);
  $('.mis-checkboxes,.mis-adicionales').each(function() {
    if ($(this).hasClass('mis-checkboxes')) {
      tot.val(($(this).is(':checked') ? parseFloat($(this).attr('tu-attr-precio')) : 0) + parseFloat(tot.val()));
    } else {
      tot.val(parseFloat(tot.val()) + (isNaN(parseFloat($(this).val())) ? 0 : parseFloat($(this).val())));
    }
  });
  var totalParts = parseFloat(tot.val()).toFixed(2).split('.');
  tot.val('$' + totalParts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.' + (totalParts.length > 1 ? totalParts[1] : '00'));
}
if (true) {}
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<html>

 <head>

  <td>Productos: </td>
  <br>
  <br>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <table width="500" border="2">
    <ul>
      <tr>

        <td>
          <input type="checkbox" tu-attr-precio="35" id="Café" class="mis-checkboxes" name="checkbox[]" value="Café">
          <label for="Café">Café</label>
          <br></td>
        <td>35</td>
      </tr>

      <tr>

        <td>


          <input type="checkbox" tu-attr-precio="29" id="Té" class="mis-checkboxes" name="checkbox[]" value="Te">
          <label for="Té">Té</label>
          <br></td>

        <td>29</td>
      </tr>



      <td>


        <input type="checkbox" tu-attr-precio="28" id="chocolate" class="mis-checkboxes" name="checkbox[]" value="chocolate">
        <label for="chocolate">chocolate</label>
        <br></td>

      <td>28</td>
      </tr>


      <td>
        <input type="checkbox" tu-attr-precio="10" id="choclo" class="mis-checkboxes" name="checkbox[]" value="choclo">

        <label for="choclo">choclo</label>

        <br></td>

      <td>10</td>


      <table>

      </table>
      <br>
      <label><strong>Total</strong><label>
<input type="text" id="total" placeholder="0.00"required>
  <script>
                          
          if (total.value <= 50) {
            console.log("Se muestra")
            enviar.removeAttribute('disabled')
          } else {
            enviar.setAttribute('disabled', "true");
          }
    
</script>

<input type="submit"  id="enviar" value="Enviar" disabled>
</html>

validación

1 Answers

  1. Best Answer

    Basically you got it right. You just have some small bugs:

    • If you can group all your js code in a single place. It will be much more comfortable for you to work like this. In your case, I have put all the js in the same place, because there is no reason for you to have a script tag with the event on one side and the js code with the logic on the other side.

    • I have "replaced" the event that you have put with the following:

    1. Execute your calculate() function
    2. Get the total. We simply remove the dollar sign and pass it to a float/int (if you want).
    3. We change the methods attr , removeAttr for the method prop , valid for altering html properties or obtaining their value. When you want to remove the disabled property from an element, simply remove the property (empty string).

    list item

    $(document).ready(function() {

  $('input:checkbox').on('click',function(){
          calcular();
           var enviar = $('#enviar');
           var str_total = $('#total').val();
           var total = parseFloat(str_total.substr(1));
          if (total <= 50) {
            enviar.prop('disabled', "true")
          } else {
            enviar.prop('disabled', "");
          }
    });

});

function calcular() {
  var tot = $('#total');
  tot.val(0);
  $('.mis-checkboxes,.mis-adicionales').each(function() {
    if ($(this).hasClass('mis-checkboxes')) {
      tot.val(($(this).is(':checked') ? parseFloat($(this).attr('tu-attr-precio')) : 0) + parseFloat(tot.val()));
    } else {
      tot.val(parseFloat(tot.val()) + (isNaN(parseFloat($(this).val())) ? 0 : parseFloat($(this).val())));
    }
  });
  var totalParts = parseFloat(tot.val()).toFixed(2).split('.');
  tot.val('$' + totalParts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.' + (totalParts.length > 1 ? totalParts[1] : '00'));
}
if (true) {}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<html>

 <head>

  <td>Productos: </td>
  <br>
  <br>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <table width="500" border="2">
    <ul>
      <tr>

        <td>
          <input type="checkbox" tu-attr-precio="35" id="Café" class="mis-checkboxes" name="checkbox[]" value="Café">
          <label for="Café">Café</label>
          <br></td>
        <td>35</td>
      </tr>

      <tr>

        <td>


          <input type="checkbox" tu-attr-precio="29" id="Té" class="mis-checkboxes" name="checkbox[]" value="Te">
          <label for="Té">Té</label>
          <br></td>

        <td>29</td>
      </tr>



      <td>


        <input type="checkbox" tu-attr-precio="28" id="chocolate" class="mis-checkboxes" name="checkbox[]" value="chocolate">
        <label for="chocolate">chocolate</label>
        <br></td>

      <td>28</td>
      </tr>


      <td>
        <input type="checkbox" tu-attr-precio="10" id="choclo" class="mis-checkboxes" name="checkbox[]" value="choclo">

        <label for="choclo">choclo</label>

        <br></td>

      <td>10</td>


      <table>

      </table>
      <br>
      <label><strong>Total</strong><label>
<input type="text" id="total" placeholder="0.00"required>

<input type="submit"  id="enviar" value="Enviar" disabled>
</html>

    • 0