how to trigger an action on a button when it is clicked but is disabled w/ jquery

Question

EDIT: thanks for the replies. As per Cory's suggestion here i'll offer alittle more clarification on my goal. The form button should ultimately submit all of the responses from the select fields and send them to be processed through php on the next page. In the event that a user prematurely clicks on the submit button before selecting an option in each field then the button will not submit. instead it will display "whoa dude! ya can't trip w/ an incomplete form" underneath the submit form.

I have set the button property, "disabled", to true by default. Apparently while a button has this property will not allow you respond to and/or trigger events which makes sense.

Here is my jquery code:

$('#generateTrip').prop('disabled', true);
$('#badtripalert').hide();
$("select#rideChoice").change(function() {
  if (($("select#activityChoice").children(":selected").html() === 'Sing karaoke' || $("select#activityChoice").children(":selected").html() === 'Enjoy the view' || $("select#activityChoice").children(":selected").html() === 'Rock out') && ($("select#destinationChoice").children(":selected").html() === 'The Beach' ||
    $("select#destinationChoice").children(":selected").html() === 'The Mountains' || $("select#destinationChoice").children(":selected").html() === 'Outer Space')) {
    $('#generateTrip').prop('disabled', false);
  } else {
    console.log('nothing will happen');
  }
});
$("select#destinationChoice").change(function() {
  if (($("select#rideChoice").children(":selected").html() === 'Hippie Bus' || $("select#rideChoice").children(":selected").html() === 'Rocket Ship' || $("select#rideChoice").children(":selected").html() === 'Unicorn') && ($("select#activityChoice").children(":selected").html() === 'Sing karaoke' ||
    $("select#activityChoice").children(":selected").html() === 'Enjoy the view' || $("select#activityChoice").children(":selected").html() === 'Rock out')) {
    $('#generateTrip').prop('disabled', false);
  } else {
    console.log('nothing will happen');
  }
});
$("select#activityChoice").change(function() {
  if (($("select#rideChoice").children(":selected").html() === 'Hippie Bus' || $("select#rideChoice").children(":selected").html() === 'Rocket Ship' || $("select#rideChoice").children(":selected").html() === 'Unicorn') && ($("select#destinationChoice").children(":selected").html() === 'The Beach' ||
    $("select#destinationChoice").children(":selected").html() === 'The Mountains' || $("select#destinationChoice").children(":selected").html() === 'Outer Space')) {
    $('#generateTrip').prop('disabled', false);
  } else {
    console.log('nothing will happen');
  }
});

<form method="GET" action="dream-trip.php" name="dreanForm" id="dreamTripForm">
  <h4>
                <span>On my dream trip, I’d ride a</span> 
                <select id="rideChoice" name="ride" >
                  <option type="radio" value="0">select</option>
                  <option type="radio" name="rocket ship" value="rocket ship">Rocket Ship</option>
                  <option type="radio" name="hippie bus" value="hippie bus">Hippie Bus</option>
                  <option type="radio" name="unicorn" value="unicorn">Unicorn</option>
                </select>
              </h4>
  <br>
  <h4>
                <span>with my friend to</span> 
                <select id="destinationChoice" name="destination" >
                  <option type="radio" value="0">select</option>
                  <option type="radio" name="the beach" value="the beach">The Beach</option>
                  <option type="radio" name="the mountains" value="the mountains">The Mountains</option>
                  <option type="radio" name="outer space" value="outer space">Outer Space</option>
                </select>
              </h4>
  <h4>
                <span>where we will</span> 
                <select id="activityChoice" name="activity" >
                  <option type="radio" value="0">select</option>
                  <option type="radio" name="singing karaoke" value="singing karaoke">Sing karaoke</option>
                  <option type="radio" name="enjoying the view" value="enjoying the view">Enjoy the view</option>
                  <option type="radio" name="rockin out" value="rockin out">Rock out</option>
                </select>
              </h4>
  <div class="buttonWrap">
    <button type="submit" name="submit" id="generateTrip" class="stronger" data-hover="Take a Trip">Take a Trip</button>
    <p id="badtripalert">whoa dude! ya can't trip w/ an incomplete form</p>
  </div>
</form>

I have attempted to trigger an onClick action in the event that it is clicked while the it is disabled :

if ($('#generateTrip').prop('disabled') == true) {
  $(this).on('click', function() {
      $('#badtripalert').show();
    }
  }

i have also tried many other solutions but it is all centered around the same idea of triggering these based on this property "disabled. I think potentially it may have something to do with conflicts in the functionality of the button considering it is disabled but i have no clue.... Im relatively new to jquery. If you need anymore details i'll happily give them. thanks in advance for any help

EDIT: thanks for the replies. As per Cory's suggestion here i'll offer alittle more clarification on my goal. The form button should ultimately submit all of the responses from the select fields and send them to be processed through php on the next page. In the event that a user prematurely clicks on the submit button before selecting an option in each field then the button will not submit. instead it will display "whoa dude! ya can't trip w/ an incomplete form" underneath the submit form.

I have set the button property, "disabled", to true by default. Apparently while a button has this property will not allow you respond to and/or trigger events which makes sense.

Answer 1

If I'm understanding your issue correctly, instead of setting the "disabled" property to "true", you should set a class on the button that has the appearance of being disabled, then on the click event of the button if the "btn-disabled" class if present, prevent the form from being submitted.

HTML

<button class="stronger btn-disabled" type="submit" name="submit" id="generateTrip" data-hover="Take a Trip">Take a Trip</button>

CSS

.btn-disabled {
    background-color: #ccc;
    /* etc. */
}

So, in each of your "change" events, instead of:

$('#generateTrip').prop('disabled', false);

use:

$('#generateTrip').removeClass('btn-disabled');

Then, use the following:

JavaScript

$('#generateTrip').on('click', function(evt) {
    if ( $(this).hasClass('btn-disabled') ) {
      evt.preventDefault();
      evt.stopPropagation();

      $('#badtripalert').show();

      return false;
    } else {
        $('#badtripalert').hide();
    }
});

CodePen

http://codepen.io/anon/pen/jboxzJ

Answer 2

if ($('#generateTrip').prop('disabled') == true) {
    $(this).on('click', function() {
        $('#badtripalert').show();
    }
}

This piece of code actually adds an onClick event if the property 'disabled' exists when the code is executed, which is probably once. What're trying to do is probably this:

$(this).on('click', function() {
    if ($('#generateTrip').prop('disabled') == true) {
        $('#badtripalert').show();
    }
}

Not sure that this will work though, if what Rory McCrossan says is true the click event won't be fired for disabled element.

What you can do instead is use a class. So just add a class when it's disabled i.e. 'disabled' and check if it has that class instead.

$("select#activityChoice").change(function() {
    if (($("select#rideChoice").children(":selected").html() === 'Hippie Bus' ... )) {
        $('#generateTrip').addClass('disabled');
    } else {
         console.log('nothing will happen');
    }
});

$(this).on('click', function() {
    if ($('#generateTrip').hasClass('disabled')) {
        $('#badtripalert').show();
    }
}

You can then of course style the 'disabled' class to your liking.