SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    E-business guru Eirik's Avatar
    Join Date
    Nov 2000
    Location
    Oslo, Norway
    Posts
    413
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Assigning values to array named form fields

    Hi,

    I have two different text fields named price[1] and price[2] which need to be populated by two different drop down lists when changed, all in the same form.

    I've tried the following (code simplified for easier readability):

    Code:
    <script language="JavaScript"><!--
    function clicked(form, id) {
    form.price[id].value = 'price';
    }
    //--></script>
     
    <select name="select[1]" onChange="clicked(this.form, 1)">
    <option></option>
    </select>
     
    <select name="select[2]" onChange="clicked(this.form, 2)">
    <option></option>
    </select>
    ...but that doesn't work. I suspect the error being in the syntax of my value assignment in the clicked function, but I don't know what it should be.

    Thanks in advance !
    Sincerely,

    Eirik Johansen
    Netmaking AS

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    In javascript, you can name an element "price[1]", but as soon as you try to refer to that element in the way that you did, you will get an error. In this line:

    form.price[id].value = 'price';

    js looks for an array named 'price', and there is no array named 'price, there is only an element named the strange looking "price[1]". That may look like an array to you, but it's just a string to javascript, which might as well be "price#1#" for all js cares. Unless you need those names specifically for server side programs, change the names to "price1" and "price2", as well as "select1" and "select2". There is no way in js to create an array when you enclose the name in quotes.

    If you have to have names that look like arrays, there is a way in js to refer to elements using their string names:

    document.getElementById("price[1]")

    and you have to add a corresponding 'id' attribute to the html element.

    In addition, it's not proper to refer to the element like this:

    form.price1.value = 'price';

    It should be:

    document.price1.value = 'price';

    IE is forgiving and will recognize the first reference, but other browsers won't.

  3. #3
    E-business guru Eirik's Avatar
    Join Date
    Nov 2000
    Location
    Oslo, Norway
    Posts
    413
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi 7stud,

    Thanks for your reply.

    I do need this naming scheme for server side purposes. Does that mean that I could do:

    Code:
    document.getElementById("price["+id+"]").value= 'price';
    instead of

    Code:
    form.price[id].value = 'price';
    as long as the tect field in question is the correct id attribute?

    In addition, it's not proper to refer to the element like this:

    form.price1.value = 'price';

    It should be:

    document.price1.value = 'price';
    Does this apply even though I pass this.form to the function?
    Sincerely,

    Eirik Johansen
    Netmaking AS

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Any valid js string can be in the parentheses, and valid strings can be formed by adding variable values to strings.

    2)
    Does this apply even though I pass this.form to the function?
    Nope, I overlooked that 'form' was a function parameter in your code, but you have to be careful: there is already an object named 'form' in js, so to avoid any confusion and weird errors, it's best to pick another name for your function parameter, e.g.:

    <input type='button' onclick="my_func(this.form)" .... />

    Code:
    function my_func(form1)
    {
        var x = form1.textbox1.value;
    }

  5. #5
    E-business guru Eirik's Avatar
    Join Date
    Nov 2000
    Location
    Oslo, Norway
    Posts
    413
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi 7stud,

    getElementById worked like a charm. Thanks a lot!
    Sincerely,

    Eirik Johansen
    Netmaking AS

  6. #6
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Eirik
    Hi 7stud,

    getElementById worked like a charm
    You may wish to test your script in Mozilla...

    Let's try this:

    Code:
    <script>
    function clicked(form, id) {
    	form["price[" + id + "]"].value = 'price';
    }
    </script>
    <form>
    	<select name="select[1]" onChange="clicked(this.form, 1)">
    		<option>1</option><option>2</option>
    	</select>
    	<input name="price[1]">
     
    	<select name="select[2]" onChange="clicked(this.form, 2)">
    		<option>1</option><option>2</option>
    	</select>
    	<input name="price[2]">
    </form>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •