title: jQuery click event that shows a big image when an image is clicked
body: <p>I have coded in jQuery the following in order to get a clicked image to show in another location but larger. ONLY the jquery code is to be modified. I know I made some mistakes but can't see where after debugging. Also a button checks to see if image was clicked and shows TEXT when criteria is met.</p>
  
  <ul>
  <li><a href="http://pastebin.com/iJSuw7Qf" rel="nofollow">Code to be reviewed - had problems pasting all code here</a></li>
  <li><a href="http://jsfiddle.net/XAK5N/" rel="nofollow">jsFiddle</a></li>
  </ul>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="question"&gt;
      &lt;h2&gt;jQuery Vacation Images&lt;/h2&gt;
      &lt;p&gt;What is your first name?
      &lt;input type="text" id="firstname" size="30"&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="vacationimages"&gt;
      &lt;p&gt;Click on the Image that best represents the kind of vacation you want&lt;/p&gt;
      &lt;p&gt;&lt;img src="mountain.jpg" alt="Mountain Vacation"&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
      &lt;p&gt;&lt;img src="desert.jpg" alt="Desert Vacation"&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
      &lt;p&gt;&lt;img src="ocean.jpg" alt="Ocean Vacation"&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="bigimage"&gt;
      &lt;img id="currentimage" src="ocean.jpg" alt="ocean vacation" width="300" height="225" border="0"&gt;
      &lt;p id="imagedesc"&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="showhidebuttondiv"&gt;
      &lt;input id="showhidebutton" type="button" value="Hide Image"&gt;
  &lt;/div&gt;
  
  
  &lt;div id="submitdiv"&gt;
      &lt;input id="submitme" type="button" value="Submit ME"&gt;
      &lt;p id="mymessage"&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>JS</h2>
  
  <pre><code>$(document).ready(function() {
      $("#vacationimages img").click(function()  {
          var changeSrc = $(this).attr("src");
          var changeAlt = $(this).attr("alt");
              $("#currentimg").attr("src", changeSrc); //code to show large clicked image on the right
              $("#imagedesc").text(changeAlt);        //code to show alt under the large image in text
      }); //end of vacation mouse click verification
  
      $("#submitme").click(function () {
          $("#question span").text("");
          $("#mymessage").text("");
          var myname = $("#firstname").val();
            if (myname == '')  {
              $("#question span").text("Must enter first name");
              return;
            }
          $("#vacationimages img").click(function()  {
              var changeAlt = $(this).attr("alt");
              $(this).data('clicked', true);
              if (myname !== "" || $("#vacationimages img").data('clicked'))
              {
                  $("#mymessage").text(myname + " you want a " + changeAlt + " vacation"); //if image clicked and name is set this message will show under the "Submit Me" button
              }
          }) //end of Name Verification for empty field
  
      })   //end of Submit Me button handler
  
  })  // END OF READY
  </code></pre>