Can't get .val() from an input inside PrettyPhoto

Question

Here is the structure of my code:

<div class='img_box' title='icon'>
  <div>
    <a href='#lightbox_add' rel='prettyPhoto[g1]'>
      <img alt='' src='images/img_plus_green.png' title=''/>
      <span class='description'>
        <span class='title'>Click to Answer</span>
      </span>
    </a>
    <div id='lightbox_add' class="hide">
        <div class='lightbox_add_cand'>
            <h4>Add a new answer</h4>
            <div class='block_answer'>
                <div class='line'>
                </div>
                <br/>
                <form action='/add/1' id='add_cand_form' method='post'>
                    <div class='input_box'>
                        <input class='s_inp_text' id='cand_title' name='cand_title' title='Write a title...' type='text'/>
                    </div>
                    <div class='input_box'>
                        <input class='s_inp_text' id='pic_url' name='pic_url' title='URL of picture...' type='text'/>
                    </div>
                    <a class='button_big dark_red' href='' id='add_cand_button'>
                      <span class='left'>
                        <span class='right'>
                          Save
                                               </span>
                      </span>
                    </a>
                </form>
            </div>
        </div>
    </div>
</div>

The <a href="#lightbox_add"> element fires up a PrettyPhoto lightbox when clicked and loads in the html defined by <div id="lightbox_add">. Inside the lightbox, there is a form. My issue is with reading the value of a form element via javascript:

$("#add_cand_button").live('click', function() {
  alert( $("#cand_title").val());              //shows an empty alert box
  alert( $("#pp_full_res #cand_title").val());  //shows an alert box that says "undefined"
});

I know that $("#pp_full_res #cand_title").val(); should be the right approach, but it doesn't work. Another thing to note: When I search the DOM for #cand_title it does not find anything.

Anybody know the right way to access the value of an input element inside prettyphoto?

Answer 1

There is no element named pp_ful_res thats that why its returning'undefined'

Here is your code in jsfiddler http://jsfiddle.net/screepts/DpeTr/

Your alert( $("#cand_title").val()); returns the value fine.