SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast SanSui's Avatar
    Join Date
    Jul 2003
    Location
    Virginia
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to pass particular form to javascript function?

    Say I've got these functions. They're used to switch the color and background image of a button and imagefield respectively, depending on a user's choice from a menu list. Keep in mind this is just for Explorer at the moment while I'm trying some things out:

    function changeColorBox()
    {
    eval("document.form1.button.style.backgroundColor='" + document.form1.ColorMenu.options[document.form1.ColorMenu.selectedIndex].value + "'");
    eval("document.images.imageField.src='images/spacer.gif'");
    eval("document.form1.printSelect.options.selectedIndex='0'");
    eval("document.form1.button.value=''");
    }
    function changeBackground()
    {
    eval("document.images.imageField.src='" + document.form1.printSelect.options[document.form1.printSelect.selectedIndex].value + "'");
    eval("document.form1.button.style.backgroundColor='white'");
    eval("document.form1.ColorMenu.options.selectedIndex='0'");
    eval("document.form1.button.value='Print Selected'");
    }

    As you can see, this works for one form only - "form1". I want to be able to pass a variable form name so I can use these functions for multiple forms.

    <select style="width:120" onChange="changeColorBox(this);" name="ColorMenu">

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some quick observations:

    If you wanted to 'un-optimize' your code, so that it would run as slowly as possible, you'd be on the right track. Lose the eval()s! You'll rarely need this slow-running routine; and, until you're more experienced at JavaScript, should avoid it at all cost. Also: always pass the object (whenever possible) in a form element event handler function call. And: Select.selectedIndex is an integer - and it's a property of Select, not Select.options.
    Code:
    function changeColorBox(oSelect)
    {
    	var oForm = oSelect.form;
    	oForm.button.style.backgroundColor = oSelect.options[oSelect.selectedIndex].value;
    	document.images.imageField.src = 'images/spacer.gif';
    	oForm.printSelect.selectedIndex = 0;
    	oForm.button.value = '';
    }
    
    function changeBackground(oSelect)
    {
    	var oForm = oSelect.form;
    	document.images.imageField.src = oSelect.options[oSelect.selectedIndex].value;
    	oForm.button.style.backgroundColor = 'white';
    	oForm.ColorMenu.selectedIndex = 0;
    	oForm.button.value = 'Print Selected';
    }
    
    <select style="width:120" onChange="changeColorBox(this)" name="ColorMenu">
    ::: certified wild guess :::

  3. #3
    SitePoint Enthusiast SanSui's Avatar
    Join Date
    Jul 2003
    Location
    Virginia
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the words of wisdom =) This has helped quite a bit, now I need to alter the image to be specific to each form as well. Can I pass the image name to the function along with 'this' so the function targets just that image? Each form will have its own colorbox and imagebox controlled by the select menus.

    I tried using an image input and changing the source property but it did absolutely nothing.

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have any functioning - more or less - code that you could post/link to? Easier to chat about this when we can see what's up....
    ::: certified wild guess :::

  5. #5
    SitePoint Enthusiast SanSui's Avatar
    Join Date
    Jul 2003
    Location
    Virginia
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.rvww-test.net/AmericanScrubs/test_script.html

    Here we go.
    Last edited by SanSui; Dec 22, 2003 at 12:31.

  6. #6
    SitePoint Enthusiast SanSui's Avatar
    Join Date
    Jul 2003
    Location
    Virginia
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made a crude adjustment, giving the images the same name as their respective form names and then using that for:

    document.images[myimg].src = oSelect.options[oSelect.selectedIndex].value;

    Seems to work, but I'm sure there's a better way

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, zipped it. Hope it's self-explanatory.
    Attached Files Attached Files
    ::: certified wild guess :::

  8. #8
    SitePoint Enthusiast SanSui's Avatar
    Join Date
    Jul 2003
    Location
    Virginia
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where's the attachment?

    Don't they normally show up with links in the post on these forums?

  9. #9
    SitePoint Enthusiast SanSui's Avatar
    Join Date
    Jul 2003
    Location
    Virginia
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, there it is =)

    I'm looking through it now. I like how you used an array for the images, I think I might do that for the colors too since those values will also have to be submitted.

    Thanks a bunch, I can take it from here

  10. #10
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like how you used an array for the images, I think I might do that for the colors too since those values will also have to be submitted.
    Exactly. Don't corrupt your data submission just to script helpful behaviors; plenty of arrays to go around. Use the select values as hash keys to them. Don't use form elements unless there's a reason. Might conside a preloader (faster display). Drink your milk.
    ::: certified wild guess :::


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
  •