Put select value to input field and then submit using JS or jQuery

Question

I have a form in the CMS which has only one input (text type) and I cannot add additional fields to it (I don't have access to the DB), so what I want is to create select options near the field and add selected options values to the input field.

Let say I have this code:

<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>

And this is how it must display after submition. The form submits the posts and works fine. This select tags should not touch any DB part or anything else. It only needs to get the values, insert to that inout text field and then show it. And is it possible to show the values in special order like this?:

Name: Bla Bla
Age: 18
Height: 180 cm

Or at least like this:

Bla Bla, age 18 years old, height 180 cm

How can I do this using JavaScript or jQuery?

By the way my APP works based on nodeJS and MongoDB.

Thanks in advance.

Does this answer your question? [Get selected value in dropdown list using JavaScript](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — ikiK, Jul 08 '20 at 20:06

ikiK · Answer 1 · 2020-07-08T21:07:32.803

Welcome to SO, this is not a writing service website, so please next time do your own research first and ask when you get stuck. Combination of this things I wrote is all over this website with examples.

You could have searched for exactly what you need:

-How to get values of HTML elements.

-How to add values to elements.

-How to do this on some event.

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>

score 0 · Answer 2 · answered Jul 08 '20 at 20:39

Are you trying to get all of the fields to get added to the name field? It would be a good idea to create another input for the name and give it a unique identifier to distinguish it from the other input where you will be adding all of the information to.

I would create a function that handles transfering the values from your input and select fields to the input field provided. I would call this function on submit, adding the values to the provided input before the form submission.

Here it is on Codepen: https://codepen.io/MattStillwater/pen/pogVeRp

This is the setField() function that I created for adding the values to the provided field:

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);
}

This is the HTML that I am using:

<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>

The function is being called on submit event:

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

"has only one input (text type) and I cannot add additional fields ", Also there is snippet button here on SO, so there is no need for external fiddles, just a suggestion for future reference. Cheers. — ikiK, Jul 08 '20 at 21:00
"(I don't have access to the DB)" - they were talking about in the database, not the HTML — mr_shazbot, Jul 10 '20 at 00:12

Put select value to input field and then submit using JS or jQuery

2 Answers2