drupal - jQuery .val() not working in Shadowbox -

using answer calling jquery within / inside shadowbox (thanks rob grzyb , kannan!), able jquery firing within shadowbox on drupal site, however, i'm unable 1 part of function:

i have form in shadowbox, , i'm using .val() determine value of select field (and testing purposes, displaying value in alert box). when click 'submit' button , alert fires, alert reads first value (red) though i've selected different value (like green). on regular page, works expected , alert reads correct value.

example code:

<div class="color-form" style="display: none;">   <h3>what's 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 form</a> 

how can modify code works in shadowbox? thanks!

you duplicating content when create shadowbox, have 2 copies of dropdown. val() returns value of first element, in case not 1 in shadowbox.

try this:

in code sets shadowbox:

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

in code handles click:

$('body').on('click', '.shadowbox-color-form .button', function(e) {     e.preventdefault();      var colorurl = $('.shadowbox-color-form .colorurl').val();     alert(colorurl); });