将选择值放入输入字段，然后使用 JS 或 jQuery 提交

Question

我在 CMS 中有一个表单，它只有一个输入（文本类型），我无法向它添加其他字段（我无权访问数据库），所以我想要在附近创建选择选项字段并将选定的选项值添加到输入字段。

假设我有这个代码：

<input type="text" placeholder="Your name" />
<select id="yourAge">
  <option disabled>your age</option>
  <option value="18">18</option>
  <option value="19">19</option>
</select>
<select id="yourHeight">
  <option disabled>height</option>
  <option value="180 cm">180 cm</option>
  <option value="190 cm">190 cm</option>
</select>

这是提交后必须显示的方式。表单提交帖子并且工作正常。此选择标签不应触及任何数据库部分或其他任何内容。它只需要获取值，插入到该输入输出文本字段然后显示它。 是否可以像这样以特殊顺序显示值？：

Name: Bla Bla
Age: 18
Height: 180 cm

或者至少是这样的：

Bla Bla, age 18 years old, height 180 cm

我如何使用 JavaScript 或 jQuery 做到这一点？

顺便说一下，我的APP是基于nodeJS和MongoDB工作的。

提前致谢。

Answer 1

欢迎来到SO，这不是一个写作服务网站，所以下次请先自己研究一下，当你卡住的时候问。我写的这些东西的组合在这个网站上都有例子。

你可以搜索到你需要的东西：

-如何获取 HTML 元素的值。

-如何为元素添加值。

-如何在某些事件中执行此操作。

var input = document.getElementById("in");
var sel1 = document.getElementById("yourAge");
var sel2 = document.getElementById("yourHeight");

sel1.onclick = function(){
    sel1 = document.getElementById("yourAge");
    var selected = sel1.options[sel1.selectedIndex].value;
    input = document.getElementById("in");
    input.value="Name: "+input.value+", Age: "+selected;
};

sel2.onclick = function(){
    sel2 = document.getElementById("yourHeight");
    var selected = sel2.options[sel2.selectedIndex].value;
    input = document.getElementById("in");
    input.value=input.value+", Height: "+selected;
};

<input type="text" id="in" placeholder="Your name" size="35"/>
<select id="yourAge">
  <option disabled>your age</option>
  <option value="18">18</option>
  <option value="19">19</option>
</select>
<select id="yourHeight">
  <option disabled>height</option>
  <option value="180 cm">180 cm</option>
  <option value="190 cm">190 cm</option>
</select>

Answer 2

您是否尝试将所有字段添加到名称字段中？为名称创建另一个输入并为其提供唯一标识符以将其与您将向其中添加所有信息的其他输入区分开来是个好主意。

我将创建一个函数来处理将值从您的输入和选择字段传输到提供的输入字段。我会在提交时调用此函数，在表单提交之前将值添加到提供的输入中。

这是在 Codepen 上： https://codepen.io/MattStillwater/pen/pogVeRp

这是我为将值添加到提供的字段而创建的 setField() 函数：

function setField() {
  var nameVal = jQuery('#yourName').val() +', ';
  var ageSelectVal = jQuery('#yourAge').val() +', ';
  var heightSelectVal = jQuery('#yourHeight').val();
  var inputField = jQuery('input[type=text]').not(document.getElementById('yourName'));
  inputField.val(nameVal + ageSelectVal + heightSelectVal);
}

这是我正在使用的 HTML：

<div class="section" id="yourField">
<input type="text" placeholder="Your name" id="yourName" />
<select id="yourAge">
  <option>your age</option>
  <option value="18">18</option>
  <option value="19">19</option>
</select>
<select id="yourHeight">
  <option>height</option>
  <option value="180 cm">180 cm</option>
  <option value="190 cm">190 cm</option>
</select>
</div>

<form action="#" class="section" id="formFields">
<input type="text" /> <!-- The endpoint -->
<input type="submit" value="Submit" />
</form>

函数在提交事件中被调用：

jQuery('input[type=submit]').submit(function() {
  setField();
});