无法使用Javascript获取textarea的值

无法使用Javascript获取textarea的值,javascript,jquery,html,Javascript,Jquery,Html,我有一个表单正在使用,用于复制表单行。行中的一个元素是元素。当在“选择值”中选择某个值时,将显示我在网站上使用的包含的模式,允许用户提供其他信息。我的想法是将此文本添加到隐藏的表单元素中的表单中,但我无法使用jQuery获取文本。我尝试过使用.val、.text和.html,但总是得到一个空字符串。我甚至尝试使用与上面类似的方法使用香草Javascript,但我仍然无法让它工作。我在同一块HTML中有一个隐藏元素,使用$row_id.val检索它没有问题。有什么建议吗 我的代码 HTML 当然,

我有一个表单正在使用,用于复制表单行。行中的一个元素是元素。当在“选择值”中选择某个值时,将显示我在网站上使用的包含的模式,允许用户提供其他信息。我的想法是将此文本添加到隐藏的表单元素中的表单中,但我无法使用jQuery获取文本。我尝试过使用.val、.text和.html,但总是得到一个空字符串。我甚至尝试使用与上面类似的方法使用香草Javascript,但我仍然无法让它工作。我在同一块HTML中有一个隐藏元素,使用$row_id.val检索它没有问题。有什么建议吗

我的代码

HTML


当然,在我问了StackOverflow这个问题之后,现在$options.val的使用效果很好;解决方案这是一个漫长的一周…

许多行代码。在任何地方都做一些console.log,只找到失败的一小部分。@farvalin-我想为上下文提供所有代码。@Krishna-$这是指当前的jQuery元素。checkFieldList是从我的jQuery事件处理程序调用的函数,我没有包括它。我会把它加在上面也许。。。但是我更喜欢有bug的10行,而不是与问题无关的200行。
<!-- 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>
// 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);
    });
}