使用Javascript将多个输入字段合并为一个输入字段？
使用Javascript将多个输入字段合并为一个输入字段可以通过以下步骤实现：
- 创建一个HTML表单，包含多个输入字段。例如，假设我们有三个输入字段：firstName、lastName和email。
<form>
<input type="text" id="firstName" placeholder="First Name">
<input type="text" id="lastName" placeholder="Last Name">
<input type="email" id="email" placeholder="Email">
<button type="button" onclick="mergeFields()">Merge Fields</button>
</form>- 在Javascript中，编写一个函数来合并这些字段的值。该函数将获取每个输入字段的值，并将它们合并为一个字符串。
function mergeFields() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var email = document.getElementById("email").value;
var mergedField = firstName + " " + lastName + " (" + email + ")";
// 将合并后的值设置到一个新的输入字段中
document.getElementById("mergedField").value = mergedField;
}- 在HTML表单中添加一个新的输入字段，用于显示合并后的值。
<input type="text" id="mergedField" readonly>完整的代码如下：
<form>
<input type="text" id="firstName" placeholder="First Name">
<input type="text" id="lastName" placeholder="Last Name">
<input type="email" id="email" placeholder="Email">
<button type="button" onclick="mergeFields()">Merge Fields</button>
</form>
<input type="text" id="mergedField" readonly>
<script>
function mergeFields() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var email = document.getElementById("email").value;
var mergedField = firstName + " " + lastName + " (" + email + ")";
document.getElementById("mergedField").value = mergedField;
}
</script>这样，当用户在输入字段中输入值后，点击"Merge Fields"按钮，就会将多个输入字段的值合并为一个，并显示在新的输入字段中。
注意：以上代码只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和验证。
相关·内容
2回答
使用Javascript将多个输入字段合并为一个输入字段？
javascript、jquery
我有下面的代码，它将多个字段组合成一个字段，但它只在您单击按钮时组合它们。有没有一种方法可以编辑它，使其不需要单击按钮就可以组合字段，并在用户键入时组合它们？Last Name Combined <input class="combine" id="Voltes5" size="105" value='' />
<script type="text/javasc
浏览 1提问于2017-08-06得票数 1
回答已采纳
1回答
Qualtrics和保存自定义表单字段响应
qualtrics
我使用html <form>标记在Qualtrics中创建了一个自定义表单。我无法将任何输入到自定义字段中的文本保存并与其他数据一起显示。有谁知道如何找到其他Qualtrics调查中使用的是什么.php，或者如何从自定义文本字段中收集条目？
浏览 2提问于2017-04-08得票数 0
回答已采纳
3回答
使用jQuery实现网页上的键盘捕获
javascript、jquery、javascript-events
我正在尝试实现一个捕获按键输入并为web创建命令提示符界面的JavaScript组件，我不想使用文本字段$('*').bind( 'keypress', keypressCaptureFunction)如何正确地捕获按键事件？
浏览 0提问于2010-02-27得票数 1
回答已采纳
3回答
Braintree托管字段的格式设置
javascript、braintree
使用时，我想控制卡号和有效期的格式。之前，我使用来做这件事，但这似乎不可能与iframe一起使用。Braintree的Docs也没有对这个问题给予任何启发。
有什么办法可以解决这个问题吗？
浏览 4提问于2015-07-05得票数 6
3回答
Angular 5:通过求和值验证多个输入字段
angular、validation、angular5
我想通过汇总多个数字输入字段的值来验证它们，并为Angular创建一个自定义的Validator。每个输入看起来是这样的：有多个数字输入，每个人的值都可以在0到10之间，但所有字段的总和必须小于或等于10。我有一个函数，如果所有输入字段</e
浏览 0提问于2018-02-09得票数 8
回答已采纳
4回答
从Rails表单创建json对象
ruby-on-rails、json
我有一个Ruby on Rails表单，它接受输入并将其保存为模型属性。不过，其中一个属性包含json数据。我希望能够将输入到多个字段中的数据保存为我的models属性中的单个JSON对象。如果有帮助，我还可以创建一个Hash并将其转换为json。基本上，我只想将多个输入字段合并为一个，然后从那里传递它。
谢谢!
浏览 0提问于2012-12-27得票数 9
回答已采纳
1回答
在多个输入字段中输入不同的数字，如何在javascript中自动添加
javascript
在多个输入字段中输入不同的数字，如何在javascript中自动添加“输入字段是n个数字.”，这个输入字段i使用克隆函数只考虑数字字段中与文本字段无关的注意事项:但是我的条件是这里有不同的名称和id
我该怎么做？请帮帮我..。
浏览 2提问于2016-03-16得票数 0
回答已采纳
1回答
Rails 3:如何使用ruby gem对非模型数据进行日期验证。
ruby、ruby-on-rails-3.1、rubygems
在我的rails应用程序中，我遇到了用户在网页上输入出生日期的情况。我想根据这个出生日期来确认他们的年龄。我想在模型中进行验证，因为即使用户提供的出生日期不是模型的一部分，我也需要询问模型，了解用户对他们试图访问的特定项目的年龄。
我找到了date_validator宝石，但这只适用于模型。更重要的是，我没有使用日期字段，所以我将把出生日期分成三个部分，三个月、一天和一年的字符串，然后需要以某种方式将其转换为日期，并根据该日期验证他们的年龄是否大于或等于他们应该拥有的年龄。我不确定是否有一个创业板，我试图
浏览 0提问于2012-07-12得票数 0
1回答
iPhone编程--用类型对象填充的表
c#、iphone、xamarin.ios、xamarin、tableview
我正在尝试创建一个表格，其中填充的是文本字段和标签，但我有一个棘手的时间填充它。抛出错误，好像表只接受字符串进入它的单元格。 }}
在使用该表的
浏览 0提问于2013-05-24得票数 0
回答已采纳
我正在尝试使用{{bindAttr}}和输入字段的viewName.elementId将标签链接到输入字段。它在单个条目视图上工作，但在显示多个记录时不起作用:它只是将标签链接到集合中的最后一个输入字段。(这曾经在使用较旧的ember库的前一个迭代中有效，但现在不能了。)valueBinding="fullName" readonly=&quo
浏览 4提问于2013-07-10得票数 3
回答已采纳
2回答
使用javascript将多个值从多个输入字段复制到一个输入字段中？
javascript、jquery
我试图找到一种方法，将多个输入字段的值复制到一个单个输入字段中。目前，我只能使用以下代码将1个输入字段复制到另一个输入字段中：
addEvent(document.getElementById('inputName'), 'keyup', function () {我只能假设使用j
浏览 5提问于2014-03-24得票数 0
2回答
通过jQuery代码上的单行/最小行进行所有输入字段验证
jquery、forms、validation
我有一个表单，其中有30个输入框和10个文本区域，以及3个选择框(更新的)字段，所有这些都是强制字段。如何通过jQuery /javascript对其can't be blank/empty/NULL.的所有输入字段一起应用验证
我不想每次使用每个输入框的ID，并为每个输入框和文本区域创建单独的验证。如果任何输入字段为空，则
浏览 1提问于2010-03-06得票数 2
回答已采纳
3回答
使用JavaScript验证多个输入字段
javascript、jquery、html
我想使用JavaScript和jQuery对多个输入字段进行验证。我正在获得单个字段的验证，但是当我单击submit按钮时页面正在加载，因此填充的数据已经消失。="validationerror"></div>
<input type="submit" class="btn btn-primary" value="Save"&#x
浏览 6提问于2014-12-25得票数 0
回答已采纳
3回答
隐藏了可见性的输入字段值未过帐
javascript、php、jquery、html、css
我有一个带有数字选项的选择框，用户选择一个选项，我通过it.Whenever显示输入框，这取决于数字selected.So，输入框最初是隐藏的。现在的问题是，当我试图发布这些输入框的值时，它们没有被发布。name="db2" placeholder="db2 name"/>
<input type="submit" name="submit" id="submit" />
浏览 0提问于2016-08-13得票数 0
回答已采纳
1回答
使用字段或其他变量的文件名创建戊name文件
excel、pentaho、pdi、spoon
我能够从表输入创建csv文件。在这里，我能够从字段中指定文件名。电流：
浏览 1提问于2018-04-07得票数 0
回答已采纳
1回答
使用，而不是= on方法。
javascript、html、forms、get
="text" name="keyword" value="a">我怎样才能把它提交到哪里而不是这样：
然后找到获取文本字段值的方法，但不包括文本字段名，因此它会立即附加到url的尾部，如下所示。
浏览 1提问于2020-03-05得票数 0
回答已采纳
2回答
以嵌套Rails形式将多幅图像上载到S3
ruby-on-rails、ruby、file-upload、amazon-web-services、jquery-file-upload
我正在尝试在Rails 4应用程序中使用嵌套的fields_for标记来上传文件。我跟踪了几个Railscast，即：、、，但仍然不能完全实现它的功能。还使用了盈亏波和jquery文件上传。<%= builder.hidden_field :blogpost_id %><% end %>上传一个文件是有效的但是，在文件字段中添加":multi
浏览 5提问于2014-03-16得票数 0
1回答
将多个字段合并为一个输入字段时出现的问题
javascript、jquery
我有一些代码来组合几个字段，并在用户的个人资料页上传递到1个输入字段F。加载后，#Salary_para1会首先将值传递给字段F，然后当用户在#Salary_value中输入值时，它也会将其值传递给字段F。与复选框#Salary_para2的情况相同。假设字段F保存后的值为"MYR1000 + Allowance“。加载后，字段F仍然显示余量的值(样本中的‘MYR’)，而不是"MYR1000 + #Salary_para1“。1)如
浏览 0提问于2012-12-27得票数 0
回答已采纳
2回答
用一个输入字段隐藏其他元素
javascript、html、dom-events、hide
请你给我提供一些简短的帮助，我的Javascript代码。当DIV元素完全为空(没有文本)时，我有一个输入字段隐藏DIV元素： document.getElementById("frei").className = "frei1";它完全符合我的要求，主要问题是，一旦输入字段被激活，输入内部和当我开始擦除文本，直到输入
浏览 2提问于2014-11-04得票数 1
回答已采纳
1回答
JQuery -将多个文本输入传递到隐藏字段
javascript、jquery、html
我正在尝试使用JQuery将多个文本输入传递到一个隐藏字段。到目前为止，我得到了以下信息： $(function(){
$('#textinput1').blur(function$('input[name=hiddenField]').val($('#textinput1').va
浏览 3提问于2013-02-06得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
