CODEWITHSUNDEEP
javascriptjquery
yaylitzis
yaylitzis

Reputation: 5534

Combine change and onload events

I have coded this where I add / delete classes when you select from the form. However if i choose as default select the 2nd select e.g.

<option value="7" selected>destination2</option>

then it doesn't change the class to has-warning. It changes only when I select the other and then this..

How can I add this feature? I tried this $('#destination').onload(function() { but there isn't such an event...

$('#destination').change(function() {
   var dest = $('#destination').find(":selected").text();
   
   if (dest === 'destination1') {
       console.log('here1');
       $('#destin').removeClass("has-warning");
       $('#destin').addClass("has-success");
   
   } else if (dest === 'destination2') {
       console.log('here2');
       $('#destin').removeClass("has-success");
       $('#destin').addClass("has-warning");
   }
 });
<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 id="destin" class="form-group has-success">
  <label for="inputName" class="col-md-2 col-sm-2 control-label">Destination:</label>
  <div class="col-md-3 col-sm-3">
    <select id="destination" name="destination" class="form-control" required>
      <option value="1">destination1</option>
      <option value="7" selected>destination2</option>
    </select>
  </div>
</div>

Upvotes: 1

Views: 413

Answers (4)

FloHimself
FloHimself

Reputation: 291

You can use triggerHandler() for an initial trigger, just append it to your chain:

$('#destination').change(function() {
   var dest = $('#destination').find(":selected").text();

   if (dest === 'destination1') {
       console.log('here1');
       $('#destin').removeClass("has-warning");
       $('#destin').addClass("has-success");

   } else if (dest === 'destination2') {
       console.log('here2');
       $('#destin').removeClass("has-success");
       $('#destin').addClass("has-warning");
   }
 }).triggerHandler("change");

Upvotes: 0

Rajesh
Rajesh

Reputation: 24915

You can export logic to a function and call this function on both change and document.ready event.

Also, if you have to add/remove classes, try to use .toggleClass

Sample

$('#destination').change(function() {
  updateUIState();
});

$(document).ready(function() {
  updateUIState();
})

function updateUIState() {
  var dest = $('#destination').find(":selected").text();
  var isDest2 = dest === 'destination2';
  $('#destin').toggleClass("has-warning", isDest2);
  $('#destin').toggleClass("has-success", isDest2);
}
<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 id="destin" class="form-group has-success">
  <label for="inputName" class="col-md-2 col-sm-2 control-label">Destination:</label>
  <div class="col-md-3 col-sm-3">
    <select id="destination" name="destination" class="form-control" required>
      <option value="1">destination1</option>
      <option value="7" selected>destination2</option>
    </select>
  </div>
</div>

Upvotes: 1

Theodoros Klikas
Theodoros Klikas

Reputation: 2129

Try

$(document).ready(function() {
  $("#destination").trigger("change");
});

In order for your on change event handler to run when the page loads.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1073978

You do it on page load. If you control where your script tags go, you just do it in immediately-run code in your script. If you don't control where script tags go, put it in a ready handler.

Here's that first option:

function setDestinationWarningFlags() {
  var dest = $('#destination').find(":selected").text();

  if (dest === 'destination1') {
    console.log('here1');
    $('#destin').removeClass("has-warning");
    $('#destin').addClass("has-success");
  } else if (dest === 'destination2') {
    console.log('here2');
    $('#destin').removeClass("has-success");
    $('#destin').addClass("has-warning");
  }
}
// Do it on change:
$('#destination').change(setDestinationWarningFlags);
// Initial setup:
setDestinationWarningFlags();
<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 id="destin" class="form-group has-success">
  <label for="inputName" class="col-md-2 col-sm-2 control-label">Destination:</label>
  <div class="col-md-3 col-sm-3">
    <select id="destination" name="destination" class="form-control" required>
      <option value="1">destination1</option>
      <option value="7" selected>destination2</option>
    </select>
  </div>
</div>

If you have to use a ready callback instead, just change the last bit from:

// Initial setup:
setDestinationWarningFlags();

to

// Initial setup:
$(setDestinationWarningFlags);

...which is a shortcut for ready:

function setDestinationWarningFlags() {
  var dest = $('#destination').find(":selected").text();

  if (dest === 'destination1') {
    console.log('here1');
    $('#destin').removeClass("has-warning");
    $('#destin').addClass("has-success");

  } else if (dest === 'destination2') {
    console.log('here2');
    $('#destin').removeClass("has-success");
    $('#destin').addClass("has-warning");
  }
}
// Do it on change:
$('#destination').change(setDestinationWarningFlags);
// Initial setup:
$(setDestinationWarningFlags);
<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 id="destin" class="form-group has-success">
  <label for="inputName" class="col-md-2 col-sm-2 control-label">Destination:</label>
  <div class="col-md-3 col-sm-3">
    <select id="destination" name="destination" class="form-control" required>
      <option value="1">destination1</option>
      <option value="7" selected>destination2</option>
    </select>
  </div>
</div>

Upvotes: 3

Related Questions