reliant - goalzero

by Joe Saad

HTML

<div class="bordered left" id="plansBonus" >
     <h2>Time to choose your Goal Zero sign up bonus</h2>
    
    <div id="headingError">
        <div id="headingError-H">
            Please Check the errors
        </div>
        <ul>
            
        </ul>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam enim suscipit asperiores quibusdam cupiditate eos fugit non architecto minus laborum rerum laudantium officia magnam veniam ut deserunt voluptatum sequi tempora.</p>
    <form action="">
             <div class="third left">
            <label class="wrappingLabel gbg" for="option1">
              <input type="radio" id="option1" name="option1">Option 1
            </label>
            <img alt="" src="http://placehold.it/280x140" class="movetitledown"> 
            <div class="movetitledown b-details">
            <a class="modal1" href="#">Product 1</a>
              <div class="clear movetitledown"><span class="magentaText">Free</span> $79.00</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quis cumque asperiores voluptas sunt magnam id.</p>
            </div>
        </div>
      
      <div class="third left">
            <label class="wrappingLabel gbg" for="option1">
              <input type="radio" id="option1" name="option1">Option 1
            </label>
            <img alt="" src="http://placehold.it/280x140" class="movetitledown"> 
            <div class="movetitledown b-details">
            <a class="modal1" href="#">Product 1</a>
              <div class="clear movetitledown"><span class="magentaText">Free</span> $79.00</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quis cumque asperiores voluptas sunt magnam id.</p>
            </div>
        </div>
      
      <div class="third left">
            <label class="wrappingLabel gbg" for="option1">
              <input type="radio" id="option1" name="option1">Option 1
           ...

CSS

.paddedBox {padding: 20px;}
  .wrappingLabel { padding:5px;}
  .gbg {background-color:#ccc;}
  #plansBonus .third {margin-right: 5px; width: 30%;  margin-left:10px;}

JavaScript

$('button').click(function(){
    if(!$(':radio').is(':checked')){
        $('#headingError-H').text("Please make at least one selection before clicking on the Add Product button.");
        $('##headingError').show();
    }
    else {
        $('form').submit();
    }
});