form elements behaving unusually inside a jquery thickbox

Question

i am using jquery's thickbox plugin ( ver. 3) and inside it I want to place a form that will be submitted using $.post. But the form elements are not behaving as they should. For eg there is a select box

<select name="priority" id="priority">
    <?php  for($i = 5; $i > 0; $i--){    ?>           
           <!-- <input type="radio" class="star" name="priority" value="<?php echo $i ?>"> -->
           <option value="<?php echo $i; ?>"><?php echo $i; if($i == 5) echo ' (lowest)'; if($i == 1)echo ' (highest)'; ?></option>    
    <?php } ?>
    </select>

when i click on the button that calls the submit function,

function add(){   
   var pr = document.getElementById("priority").value;
   console.log(pr);

}

it alerts only the first value ie. 5 no matter the option selected.

Please help. Is this a commonly faced problem ?

Answer 1

As you're using jQuery, you should use

var pr = $("#priority option:selected").val();

or

var pr = $("#priority").val();

instead of

var pr = document.getElementById("priority").value;

this should solve it

see http://docs.jquery.com/Attributes/val for more info

Answer 2

With jQuery:

var pr = $("#priority option:selected").val();

If you wanted to use pure javascript you should be able to do:

var i = document.getElementById("priority").selectedIndex;
var options = document.getElementById("priority").options;

var value = options[i].value;

Answer 3

I don't know thickbox specifically, but problems with forms are common to many Lightbox like tools. The reason is that the tool 1. takes the form elements out of the form context and 2. usually copies them into the Thickbox/Lightbox/whatever on DOM level. When the box closes, the element is destroyed or reset instead of moved nicely back into the form with any changed settings surviving.

It is usually possible to alter this behaviour but only by changing the *box script itself so it transfers the DOM elements safely back and forth.