jQuery Form Submit Problem

JavaScript
1

Hello

I have a form where I am trying to set the maximum order amount to 100.

It works fine when you click submit - if you try to order 210, it brings an error message. If the order is less than 101 (per row) then it prints the order details to the screen.

However if order details are already on the screen, it will then accept larger orders than 100.

What am I doing wrong? It is probably something simple! But it is sending me crazy.

My jquery is below, I have a Codepen here http://codepen.io/jameswinfield/pen/evvjJz

$('.add').click(function() {
            if (($(this).prev().val()) < 100) {
                $(this).prev().val(+$(this).prev().val() + 1);
            }

        });
        $('.sub').click(function() {
            if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
        });
        
        $("input").on("change", function() {
   if (($(this).val()) > 100) {
       $('#error').html("Maximum order is 100");
   } else {
       $('#error').remove();
   }
});

        $(function() {
            $('form').submit(function(e) {
                e.preventDefault(); // Stop form from refreshing
                if ($('#error').text() === "Maximum order is 100") {
                    return false;
                } else {
                $('#here').html('You have ordered:' + '<br><br>' + 'Item 1: ' + $('input[name="standard-box"]').val() + '<br>' + ' Item 2: ' + $('input[name="archive-box"]').val() + '<br>' + ' Item 3: ' + $('input[name="packing-tape"]').val());
                }
            });
        });

Much appreciated
James

2

Hey, just checking I understood your problem: you have three input elements and the maximum that anyone should be able to enter into any of them is 100. If any of these inputs contains a value > 100 then the form should not submit. Is that correct?

3

That is correct, yes

4

Something like this should do you.

DEMO

<!DOCTYPE HTML>
<html>
  <head>
    <meta chraset="utf-8">
    <title>Limit inputs between 0-100</title>
    <style>
      .error{
        background: red;
      }
    </style>
  </head>
  
  <body>
    <form id="myForm">
      <p>
        <label>
          Item 1:
          <input type="number" min="1" max="100" value="0" />
        </label>
      </p>
      <p>
        <label>
          Item 2:
          <input type="number" min="1" max="100" value="0" />
        </label>
      </p>
      <p>
        <label>
          Item 3:
          <input type="number" min="1" max="100" value="0" />
        </label>
      </p>
      <div id="msg"></div>
      <input type="submit"></input>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      function validateInputs(){
        $inputs.each(function(){
          if(this.value === "") this.value = "0";

          const val = Number(this.value);
          if (val < 0 || val > 100) {
            $(this).addClass("error");
          } else {
            $(this).removeClass("error");
          }

          if($(".error").length) {
            $msg.text("Item value must be between 0 and 100");
            $submit.attr("disabled", true);
          } else {
            $msg.text("");
            $submit.removeAttr("disabled");
          }
        });
      }

      const $inputs = $("#myForm input[type='number']");
      const $submit = $("#myForm input[type='submit']");
      const $msg = $("#msg");

      $inputs.on("keyup mouseup", validateInputs);
    </script>
  </body>
</html>
5

Thanks very much for this, that has not only helped me with the task but helped me quite a bit in understanding how to structure things. Much appreciated.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.