jQuery .val() not working in Shadowbox

Question

Using the answer from Calling Jquery within / inside a Shadowbox (thanks Rob Grzyb and kannan!), I was able to get my jQuery firing from within my Shadowbox on my Drupal site, however, I'm unable to get one part of it to function:

I have a form in my Shadowbox, and I'm using .val() to determine the value of the select field (and for testing purposes, displaying that value in an alert box). When I click the 'Submit' button and the alert fires, the alert always reads the first value (Red) even though I've selected a different value (like Green). On a regular page, it works as expected and the alert reads the correct value.

Example code:

<div class="color-form" style="display: none;">
  <h3>What's Your Favorite Color?</h3>
  <form class="color">
    <select name="colorurl" class="colorurl">
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
    <br />
    <input class="button" type="submit" value="Submit">
  </form>
  <script type="text/javascript">
    jQuery(document).ready(function($){
      $('body').on('click', '.color .button', function(e) {
        e.preventDefault();

        var colorurl = $('.colorurl').val();
        alert(colorurl);
      });
    });
  </script>
</div>
<script type="text/javascript">
  jQuery(document).ready(function($){
    $('a.form').click(function () {
      var thisContent = $('.color-form').html();
      Shadowbox.open({
        content: thisContent,
        player: 'html',
        displayNav: false,
        height: 350,
        width: 350
      });
    });
  });
</script>
<a class="form">Link to Form</a>

How can I modify this code so it works in the Shadowbox? Thanks!

Answer 1

You are duplicating the content when you create your shadowbox, so you have two copies of the dropdown. val() returns the value of the first element, which in this case is not the one in the shadowbox.

Try this:

In your code that sets up the shadowbox:

var thisContent = $('<div class="shadowbox-color-form"></div>').append($('.color-form').html())[0].outerHTML;

In the code that handles the click:

$('body').on('click', '.shadowbox-color-form .button', function(e) {
    e.preventDefault();

    var colorurl = $('.shadowbox-color-form .colorurl').val();
    alert(colorurl);
});