CODEWITHSUNDEEP
javascript
Parlanchina
Parlanchina

Reputation: 157

Display alert message if checkbox isn't checked

I am trying to show a message if the checkmark on this page is not checked - https://www.hawaiidiscount.com/rental-cars/oahu/honolulu-airport.htm

See where it says "I'm aware Alamo has additional fees, paid directly to Alamo at the counter when picking up the vehicle."

On a static page the script below works correctly (for example if you download the page and place the code in the body). But when the page is live, it is not working.

<script>
$('#dnn_ctr367_CartQuickView_anchBookNow').click(function () {
    if (!$('.cartcheckbox').is(':checked')) {
        alert('Please check the box - I\'m aware Alamo has additional fees, paid directly to Alamo at the counter when picking up the vehicle.');
        return false;
    }
});
</script>

Any idea what might be wrong?

EDIT: When you click on the book now button there is text that appears on top of the cart (that's in case you didn't put any of the required information). So it seems this text is part of a program that ignores the script above. Is there a way to make my script to activate before the other one so if you click the green button you will right away see the pop up message?

Upvotes: 0

Views: 2791

Answers (1)

blurfus
blurfus

Reputation: 14031

It's because $('.cartcheckbox') is not a checkbox, it's a span containing the checkbox

Try changing it to the id of the checkbox (or input[type="checkbox"] if you only have one checkbox in the page.

As in:

$('#dnn_ctr367_CartQuickView_anchBookNow').on('click', function () {
    // update selector below
    if (!$('input[type="checkbox"]').is(':checked')) {
        alert('Please check the box - I\'m aware Alamo has additional fees, paid directly to Alamo at the counter when picking up the vehicle.');
        return false;
    }
});

If you have more than one checkbox on the page, try changing it to 

if (!$('.cartcheckbox').find('input[type="checkbox"]').is(':checked')) {...}

to select only the checkbox inside your relevant span

Updated code below to include trigger button 

$(function() {

  $('#dnn_ctr367_CartQuickView_anchBookNow').on('click', function() {
    // updated selector below    
    if (!$('.cartcheckbox').find('input[type="checkbox"]').is(':checked')) {

      alert('Please check the box - I\'m aware Alamo has additional fees, paid directly to Alamo at the counter when picking up the vehicle.');

      return false;

    } else {
      alert('checkbox is checked');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="cartcheckbox"><input id="dnn_ctr367_CartQuickView_ucCollector_I'mawareAlamohasadditionalfees,paiddirectlytoAlamoatthecounterwhenpickingupthevehicle." type="checkbox" name="dnn:ctr367:CartQuickView:ucCollector:I'mawareAlamohasadditionalfees,paiddirectlytoAlamoatthecounterwhenpickingupthevehicle."></span>
<br/>
<div align="center">
  <a id="dnn_ctr367_CartQuickView_anchBookNow" style="TEXT-DECORATION: none" href="#">
    <button>
      <div class="TBook">Book Now</div>
    </button>
  </a>
</div>

Upvotes: 1

Related Questions