我们继承了一个php / CodeIgniter应用程序。在没有考虑到所有原因的情况下,我需要将值输入textarea字段,这样我就可以将一堆数据组合在一起并将其发送到另一个应用程序/外部供应商的字段中。这是我们第一次遇到这个问题,但我不认为这是最后一次,所以我想为此做准备。
详情:
Web表单上有一堆字段。它是客户端控制的自生成php / CodeIgniter应用程序,因此不同客户端的字段不同。
某些客户可能需要将表格中字段的3,5,7等数据发送给外部供应商,外部供应商在其末端接收一个字段中的所有数据。简而言之,使用jQuery,我想将数据从某些字段发送到textarea字段。
例如,我想将中心标题,全名和水果发送到textarea字段,并在每个字段的末尾添加换行符。当然,如果用户清空某个字段,该行项目将从textarea字段中删除。
Click here to view my jsFiddle demo.
HTML示例:
<form method="post">
<br />
<br />
<fieldset name="Group1" style="border: thin; border-color: green">
<legend>General Information</legend>
<table style="width: 100%">
<tr>
<td style="width: 249px">Center Title:</td>
<td>
<select name="centers" id="centers">
<option value="Corp 1">Corp 1</option>
<option value="Shamrock Gold">Shamrock Gold</option>
<option value="Hensin Way">Hensin Way</option>
</select>
</td>
</tr>
<tr>
<td style="width: 249px">Full Name:</td>
<td>
<input name="fullname" id="fullname" type="text" size="20" />
</td>
</tr>
<tr>
<td style="width: 249px">Job Title:</td>
<td>
<input name="jobtitle" id="jobtitle" type="text" />
</td>
</tr>
<tr>
<td style="width: 249px">Known Alergies:</td>
<td>
<input name="knownAllergies" id="knownAllergies" type="checkbox" value="Yes" />Yes
<input name="knownAllergies" id="knownAllergies" type="checkbox" value="No" />No
</td>
</tr>
<tr>
<td style="width: 249px; height: 102px;">How Many?:</td>
<td style="height: 102px">
<select multiple="multiple" name="Select2">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</td>
</tr>
<tr>
<td style="width: 249px">Fruits:</td>
<td>
<input name="Fruit[]" id="Fruit[]" type="radio" checked="checked" value="Apple" />Apple<br />
<input name="Fruit[]" id="Fruit[]" type="radio" value="Orange" />Orange<br />
<input name="Fruit[]" id="Fruit[]" type="radio" value="Fruit" />Fruit
</td>
</tr>
</table>
<label>Complete Info:</label>
<textarea name="allVendorInfo" id="allVendorInfo" cols="50" rows="7"></textarea><br />
<br />
</fieldset>
</form>
答案 0 :(得分:1)
您可以使用以下代码访问选择/用户输入
$(document).ready(function(){
$("input").change(function(e){
if($(this).is(':checked')){
}else{
};
var old = $('#allVendorInfo').val();
$('#allVendorInfo').val(old+ "%" + $(this).attr('name') + '|'+$(this).val() + "%");
});
$("select").change(function(e){
var old = $('#allVendorInfo').val();
$('#allVendorInfo').val(old+ "%" + $(this).attr('name') + '|'+$(this).val() + "%");
});
});
答案 1 :(得分:1)
编辑:由于某些原因,原始小提琴被打破,已更新链接
我正在思考这个问题:http://jsfiddle.net/JRwzz/3/
这个'触发器'当然可以是Run JS按钮以外的其他东西,例如,我想象它会在提交或其他用户操作上。
首先清除textarea然后循环所有输入并选择,取决于元素的类型 - 复选框,无线电,选择等。它使用稍微不同的方法来获取值(例如,如果它只是一个复选框)想要从已检查的值中获取值
为了将复选框组的值全部放在一行上,需要进行一些修改,但希望这足以让您明白这一点。
然后在它发现的每件东西上都将它附加到textarea并在最后放置一个换行符。
添加一个条件来检查另一个属性(例如data-export =“yes”)以便在将它包含在textarea之前进行检查并不会太难。
请注意,我之所以这么想,是因为你说所有表格都是动态的,所以我试着不需要依赖ID或名称来表达它,它只适用于任何形式。如果您可以获取生成表单的代码,则在html中输出您想要包含在textarea中的属性(也许客户的某些方法选择哪些方法适用于他们的管理区域)那么'无论是为每个客户制作JS,都可以节省时间。
答案 2 :(得分:0)
尝试这样的事情:
$("select, input").bind("change keyup", function() {
var form = $("<form>");
var data = new Object();
form.append($(":checked").clone());
$.each($("select"), function(i, item) {
if ($(item).val() != null) {
form.append(($(item).clone()));
}
});
$.each($("input[type='text']"), function(i, item) {
if ($(item).val().length > 0) form.append(($(item).clone()));
});
$("#allVendorInfo").val(form.serialize());
}).first().trigger("change");