How do I make this form work with drop down list?

[Donnie Seibel]

I made this code a while ago and had all text input. Now I am coming back through and adding drop downs to redundant values. The problem is when I add the selection list the wireSize function no longer sends the size to the inputbox on the html. I can't figure out the problem.

Here is the JS

function wireSize(){
	
var amps =(document.getElementById("resultbox4").value);
var wire = document.wireNum.wire.value;

if (amps <= 20) && (wire == 3) {
size = "3-#12 + #12grd in 3/4\" C";
var result = document.getElementById("wireSize");
result.value = size;
}
else
if (amps <= 20) && (wire == 4) {
size = "4-#10 + #10grd in 3/4\" C";
var result = document.getElementById("wireSize");
result.value = size;
}
else
if (amps > 20 && amps <= 30) && (wire == 3) {
size = "3-#10 + #10grd in 3/4\" C";
var result = document.getElementById("wireSize");
result.value = size;
}
else
if (amps > 20 && amps <= 30) && (wire == 4) {
size = "4-#10 + #10grd in 3/4\" C";
var result = document.getElementById("wireSize");
result.value = size;
}}

And the html:

<h2>Wire size and 80%</h2>
		<form name = "wireNum">
		<input type="text" name="myresultbox" id="resultbox4" style="width:50px; height:16.775px;"> Amps<br>	 
		<select name="wire"> 
		<option value=3>3W</option>
		<option value=4>4W</option>  
		</select><br>	
		<input value="Click for 80%" onclick="percentAmps()" type="button"> 
		<input type="text" name="myresultbox" id="ampPerc" style="width:50px; height:16.775px;"> Amps<br>
		<input value="Click for Wire Size" onclick="wireSize()" type="button"> 
		<input type="text" name="myresultbox" id="wireSize" style="width:200px; height:16.775px;"> <br>
		<form>

Any help is appreciated

[JKing]

For the value of a select you need to access it's options array.

var wire = document.wireNum.wire.options[document.wireNum.wire.selectedIndex].value;

That should fix it.

[Donnie Seibel]

Does anything else need to be different because if I take the form and the drop list away the size gets inputted in the result box again. What is confusing is the percentAmps is working either way. But when I add the form the wireSize stops.

[JKing]

Can't comment on the percentAmps function without seeing the code for it.

Here I made a few minor changes to your javascript and html.

Javascript: I added an extra set of brackets around all your if statements.

function wireSize(){
 
var amps =(document.getElementById("resultbox4").value);
var wire = document.wireNum.wire.options[document.wireNum.wire.selectedIndex].value;
  
if ((amps <= 20) && (wire == 3)) {
size = "3-#12 + #12grd in 3/4\" C";
var result = document.getElementById("wireSizeText");
result.value = size;
}
else
if ((amps <= 20) && (wire == 4)) {
size = "4-#10 + #10grd in 3/4\" C";
var result = document.getElementById("wireSizeText");
result.value = size;
}
else
if ((amps > 20 && amps <= 30) && (wire == 3)) {
size = "3-#10 + #10grd in 3/4\" C";
var result = document.getElementById("wireSizeText");
result.value = size;
}
else
if ((amps > 20 && amps <= 30) && (wire == 4)) {
size = "4-#10 + #10grd in 3/4\" C";
var result = document.getElementById("wireSizeText");
result.value = size;
}}

HTML: I added quotes around your option values and changed the id of "wireSize" to "wireSizeTe xt" which was causing a conflict with your function name.

<h2>Wire size and 80%</h2>
        <form name = "wireNum">
			<input type="text" name="myresultbox" id="resultbox4" style="width:50px; height:16.775px;"> Amps<br>     
			<select name="wire"> 
				<option value="3">3W</option>
				<option value="4">4W</option>  
			</select><br>    
			<input value="Click for 80%" onclick="percentAmps()" type="button"> 
			<input type="text" name="myresultbox" id="ampPerc" style="width:50px; height:16.775px;"> Amps<br>
			<input value="Click for Wire Size" onclick="wireSize()" type="button"> 
			<input type="text" name="myresultbox" id="wireSizeText" style="width:200px; height:16.775px;"> <br>
        </form>

[Donnie Seibel]

It seems as soon as I add the var to the js is breaks it. I can have the whole thing working with the select list in the html but the var wire breaks it. It's like the function won't take another variable.

[JKing]

Did you try the code I provided? I tested it and it works fine...

Could you post your current code?

[Donnie Seibel]

It seems that changing the result box ID to wireSizeText was doing it. I am confused because it was always set up that way but when I added the var wire it would not work. I wonder why that is?
Thanks for your help.