Javascript new-new-new-new-newbee

Discussion in 'Javascript' started by weblinkunlimited@gmail.com, Mar 10, 2008.

  1. Guest

    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 +++++
     
    , Mar 10, 2008
    #1
    1. Advertising

  2. Evertjan. Guest

    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.


    Unimportant, PHP runs only serverside. Below is clientside code.

    > +++++ START SOURCE +++++
    > <form name=listform id=listform action=index.phtml method=post>
    >
    > <script language='Javascript'>


    Use instead:
    <script type='text/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'

    [..]

    >
    > var list = document.getElementById('listform');


    The html element needs to be ready, before you can reference to it.

    > var descr = list.elements['number_post'+rij];


    Same problem, duidelijk?

    > document.write('Output: '+descr);



    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]'


    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;'>


    > <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]'


    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()


    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]'


    see above

    > onChange='calculate(9)'


    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]


    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]


    see above

    > STYLE='width:
    > 75px; height: 20px; font-family: arial; font-size: 10px;'>
    > </td>
    > </tr>

    [..]


    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.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Mar 10, 2008
    #2
    1. Advertising

  3. wrote:
    > [...]


    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
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Mar 11, 2008
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Grober
    Replies:
    3
    Views:
    652
    Grober
    Dec 6, 2003
  2. Mohamed El Ashamwy
    Replies:
    0
    Views:
    381
    Mohamed El Ashamwy
    Dec 24, 2003
  3. DotNet
    Replies:
    5
    Views:
    397
    Kevin Spencer
    Jan 27, 2004
  4. vbGansta
    Replies:
    0
    Views:
    291
    vbGansta
    Feb 16, 2004
  5. Martin Arvidsson, Visual Systems AB

    NewBee Q: Saving TextBox data to Table and display a new page.

    Martin Arvidsson, Visual Systems AB, Mar 18, 2008, in forum: ASP .Net
    Replies:
    1
    Views:
    365
    David Wier
    Mar 18, 2008
Loading...

Share This Page