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 "wireSizeText" 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.