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