CODEWITHSUNDEEP
javascriptjquery
yaylitzis
yaylitzis

Reputation: 5534

Form isn't submitted after checking the input

In a form a user among other things, fills an integer. When he submit the form, I want to check that number. If the number < 100 then the form to be submitted normally. If not, then I want to show him a confirmation window and if selects Ok then the form to be submitted.

$('form').on('submit', function(e) {
  e.preventDefault();
  var quantity = $('#quantity').val(); // Get the user input.
  var quantityToCompare = 100; //the number to compare

  if (quantity < quantityToCompare) {
    console.log("Submit the form");
    $('form').submit();
  } else {
    console.log(quantity + " is bigger from " + quantityToCompare);

    var confirmation = confirm("Do you want to continue with the submit ?");
    if (confirmation) {
      console.log("submitting now ...");
      $('form').submit();
    } else {
      console.log("Clicked Cancel");
    }
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-12">
    <form id="form" method="post" role="form">

      <label class="col-md-1 control-label">Quantity</label>
      <div class="col-md-2">
        <input id="quantity" type="number" class="form-control" name="quantity" required>
      </div>

      <div class="form-group">
        <div class="col-sm-2">
          <button type="submit" name="formAction" class="btn btn-success">Submit</button>
        </div>
      </div>

    </form>
  </div>
</div>

I have 2 problems. If the user fills a number < 100 then I get an error too much recursion and if the user fills a bigger number and then the pop up window is constantly opening and I can't submit the form.

What I am missing?

Upvotes: 1

Views: 64

Answers (5)

Milan Chheda
Milan Chheda

Reputation: 8249

$('#submit').on('click', function(e) {
  e.preventDefault();
  var quantity = $('#quantity').val(); // Get the user input.
  var quantityToCompare = 100; //the number to compare
  var submitFlag = true;
  if (quantity < quantityToCompare) {
    submitFlag = true;
  } else {
    submitFlag = false;
  }

  if (!submitFlag) {
    var confirmation = confirm("Do you want to continue with the submit ?");
    if (confirmation) {
      submitFlag = true;
    } else {
      console.log("Clicked Cancel");
    }
  }

  if (submitFlag)
    console.log("SUBMIT"); // $("#form").submit();
  else
    return false;

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-12">
    <form id="form" method="post" role="form" action='http://www.google.com'>

      <label class="col-md-1 control-label">Quantity</label>
      <div class="col-md-2">
        <input id="quantity" type="number" class="form-control" name="quantity" required>
      </div>

      <div class="form-group">
        <div class="col-sm-2">
          <button name="formAction" id="submit" class="btn btn-success">Submit</button>
        </div>
      </div>

    </form>
  </div>
</div>

Upvotes: 0

Koushik Chatterjee
Koushik Chatterjee

Reputation: 4175

e.preventDefault(); in your submit handler is preventing to submit. do it only when you don't want allow for submit.

EDIT

In additon: Even if you will call $('form').submit() that will call the same event recursively and will be again prevented and will call recursively again and again. so, in the conditions you are nit interested to submit, call e.preventDefault(); only in those block and remove the $('form').submit(), you are already in submit event because it was submitted.

Upvotes: 1

adeneo
adeneo

Reputation: 318182

To submit the form based on a condition inside a jQuery submit event handler, you have to call the native submit event, otherwise the event handler is just called again, and the form is prevented from submitting

$('form').on('submit', function(e) {
  e.preventDefault();
  var quantity = $('#quantity').val(); // Get the user input.
  var quantityToCompare = 100; //the number to compare

  if (quantity < quantityToCompare) {
    this.submit();
  } else {
    var confirmation = confirm("Do you want to continue with the submit ?");
    if (confirmation) {
      this.submit();
    } else {
      console.log("Clicked Cancel");
    }
  }
});

Upvotes: 1

prasanth
prasanth

Reputation: 22490

Remove the form submit inside the form submit function .its produce the loop effect .that why its give alert again and again.Do your function when from submitted successfully 

$('form').on('submit', function(e) {
  e.preventDefault();
  var quantity = $('#quantity').val(); // Get the user input.
  var quantityToCompare = 100; //the number to compare

  if (quantity < quantityToCompare) {
    console.log("Submit the form");
    //do your function
  } else {
    console.log(quantity + " is bigger from " + quantityToCompare);
    var confirmation = confirm("Do you want to continue with the submit ?");
    if (confirmation) {
      console.log("submitting now ...");
      //do your function
    } else {
      console.log("Clicked Cancel");
    }
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-12">
    <form id="form" method="post" role="form">

      <label class="col-md-1 control-label">Quantity</label>
      <div class="col-md-2">
        <input id="quantity" type="number" class="form-control" name="quantity" required>
      </div>

      <div class="form-group">
        <div class="col-sm-2">
          <button type="submit" name="formAction" class="btn btn-success">Submit</button>
        </div>
      </div>

    </form>
  </div>
</div>

Upvotes: 0

Selvakumar
Selvakumar

Reputation: 537

$('form').submit(); this code calls recursively.

Upvotes: 0

Related Questions