javascript - Combining two input fields into one variable

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?

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

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?

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

Share Improve this question edited Jul 11, 2017 at 14:47 Cœur 38.8k25 gold badges206 silver badges278 bronze badges asked Jul 22, 2013 at 14:03 user2341069 3895 gold badges8 silver badges14 bronze badges

Are you trying to get an array of references to DOM elements or the single element whose id somehow bines two strings? – Scott Sauyet Commented Jul 22, 2013 at 14:04
1 what is the expected content of optionValue? – Alp Commented Jul 22, 2013 at 14:05
"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 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 Commented Jul 22, 2013 at 15:46

Add a ment |

3 Answers 3

Sorted by: Reset to default 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;

Further to a ment 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>

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>

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Combining two input fields into one variable - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)