如何将动态创建的表单字段的值传递到文本区域
how to pass values of dynamically created form fields to a textarea
我正在尝试创建一个具有动态表单元素"添加"/"删除"功能的简单表单。最终,一旦条目完成,我希望表单结果显示在文本区域中。
我搜索了这个论坛,并设法拼凑出一些可以完成我一些但不是全部目标的东西。它将动态地制作我的表单元素,并删除它们。但是,当我尝试在我的文本区域中显示结果时,仅显示第一个选项。此外,当我在文本输入中输入某些内容时,所有后续新字段都预填充了该用户文本。最后,由于我的元素之一是选择框,我想知道是否有人更好地了解如何让用户在 20-30 个选项中进行选择?
我的网页
<form name="builder">
<fieldset>
<h2>Select your results</h2>
<div id="IPOX">
<p>
<select name="column1" id="col1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="Z">Z</option>
</select>
<select name="column2" id="col2">
<option value="POS">POS</option>
<option value="NEG">NEG</option>
<option value="EQUIV">EQUIV</option>
</select>
<input type="text" name="usercomm" id="usercomm">
</p>
</div>
<p><span class="add">Add another row</span>
</p>
</fieldset>
<br>
<br>
<p>
<input type="button" id="submit" value="Done!" onclick="printIHC()" />
</p>
</form>
我的 JS
$(window).load(function () {
$(function () {
var defaults = {
'usercomm': '-'
};
// separating set and remove
// note that you could add "defaults" as an arg if you had different
// defaults for different fieldsets
var setDefaults = function (inputElements) {
$(inputElements).each(function () {
var d = defaults[this.name];
if (d) {
// set with jQuery
// we don't need the data - just check on the class
$(this).val(d)
.addClass('default_value');
}
});
};
var removeDefaults = function (inputElements) {
$(inputElements).each(function () {
if ($(this).hasClass('default_value')) {
$(this).val('')
.removeClass('default_value');
}
});
};
setDefaults(jQuery('form[name=builder] input'));
$("span.add").click(function () {
// get the correct fieldset based on the current element
var $fieldset = $(this).closest('fieldset');
var $inputset = $('p', $fieldset)
.first()
.clone()
.insertBefore($('p', $fieldset).last());
// add a remove button
$inputset.append('<span class="remove">Remove</span>');
setDefaults($('input', $inputset));
// return false; (only needed if this is a link)
});
// use delegate here to avoid adding new
// handlers for new elements
$('fieldset').delegate("span.remove", {
'click': function () {
$(this).parent().remove();
}
});
// Toggles
$('form[name=builder]').delegate('input', {
'focus': function () {
removeDefaults($(this));
},
'blur': function () {
// switch to using .val() for consistency
if (!$(this).val()) setDefaults(this);
}
});
});
});
// Print values to textarea
function printIHC() {
var myIHC = document.getElementById('output');
var selectAb = document.getElementById('col1');
selectAb.onchange = this.value;
var selectVal = document.getElementById('col2');
selectVal.onchange = this.value;
var userTxt = document.getElementById('usercomm');
ihcOut = 'Column 1'tValue 'tComments'n---------------------------------'n' + selectAb.value + ''t't' + selectVal.value + ''t' + userTxt.value + ''n';
myIHC.value += ihcOut;
}
我不是程序员,所以我不知道我是否应该混合javascript和jquery。 我还有一种感觉,当表单元素动态创建时,它们对打印脚本显得沉默。最后,与此相关的许多主题都涉及PHP脚本,我想避免使用PHP脚本,因为我不完全了解这些脚本是如何工作的。
我试图把它变成一个jsfiddle,如果这更容易查看 - http://jsfiddle.net/Vqzk9/
感谢您的任何帮助
你应该做的第一件事是将col1
、col2
、usercomm
从id
更改为class
。因为id
是独一无二的。
然后我写一个新的printthis
如下:
function printthis() {
var ihcOut = 'Column 1'tValue 'tComments'n---------------------------------'n';
$('fieldset p').each(function(){
if($(this).find('.add').length>0)return;
var selectAb = $(this).find('.col1').val();
var selectVal = $(this).find('.col2').val();
var userTxt = $(this).find('.usercomm').val();
ihcOut += selectAb + ''t't' + selectVal + ''t' + userTxt + ''n';
});
$('#output').val(ihcOut);
}
这是 jsfiddle http://jsfiddle.net/Vqzk9/1/
相关文章:
- 如何将输入范围的值传递给JS中的变量
- 如何将值传递给wicket中的javascript函数
- 将值传递给jquery创建的输入字段
- 需要将select标记选项值传递给ajax函数
- 使用Ajax将PHP值传递给javascript
- 将javascript值传递给PHP
- 将javascript值传递给php是正确的方法
- 将不属于表单的HTML页面中的值传递给php页面
- Angular,将文本框的动态值传给控制器
- 在key up函数上将文本框值传递给javascript
- 可以't使用ajax调用将值传递给Web服务
- 如何在同一页面上使用windows.location.href将js值传递给php时停止刷新页面
- 多个单选按钮,需要将选定的值传递给javascript
- 将 MSSQL 表值传递给 javascript
- 如何将 HTML 文档作为起始值传递给 CodeMirror
- 如何将数据存储值传递给javascript?我需要从gae数据存储中获取数据,并需要传递javascript
- 将索引值传递给javascript命名空间数组
- 将文本框值传递给javascript函数
- 将单击按钮时的动态文本区域值传递给javascriptphp
- 文本区域表单字段未将值传递给JavaScript