If/Else statement doesn't run inside function

Question

I am trying to validate some input fields. More specifically, the number always has to be positive.

EDIT: JS code

$(document).ready(function($) {
  $('.error-message').hide();
  function priceCheck() {
    $('input[class="price"]').each(function() {
      priceValue = $(this).val();
      console.log(priceValue); //only runs until here and seems it exists the function then

      if (priceValue <= 0) {
        evt.preventDefault();
        return false;
      } else {

      }
    });
  }

  //POST FORM
  $("#offerInquiry").on('valid.fndtn.abide', function(evt) {
    //prevent the default behaviour for the submit event
    // Serialize standard form fields:
    var formData = $(this).serializeArray();
    var checked = $("#terms").is(":checked");
    priceCheck();


    if (checked == false) {
      $('.error-message-container').empty();
      $('.error-message-container').append("<%= pdo.translate("
        checkBox.isObligatory ") %>");
      $('.error-message').show();
      $('.bid-error').css("display", "block");
      evt.preventDefault();
      return false;
    } else {
      loading();
      $.post("/inquiry.do?action=offer&ajax=1", formData,
        function(data) {
          window.top.location.href = data.redirectPage;
        });
    }

    return false;
  });
});

I have written a function that I separately call on form submit. But it only runs until the console log. Why is the if else statement not executed?

What error do you get? Is it possible you just go into the else branch and nothing else happens? — Michael W
– Michael W, Commented Sep 20, 2015 at 17:06
Are you sure? Have you tried console.log("if...") and console.log("else...") in your two blocks to see if it works? — Niet the Dark Absol
– Niet the Dark Absol, Commented Sep 20, 2015 at 17:06

nothingisnecessary · Accepted Answer · 2015-09-20 17:42:36Z

1

You are using evt.preventDefault() but you didn't capture the event in evt.

For example, you could try this instead: add the evt parameter to the priceCheck function, and then pass evt to that function when you call it, like this: priceCheck(evt)

HOWEVER, you do not need to use preventDefault here. You can simply return a boolean value from priceCheck and use that in your submit handler.

You also you had a couple errors with string concatentation. $('.error-message-container').append("<%= pdo.translate(" checkBox.isObligatory ") %>"); was missing the + to concat those strings together . You can view errors like this in the Console tab of your JavaScript debugger. (UPDATE This is JSP injection, but it may not work the way you are trying to use it here. The server function pdo.translate will only execute once, on the server side, and cannot be called via client script... but it can emit client script. Focus on solving other problems first, then come back to this one.)

Finally, you were reading string values and comparing them to numbers. I used parseFloat() to convert those values from the input fields into numbers.

Here is the fixed code.

$(document).ready(function($) {
  $('.error-message').hide();

  function priceCheck() {
    var priceValid = true; // innocent until proven guilty
    $('input[class="price"]').each(function() {
      priceValue = parseFloat($(this).val()) || 0;
      if (priceValue <= 0) {
        priceValid = false;
        return false;
      }
    });
    return priceValid;
  }

  $("form").on("submit", function() {
    $("#offerInquiry").trigger('valid.fndtn.abide');
  });

  //POST FORM
  $("#offerInquiry").on('valid.fndtn.abide', function(evt) {
    //prevent the default behaviour for the submit event
    // Serialize standard form fields:
    var formData = $(this).serializeArray();
    var checked = $("#terms").is(":checked");
    var priceValid = priceCheck();
    if (priceValid) {
      $('.error-message').hide();
      if (checked == false) {
        $('.error-message-container').empty();
        $('.error-message-container').append("<%= pdo.translate(" + checkBox.isObligatory + ") %>");
        $('.error-message').show();
        $('.bid-error').css("display", "block");
        return false;
      } else {
        loading();
        $.post("/inquiry.do?action=offer&ajax=1", formData,
          function(data) {
            window.top.location.href = data.redirectPage;
          });
      }
    }
    else
      {
        $('.error-message').show().text("PRICE IS NOT VALID");
        }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="offerInquiry">
  Price 1
  <input type="text" class="price" id="price1" value="0.00" />
  <br/>Price 2
  <input type="text" class="price" id="price1" value="0.00" />
  <br/>
  <input type='submit' />
  <div class="error-message">ERROR!</div>
</form>

edited Sep 20, 2015 at 17:42

answered Sep 20, 2015 at 17:26

nothingisnecessary

6,26138 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shikkediel Over a year ago

According to your name, evt.preventDefault() is not necessary. Why's everyone leaving that in...

nothingisnecessary Over a year ago

Yes, he does not need this. However, part of the problem - and solution - was that he didn't realize he was calling preventDefault on an object that he didn't have... so emphasis was on passing the object evt to the method that was using preventDefault The answer is now a bit closer to best practices, and addresses each of the issues with the OP's code

Shikkediel Over a year ago

Looks better with the info going in the opposite direction. You could do if (priceCheck()) by the way.

Collectives™ on Stack Overflow

If/Else statement doesn't run inside function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related