CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby
Mike Wiesenhart
Mike Wiesenhart

Reputation: 316

Conditional Statements in jQuery

I have the jQuery code below and currently it has a Min Rent and Max Rent field. Right now when a value is entered is says $val1 to $0 even if a value is not entered in the Max Rent field. What I am trying to accomplish is if a value is entered in both fields for it to say $val1 to $val2. Otherwise I just want it to display the one value. I tried to do this with a conditional statement, but my jQuery is not very strong and not sure where I am going wrong.

jQuery:

$("[data-toggle='popover']").on('shown.bs.popover', function() {
  $("#listing-price-selector").next().find("#listing_search_form_min_price").keyup(modPrice);
  $("#listing-price-selector").next().find("#listing_search_form_max_price").keyup(modPrice);
});

$("[data-toggle='popover']").on('hide.bs.popover', function() {
modPrice();
});
modPrice();

function modPrice() {
  if ($("#listing-price-selector") && $("#listing-price-selector").next()) {
    var mn = $("#listing-price-selector").next().find("#listing_search_form_min_price").val();
    var mx = $("#listing-price-selector").next().find("#listing_search_form_max_price").val();
    if (mn || mx) {
      mn = (mn == "") ? 0 : mn;
      mx = (mx == "") ? 0 : mx;
      $("#priceBox").val(mn + " to " + mx);
      if ($("#listing_search_form_max_price").length > 0) {
        $("#listing-price-selector").text(" $" + mn + " to $" + mx);
      else
        $("#listing-price-selector").text(" $" + mn);
      }
    }
  }
}

HTML:

<div class="col-md-2 col-xs-6">
    <a tabindex="0" class="button btn-transparent" id="listing-price-selector" role="button" data-toggle="popover">Price Range <span class="caret"></span></a>
</div>

<div id="listing-price-content" style="display: none;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6">
        <div class="input-group input-group-sm">
          <span class="input-group-addon" id="basic-addon1">$</span>
          <%= f.text_field :min_price, class: "form-control", placeholder: "Min Rent", data: { "binding-name" => "min-price" } %>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="input-group input-group-sm">
          <span class="input-group-addon" id="basic-addon1">$</span>
          <%= f.text_field :max_price, class: "form-control", placeholder: "Max Rent", data: { "binding-name" => "max-price" } %>
        </div>
      </div>
    </div>
  </div>

Upvotes: 1

Views: 1517

Answers (1)

Searching
Searching

Reputation: 2279

I wasn't sure if my comment helped. So I'm posting this. Provided that this is where, your issue is, this type of check here is not recommended. For all you know they can input "abcd"

if ($("#listing_search_form_max_price").length > 0) {
    $("#listing-price-selector").text(" $" + mn + " to $" + mx);
  else
    $("#listing-price-selector").text(" $" + mn);
  }

You can try this 

function modPrice() {
    if ($("#listing-price-selector") && $("#listing-price-selector").next()) {
        var mn = $("#listing-price-selector").next().find("#listing_search_form_min_price").val();
        var mx = $("#listing-price-selector").next().find("#listing_search_form_max_price").val();
        if (mn || mx) {
            mn = (mn == "") ? 0 : mn;
            mx = (mx == "") ? 0 : mx;
            $("#priceBox").val(mn + " to " + mx);
            if (parseFloat($("#listing_search_form_max_price").val()) > 0) {
                $("#listing-price-selector").text(" $" + mn + " to $" + mx);
            } else {
                $("#listing-price-selector").text(" $" + mn);
            } //END listing_search_form_max_price
        } //END mn || mx
    } //END listing-price-selector
}

Let us know.

Upvotes: 1

Related Questions