Question

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

假设我有以下代码：

export class SectionService {
objectResponse:Baseresponse<Section>;
 
constructor(private http:HttpClient) { }

getAllSection(){
  this.http.get(environment.wsURL+'/SectionGetAll').toPromise().then(res=>this.objectResponse=res);
  return this.objectResponse;
}
}

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

<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

我该如何使用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();
});

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

2 个答案: