JAVASCRIPT: Form to plain english

[camargo]

Howdy Kirupans!

I'm in the middle of trying to get a form of mine to display its contents in plain English.

[link] http://www.wirelessinteractive.com/cable/

This little application allows someone to enter the specs of a cable they'd like to custom order. They put in the length and quantity, select the connector types, and the type of cable to use. Once all of that is done, the form calculates the cost. No big deal. I also need it to describe the cable in plain English in an order summary.

Now, I built a function that I figured would work out, but I've been running into some problems. Take a look:

var cableDesc0 = document.getElementById("cableQty0").value + " x " + document.getElementById("cableLength0").value + " feet of " + document.getElementById("cableType0").value + " cable with " + document.getElementById("con01").value + " and " + document.getElementById("con02").value + " connectors.";The above is meant to concatenate all the values of the form into a single sentence and call it cableDesc0. It would look something like this:

25 x 15 feet of LMR195 cable with RPTNC Male and RPSMA Female connectors.

However, that variable declaration throws me an error saying the following:

Error: document.getElementById("cableQty0") has no properties.

Sorry guys, I know this might be a bit wordy, but any takers on this would be extremely appreciated.

[camargo]

*bump*

[camargo]

Sorry to bug guys, but I still haven't found a solution here. Any takers? Last call!

[icio]

This looks to be happening because the script is running in the <script> tags before the DOM has finished loading.

What you need to do is put the part of your code that starts:

var cableCost0 = "0";
var cableDesc0 = document.getElementById("cableQty0").value + " x " + document.getElementById("cableLength0").value + " feet of " + document.getElementById("cableType0").value + " cable with " + document.getElementById("con01").value + " and " + document.getElementById("con02").value + " connectors."; into a function. Remember to decalre your variables out-with the function so that they can be accessed by other functions.

It should become something like:

var cableCost0, cableDesc0;
function init() {
cableCost0 = "0";
cableDesc0 = document.getElementById("cableQty0").value + " x " + document.getElementById("cableLength0").value + " feet of " + document.getElementById("cableType0").value + " cable with " + document.getElementById("con01").value + " and " + document.getElementById("con02").value + " connectors.";
}

After that, you need to call the function from the bottom of your page.
Simple put a call to the `init` function before the end of the body of the document:

<!-- The other parts of the document -->
<script type="text/css">init();</script>
</body>
</html>

Hope that helps :thumb:

Edit: Why is Wireless Interactive selling cables anyway? Cookoo

[camargo]

icio you kind man, you! Thanks for the help! Looks like that did the trick.

If you've got the time, see if you can answer this one... You can see that the value of the cableType0 pull down is actually a decimal number. It's a number that is used to calculate the subtotal of the cable order. So, how do you think I should go about retrieving the NAME rather than the VALUE of the pull down item selected? If I leave it the way it is, my summary tells me I have "6 feet of 0.39 cable." :)

p.s. Wireless Interactive sells cables because you need to get your data to an access point and antenna somehow. Until those mages we call scientists can do so without physical conduits, then cables must be used! ;)

[icio]

http://w3schools.com/htmldom/dom_obj_select.asp


var select = document.getElementById("selectID");
alert(select.options[select.selectedIndex].innerHTML);

I think that should do the trick. I meant to say to you before: Instead of constantly calling `getElementById`, you should use variables like I have above; it's more efficient.

Hope that helps :thumb:

Edit: try `text` if `innerHTML` isn't exactly what you're after.

[camargo]

Hey icio,

Yeah, I planned on going through and defining all the variables once I got all the functions working, but thank you for the tip! It looks like hell with all of those messy 'getElementById' calls.

I'll give your method a try right away and let you know how it goes!