Combining two input fields into one variable

Question

Include two IDs into one variable, for example

var optionValue=document.getElementById('Input1' + " " + 'Input2');

That code does not work but is there any similar code that would do this?

JS

function addNewListItem(){
var htmlSelect=document.getElementById('list');
var value1 = document.getElementById('Input1').value;
var value2 = document.getElementById('Input2').value;
var optionValue = value1 + " " + value2;
var optionDisplaytext = value1 + " " + value2;

var selectBoxOption = document.createElement("option");
selectBoxOption.value = optionValue.value;
selectBoxOption.text = optionDisplaytext.value;
htmlSelect.add(selectBoxOption, null);
alert("Option has been added successfully");
return true;

}

HTML

<table border="0" align="left">
<tr>
<td rowspan="2">
    <select name="list" id="list" size="10" style="width:150px">
    </select>
    </td>
<tr>
<td align="right">Option Value</td>
<td align="left"><input name="Input1" type="text" id="Input1" /></td>
</tr>
<tr>
<td align="right">Option Display Text</td>
<td align="left"><input name="Input2" type="text" id="Input2" /></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td align="left"><input name="btnAddItem" type="button" id="btnAddItem" value="Add Option" onclick="javaScript:addNewListItem();" /></td>
</tr>
</table>

I've tried the above code but it will not add to a listbox? it just says undefined in the box

Are you trying to get an array of references to DOM elements or the single element whose id somehow combines two strings? — Scott Sauyet
– Scott Sauyet, Commented Jul 22, 2013 at 14:04
"That code does not work but is there any similar code that would do this?" Do what? getting an element which has an ID which equals another two elements' ID concatenation? :) — speti43
– speti43, Commented Jul 22, 2013 at 14:14
It says undefined, because you're trying to take the value of a string. There are plenty of other things that might be fixed, but first replace optionValue.value with just optionValue, and the same for optionDisplaytext. — Scott Sauyet
– Scott Sauyet, Commented Jul 22, 2013 at 15:46

Ricola3D · Accepted Answer · 2013-07-22 14:06:34Z

2

Elements are text inputs ? Then somethink like below will work :

var value1 = document.getElementById('Input1').value;
var value2 = document.getElementById('Input2').value;
var optionValue = value1 + " " + value2;

answered Jul 22, 2013 at 14:06

Ricola3D

2,46218 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2341069 Over a year ago

Hi, I've used this but it does not appear into the list box, is there any reason for this? thanks :)

enhzflep Over a year ago

@user2341069 - You haven't added any text to it! I.e <option value='something'>_some_text_here_</option> - You can append the result of document.createTextNode("some_text_here"); to the option before you add it to the list.

user2341069 Over a year ago

@enhzflep I'm sorry I don't really understand

enhzflep Over a year ago

Okay, I'll add a full solution. Just gimme 5 mins.

enhzflep · Accepted Answer · 2013-07-22 14:40:04Z

Further to a comment I left, here's a full example.

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

window.addEventListener('load', mInit, false);

function mInit()
{
    byId('mBtn').addEventListener('click', onBtnClick, false);
}

function onBtnClick()
{
    var value1 = document.getElementById('Input1').value;
    var value2 = document.getElementById('Input2').value;
    var optionValue = value1 + " " + value2;

    var newOpt = newEl('option');
    newOpt.value = optionValue;         // this line sets the value given to a form by this option

    newOpt.appendChild( newTxt(optionValue) );  // this line adds the text viewable on the page

    byId('mSelect').appendChild(newOpt);
}

</script>
<style>
</style>
</head>
<body>
    <label>Input 1: <input id='Input1' value='value1'/></label>
    <label>Input 2: <input id='Input2' value='value2'/></label>
    <br>
    <select id='mSelect'></select><button id='mBtn'>Add to list</button>
</body>
</html>

stavarotti · Accepted Answer · 2013-07-22 14:13:22Z

0

I interpreted your question as follows:

Get n-number of elements by id.

You can do this with the following block:

HTML

<span id="foo">Foo</span>
<span id="bar">Bar</span>
<span id="foo1">Foo</span>
<span id="bar1">Bar</span>

JS

var nodes = document.querySelectorAll('#foo, #bar');
console.log(nodes);

You can then derive any data you want from each matched node.

answered Jul 22, 2013 at 14:13

stavarotti

5825 silver badges19 bronze badges

Collectives™ on Stack Overflow

Combining two input fields into one variable

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related