Поместите значение выбора в поле ввода, а затем отправьте, используя 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>

И вот как он должен отображаться после отправки. Форма отправляет сообщения и работает нормально. Эти теги выбора не должны касаться какой-либо части БД или чего-либо еще. Ему нужно только получить значения, вставить в это текстовое поле inout и затем показать его. И можно ли отображать значения в особом порядке, например, вот так?:

Name: Bla Bla
Age: 18
Height: 180 cm

Или, по крайней мере, так:

Bla Bla, age 18 years old, height 180 cm

Как это сделать, используя JavaScript или jQuery?

Кстати, мое приложение работает на базе nodeJS и MongoDB.

Заранее спасибо.

Answer 1

Вы пытаетесь добавить все поля к полю имени? Было бы неплохо создать еще один вход для имени и присвоить ему уникальный идентификатор, чтобы отличить guish его от другого входа, куда вы будете добавлять всю информацию.

I создаст функцию, которая обрабатывает передачу значений из вашего ввода и выбирает поля в предоставленное поле ввода. Я бы вызвал эту функцию при отправке, добавив значения к предоставленным входным данным перед отправкой формы.

Вот она в 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();
});

Answer 2

Добро пожаловать в 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>