Show alert when one div has been clicked but another has not.

Show alert when one div has been clicked but another has not.

Hey all!

Hopefully this is possible and someone can help.  Basically, I have created a package Sign Up form, so users can select which features of the package they want to include, see the price and then sign up for the package.

The user picks their choices from drop down select boxes, presses an Add button to increase the packages price and then once happy, they can click Sign Up to submit.

What I need to have happen is if a user uses the dropdown, selects an option, but does not click add, they should get a message saying to click Add before continuing if they click Sign Up.

I hope that makes sense!

  1. <div class="styled-select">
  2. <select id="broadband_package1" name="broadband_package1">
  3. <option value="0" checked="checked">No Thanks!</option>
  4. <option value="1">Package 1</option>
  5. <option value="2">Package 2</option>
  6. <option value="3">Package 3</option>
  7. <option value="4">Package 4</option>
  8. </select>
  9. </div>
  10. <a href="#" title="Add" class="chat calculate-total1" id="calculate-total">Add</a>
  11. <div class="make_sure">Make sure you click add before proceeding</div>


  12. <div class="homepage-content-small">
  13. <h2>Happy with your new bill?</h2>

  14. <input type="submit" value="Sign Up" title="Sign Up" class="chat signup">
  15. </div>  

And my attempt at the jquery...

  1. jQuery(".signup").click(function() {
  2. if (".calculate-total1"):not(click){
  3. jQuery(".make_sure").show();
  4. else {
  5. jQuery(".make_sure").hide();
  6. });

Thanks

Damien