Невозможно получить значение textarea с помощью Javascript

Question

У меня есть форма, которая использует SheepIt jQuery plugin, для дублирования строк формы. Одним из элементов в строке является элемент <select>. Когда в выбранном значении выбрано определенное значение, появляется модальный (я использую Fancybox на моем сайте), содержащий <textarea>, что позволяет пользователям предоставлять дополнительную информацию. Моя идея состояла в том, чтобы взять этот текст и добавить его в форму в скрытом элементе формы, но я не могу на всю жизнь получить текст с помощью jQuery. Я пробовал использовать .val(), .text() и .html(), но я продолжаю получать пустую строку. Я даже пытался использовать ванильный Javascript, используя аналогичные методы выше, но я до сих пор не могу заставить его работать. У меня есть скрытый элемент (<input type="hidden" id="row_id" value="" />) в том же блоке HTML и нет проблем с его извлечением с помощью $("#row_id").val(). Какие-либо предложения?

Мой код

HTML

<!-- sheepIt Form --> 
    <div id="meta_fields" class="well sheepit-form"> 
     <!-- Form template--> 
     <div id="meta_fields_template" class="sheepit-row"> 
      <input id="meta_fields_#index#_field_label" name="meta[meta_fields][#index#][field_label]" type="text" placeholder="Field Label" /> 
      <select id="meta_fields_#index#_field_type" name="meta[meta_fields][#index#][field_type]" class="field-choice"> 
       <option value="">--Field Type--</option> 
       <option value="text">Single Line Text Box</option> 
       <option value="textarea">Multi Line Text Box</option> 
       <option value="checkbox">Checkbox</option> 
       <option value="select">Dropdown List</option> 
      </select> 
      <input id="meta_fields_#index#_field_id" name="meta[meta_fields][#index#][field_id]" type="hidden" /> 
      <input id="meta_fields_#index#_field_required" name="meta[meta_fields][#index#][field_required]" value="0" type="hidden" /> 
      <input id="meta_fields_#index#_field_required" name="meta[meta_fields][#index#][field_required]" value="1" type="checkbox" /> 
      <label for="meta_fields_#index#_field_required">Required?</label> 
      <a id="meta_fields_remove_current" class="item small"> 
       <i class="icon-remove"></i> 
      </a> 
     </div> 
     <!-- /Form template--> 

     <!-- No forms template --> 
     <div id="meta_fields_noforms_template">No fields defined!</div> 
     <!-- /No forms template--> 

     <!-- Controls --> 
     <div id="meta_fields_controls" class="sheepit-buttons"> 
      <span id="meta_fields_add"><button class="btn btn-success btn-small"><i class="icon-plus-sign"></i> <span>Add Row</span></button></span> 
      <span id="meta_fields_remove_last"><button class="btn btn-warning btn-small"><i class="icon-remove"></i> <span>Remove Row</span></button></span> 
      <span id="meta_fields_remove_all"><button class="btn btn-danger btn-small"><i class="icon-trash"></i> <span>Remove All Rows</span></button></span> 
     </div> 
     <!-- /Controls --> 

    </div> 
    <!-- /sheepIt Form --> 

    <script type="text/x-handlebars" id="select-options-form"> 
     <p class="lead">Please provide options for the dropdown list. One option per line</p> 

     <div> 
      <textarea id="options" style="width:500px;height:200px"></textarea> 
      <input type="hidden" id="row_id" value="" /> 
     </div> 

     <div class="pull-right"> 
      <button class="btn btn-success closeModal"> 
       <i class="icon-ok"></i> 
       Complete 
      </button> 
     </div> 
    </script> 

Примечание: Это не истинный шаблон Рули. Я использую тег <script> для хранения фрагмента HTML, который вставлен в модальный. Я не был уверен, что если div с style="display:none" заставлял JS думать, что на странице было два элемента (это была моя первоначальная разметка).

Javascript

// called from <select> event handler 
function checkFieldList(e) 
{ 
    e.preventDefault(); 

    var value = $(this).val(); 

    if(value !== 'select') { 
     // TODO: do some processing here 
     return false; 
    } 

    // get the sheepIt row id -- easiest by parsing out the element ID 
    var row_id = parseInt($(this).prop("id").split("_")[2], 10); 

    return openModal(row_id); 
} 

function openModal(row_id) 
{ 
    // load in content and open in modal 
    var modalContent = $("#select-options-form"); 
    modalContent.find("#row_id").val(row_id); 

    $.fancybox({ 
     "width" : 600, 
     "height" : 300, 
     "modal" : true, 
     "content" : modalContent.html(), 
     "afterShow" : bindModalClose, 
     "beforeClose" : closeModal 
    }); 
} 

function bindModalClose() 
{ 
    $(".closeModal").on('click', function(e) { 
     e.preventDefault(); 

     $.fancybox.close(); 
    }); 
} 

function closeModal() 
{ 
    //add link after select dropdown and wire an event handler 
    var row_id = $("#row_id").val(), 
     dropdown = $("#meta_fields_" + row_id + "_field_type"); 

    addOptionsLink(dropdown, row_id); 

    // retrieve content in <textarea> 
    // all the following return empty string 
    var text = $("#options").val(); 
    // var text = $("#options").html(); 
    // var text = $("#options").text(); 
    // var text = document.getElementById("options").value; 
    // var text = document.getElementById("options").innerHTML; 
    // var text = document.getElementById("options").innerText; 

    console.log(text); 

    // 3. insert that content into hidden form field 
} 

function addOptionsLink(dropdown, row_id) 
{ 
    dropdown.after('<a href="#" class="load_options" data-row-id="' + row_id + '">View Options</a>'); 

    $(".load_options").on('click', function(e) { 
     e.preventDefault(); 

     return openModal(row_id); 
    }); 
} 

Answer 1

И ... конечно сразу же после того, как прибегнуть к задавая вопрос о StackOverflow, он сейчас работает нормально с $("#options").val(); раствором. Это была долгая неделя ...