Question

我有一个使用SheepIt jQuery plugin的表单，用于复制表单行。该行中的一个元素是<select>元素。当在选择值中选择某个值时，会出现包含<textarea>的模式（我在我的网站上使用Fancybox），允许用户提供其他信息。我的想法是把这个文本添加到一个隐藏的表单元素中的表单，但我不能为我的生活使用jQuery获取文本。我尝试过使用.val()，.text()和.html()，但我一直在使用空字符串。我甚至尝试使用与上面类似的方法使用vanilla Javascript，但我仍然无法让它工作。我在同一个HTML块中有一个隐藏元素（<input type="hidden" id="row_id" value="" />），使用$("#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>

注意：这不是真正的Handlebars模板。我正在使用<script>标记来保存插入模式的HTML片段。我不确定是否有一个style="display:none"的div导致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();解决方案正常工作。这是一个漫长的一周......

无法使用Javascript获得textarea的价值

1 个答案: