Javascript new-new-new-new-newbee

W

weblinkunlimited

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 +++++
 
E

Evertjan.

wrote on 10 mrt 2008 in comp.lang.javascript:
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.
Click to expand...

Unimportant, PHP runs only serverside. Below is clientside code.
+++++ START SOURCE +++++
<form name=listform id=listform action=index.phtml method=post>

<script language='Javascript'>
Click to expand...

Use instead:
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' [..]


var list = document.getElementById('listform');
Click to expand...

The html element needs to be ready, before you can reference to it.
var descr = list.elements['number_post'+rij];
Click to expand...

Same problem, duidelijk?
document.write('Output: '+descr);
Click to expand...


document.write() when used in a function that is executed after the page is
loaded, will result in an implicit document.open(),
clearing the page of all previous html and script(!!!)

Niet doen dus.

}
</script>
<table>
<tr id='row10' class='nodisplay'>
<td>
<select id='number_post10' name='number_post[10]'
Click to expand...

number_post[10]

html name can not reference to a variable or n array variable or any other
javascript expression, only to a text string.

onChange='calculate(10)' STYLE='font-size: 10px; font-family: arial;'>
Click to expand...
<option value=0>0</option>
<option value=1>1</option>
<option value=2>2</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]'
Click to expand...

description_post is that an array?
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()
Click to expand...

the document.write() in the function will trash the javascript code too.
STYLE='width: 75px; height: 20px; font-family: arial; font-size:
10px;'>
</td>

<td>
<select id='description_post9'
name='description_post[9]'
Click to expand...

see above
onChange='calculate(9)'
Click to expand...

see above
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]
Click to expand...

what is merge[] ? see above
STYLE='width: 100px;
height: 20px;
font-family: arial; font-size: 10px;'>
</td>
<td align='right'>
<input onFocus=calculate() type=text name=size[9]
Click to expand...

see above
STYLE='width:
75px; height: 20px; font-family: arial; font-size: 10px;'>
</td>
</tr>
Click to expand...
[..]


Why write a piece of code with so many mistakes?
Try to build smaller code and expand it
while repeatedly testing and debugging.

Read the NG FAQ: <http://www.jibbering.com/faq/>
and online tutorials,
and use the browser's view source to see
how others made javascript code work.
 
T

Thomas 'PointedEars' Lahn

[...]
Click to expand...

I really wonder how you could actually think that with a (non-descriptive)
Subject header such as this and a message body such as that (no error
description; 150+ uncommented, probably copy-prayed, code lines) could earn
you any helpful answers anywhere.

Well, here it is: <http://jibbering.com/faq/>


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I fix this issue in sqaurespace code block? 1
action_page.php form 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Survey details won't go through using php, ajax, Mysql 0
How do I get the if statement correct in the lines that has it in the program? 2
Help with Visual Lightbox: Scripts 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Can anyone please help? HTML - two tables applying different styles 4

Members online

No members online now.
Total: 45 (members: 1, guests: 44)
Robots: 481

Forum statistics

Threads
473,989
Messages
2,570,207
Members
46,783
Latest member
RickeyDort

Latest Threads

Top