I am a jQuery newbie and have searched, but cannot find an answer to my specific situation. Any guidance is appreciated.
I have a Membership Form (#joinPreForm) with four div's signifying the four membership levels: Class-A, Class-B, Class-C, and Class-D. Each membership div contains a glyphicon class (icon-A, icon-B, icon-C, and icon-D, respectively) and an H4 heading ('Class-A', 'Class-B', 'Class-C', and 'Class-D', respectively) by default. Each Membership Level on click, needs to preform these actions:
- change form's action attribute to appropriate php (classA.php, ...etc)
- removeClass for letter glyphicon: icon-A, ..etc
- addClass for checkmark glyphicon 'icon-checkmark'
- reset unselected div's to default state: class="icon-A" (respectively); reset form action attribute
Essentially I only want one div to be able to be selected at any given time and all other divs to reset to their unselect, default state.
If no div is selected an error message should show on form submit: "Please select a membership level before proceeding."
I've tried to make this as clear as possible, if not please let me know and I will try to clarify any misunderstanding. Thank you so much.