Javascript new-new-new-new-newbee

Giganews Newsgroups
Subject: Javascript new-new-new-new-newbee
Posted by:  weblinkunlimit…@gmail.com
Date: Mon, 10 Mar 2008

Hello,
The last two days I have done some Javascripting, but without succes.
My goal is the following:
I have 4 <form>-input fields; 2 <select> and 2 <input type=text>.
The <select> fields are 'number (1 until 10)' and a description-list.
When the number or description changes, the function calculate must be
called. So far, so good.

My problem is that I don't know how to handle the vars in Javascript.
I read the internet for two days, but I do not know what to do. My
problem is that I get an [object] output. So, I think that is an
array, but I do not know why.

I have placed the source hereunder. Please advise me what to do and...
Maybe the above text is written well English, my English is not that
good :-s

Thank you in advance!

PS. The Javascript is part of an PHP-script.
+++++ START SOURCE +++++
<form name=listform id=listform action=index.phtml method=post>

<script language='Javascript'>

function calculate(rij) {
var sort = new Array()
var code = new Array()
var description = new Array()
var size = new Array()
var occurs = new Array()

sort[0]='1'
code[0]='install'
description[0]='Installation costs, including first internet page'
size[0]='420.00'
occurs[0]=''
sort[1]='2'
code[1]='inet'
description[1]='Internet page without contentmanagement'
size[1]='110.00'
occurs[1]=''
sort[2]='3'
code[2]='inetc'
description[2]='Internet page with contentmanagement'
size[2]='260.00'
occurs[2]=''
sort[3]='4'
code[3]='content'
description[3]='Contentmanagement internet page, per option'
size[3]='400.00'
occurs[3]=''
sort[4]='5'
code[4]='domain'
description[4]='Domain registration, per year'
size[4]='25.00'
occurs[4]='1'

        var list    = document.getElementById('listform');
        var descr  = list.elements['number_post'+rij];
document.write('Output: '+descr);

}
</script>
<table>
    <tr id='row10' class='nodisplay'>
        <td>
            <select id='number_post10' name='number_post[10]'
onChange='calculate(10)' STYLE='font-size: 10px; font-family: arial;'>
                <option value=0>0</option>
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
                <option value=4>4</option>
                <option value=5>5</option>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
                <option value=10>10</option>
            </select>
        </td>

        <td>
            <input readonly type=text name=code[10] onFocus=calculate()
STYLE='width: 75px; height: 20px; font-family: arial; font-size:
10px;'>
        </td>

        <td>
            <select id='description_post10' name='description_post[10]'
onChange='calculate(10)' STYLE='font-size: 10px; font-family: arial;'>
            <option value='description1'>description1</option>
            <option value='description2'>description2</option>
            <option value='description3'>description3</option>
            <option value='description4'>description4</option>
            </select>
            <input type=text name=merge[10] STYLE='width: 100px; height: 20px;
font-family: arial; font-size: 10px;'>
        </td>
        <td align='right'>
            <input onFocus=calculate() type=text name=size[10] STYLE='width:
75px; height: 20px; font-family: arial; font-size: 10px;'>
        </td>
    </tr>

    <tr id='row9' class='nodisplay'>
        <td>
            <select id='number_post9' name='number_post[9]'
onChange='calculate(9)' STYLE='font-size: 10px; font-family: arial;'>
                <option value=0>0</option>
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
                <option value=4>4</option>
                <option value=5>5</option>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
                <option value=10>10</option>
            </select>
        </td>

        <td>
            <input readonly type=text name=code[9] onFocus=calculate()
STYLE='width: 75px; height: 20px; font-family: arial; font-size:
10px;'>
        </td>

        <td>
            <select id='description_post9' name='description_post[9]'
onChange='calculate(9)' STYLE='font-size: 10px; font-family: arial;'>
            <option value='description1'>description1</option>
            <option value='description2'>description2</option>
            <option value='description3'>description3</option>
            <option value='description4'>description4</option>
            </select>
            <input type=text name=merge[9] STYLE='width: 100px; height: 20px;
font-family: arial; font-size: 10px;'>
        </td>
        <td align='right'>
            <input onFocus=calculate() type=text name=size[9] STYLE='width:
75px; height: 20px; font-family: arial; font-size: 10px;'>
        </td>
    </tr>

    <tr id='row8' class='nodisplay'>
        <td>
            <select id='number_post8' name='number_post[8]'
onChange='calculate(8)' STYLE='font-size: 10px; font-family: arial;'>
                <option value=0>0</option>
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
                <option value=4>4</option>
                <option value=5>5</option>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
                <option value=10>10</option>
            </select>
        </td>

        <td>
            <input readonly type=text name=code[8] onFocus=calculate()
STYLE='width: 75px; height: 20px; font-family: arial; font-size:
10px;'>
        </td>

        <td>
            <select id='description_post8' name='description_post[8]'
onChange='calculate(8)' STYLE='font-size: 10px; font-family: arial;'>
            <option value='description1'>description1</option>
            <option value='description2'>description2</option>
            <option value='description3'>description3</option>
            <option value='description4'>description4</option>
            </select>
            <input type=text name=merge[8] STYLE='width: 100px; height: 20px;
font-family: arial; font-size: 10px;'>
        </td>
        <td align='right'>
            <input onFocus=calculate() type=text name=size[8] STYLE='width:
75px; height: 20px; font-family: arial; font-size: 10px;'>
        </td>
    </tr>

</table>
</form>
+++++ END SOURCE +++++

Replies