如何用JS合并两个表单域答案

【问题标题】：How to merge two form fields with JS如何用JS合并两个表单域
【发布时间】：2020-12-19 10:19:54
【问题描述】：

我在 Joomla 中有注册表单，重复字段很少。我想要做的是将两个表单字段“名字”和“姓氏”合并到第三个字段“名称”中，它们之间有空格..

我正在使用此代码复制密码字段，它适用于一个字段。但我无法合并这两个字段..

jQuery(function() { 
jQuery("#password_field").change(function() { 
jQuery('#password2_field').val(this.value);});
});

有什么办法可以将 2 个字段合并到第 3 个字段中？

【问题讨论】：

标签： javascript html jquery forms

【解决方案1】：

$(document).ready(function(){
  $("#FirstName,#LastName").on('keyup',function(){
  var firstName = $('#FirstName').val();
  var lastName = $('#LastName').val();
  $('#mergeName').val(`${firstName} ${lastName}`);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<form action="">
  First name: <input type="text" name="FirstName" class="autoMerge" id="FirstName"><br>
  Last name: <input type="text" name="LastName" class="autoMerge" id="LastName" ><br>
  Merged: <input type="text" name="mergeName" id="mergeName"><br>
</form> 

</body>

你好，你可以使用这样的东西。

【讨论】：

这是一个不错的解决方案。但是，如果您在 input 而不是 change 事件上使用，您的 taget（合并）字段将在您键入时自动更新，而不是失去焦点
嗨。谢谢。因为我在 joomla 表单中使用它，所以我无法编辑字段的类，并且我看到你使用通用类“autoMerge”.. 我只能使用单个 ID 获取所有字段
你能用id吗？
是的..我只能使用不同的 id 获取所有 3 个字段..
好的，我正在修改代码，您可以同时签入

【解决方案2】：

尝试做这样的事情：

var firstName= document.getElementById('firstName').value;
var lastName= document.getElementById('lastName').value;
var mergeName= firstName + " " + lastName;
document.getElementById('mergeName').innerHTML= mergeName;

【讨论】：

嗨..我尝试将此添加到我的网站，但它似乎不起作用..我更改了我的 ID，但也许我必须添加其他内容？将一些产品放入购物车后，您可以在这里看到它 - 2.svet-vciel.sk/index.php?option=com_virtuemart&view=cart 2 个源字段在电子邮件之后