Displaying a select box value as text that is NOT part of a form.

[Chevy19]

Simple JS Function Below:

<script language="JavaScript"><!--
var AW1Value = 0;
var AW1Text = "";
var AW2Value = 0;
var AW2Text = "";

function setAdjustedWidth() {
var AW1Value = document.mainForm.FrameWidth1.selectedIndex;
var AW1Text = document.mainForm.FrameWidth1.options[AW1Value].text;
var AW2Value = document.mainForm.FrameWidth2.selectedIndex;
var AW2Text = document.mainForm.FrameWidth2.options[AW2Value].text;

if (AW1Value != 0) {

if (AW2Text != "0/8")

if (AW2Text == "7/8")
document.mainForm.AdjustedWidth1.value = AW1Text + ' ' + '5/8' + '\"';
else if (AW2Text == "3/4")
document.mainForm.AdjustedWidth1.value = AW1Text + ' ' + '1/2' + '\"';
else if (AW2Text == "1/4")
document.mainForm.AdjustedWidth1.value = AW1Text + '\"';
else
document.mainForm.AdjustedWidth1.value = (AW1Text-1) + ' ' + '7/8' + '\"';
else
document.mainForm.AdjustedWidth1.value = (AW1Text-1) + ' ' + '3/4' + '\"';

}
else {
document.mainForm.AdjustedWidth1.value = "";
}
}
//--></script>

Simple form:

<form>
<select name="FrameWidth1" onChange="setAdjustedWidth()">
<option value=10>10</option>
<option value=20>20</option>
<option value=30>30</option>
</select>
&nbsp;
<select name="FrameWidth2" onChange="setAdjustedWidth()">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
</form>


I can display the changed value in a FORM 'input box' easily with this line of code: <input type="text" name="AdjustedWidth1" size="4" maxlength="7">


But, how can I display this result as TEXT that is NOT part of the FORM further down on the page? Any takers???

[vwphillips]

give it an id

<input type="text" id="AdjustedWidth1" name="AdjustedWidth1" size="4" maxlength="7">

and use

document.getElementById(AdjustedWidth1').value=

inplace of

document.mainForm.AdjustedWidth1.value=

[glenngv]

Or maybe you mean it like this:

Adjusted width: <span id="adjWidth"></span>


and then replacing all occurrences of:

document.mainForm.AdjustedWidth1.value

with:

document.getElementById("adjWidth").innerHTML