#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    scotLand
    Posts
    6
    Rep Power
    0

    manipulating Javascript form values


    Hi, Im trying to call a javascript funtion and pass to it the value of a hidden input tag (which is set in another function).

    Eg;

    function one() {

    document.forms[0].field.value = 'this';

    }

    function two(arg) {

    i want the form val passed to this function

    }

    then in me html

    <form>
    <input type='hidden' name='field'>
    </form>
    <script etc...>
    <!--
    document.write(two(document.forms[0].field.value))
    //-->
    </script>

    When I do this nothing seems to get passed to function two?? If I make the input tag type text, I can see the form value is being assigned in function one so thats not my problem.

    Any help appreciated.

    Cheers.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    The Netherlands
    Posts
    122
    Rep Power
    12
    <script etc...>
    <!--
    var str = "return two(document.forms[0].field.value)";
    document.write(str)
    //-->
    </script>

    function two(arg) {

    return arg;

    }
    ~mgb
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    249
    Rep Power
    12
    Hi,

    doesn't seem to be anything wrong. Maybe you forgot to return value in two()?

    http://galileo.spaceports.com/~ibidris/
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    scotLand
    Posts
    6
    Rep Power
    0
    Thanks for that. But its not quite what I need. All thats gonna do is write return next(document.setInput.nav_val.value) to the screen..... back to the drawing board... ;-)
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    147
    Rep Power
    12
    If I understand the problem correctly, this should work for you. Not knowing the final usage makes things trickier, but here is the basic implementation:
    Code:
    function f() {
    	// set the value to some arbitrary text
    	document.getElementById('my_input').value = 'some text';
    }
    
    function g() {
    	// return the value to the caller
    	return document.getElementById('my_input').value;
    }
    
    <input type="hidden" id="my_input">
    
    <a href="" onclick="f(); return false;">set value</a>
    <br><a href="" onclick="alert(g()); return false;">read value</a>
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    scotLand
    Posts
    6
    Rep Power
    0
    Ok, fair point. I'll try and explain this more clearly.

    What Im trying to do is change a gif on the screen without refreshing the page. I have this part working ok. My problem lies in that I have a further 3 navigation gifs (for browsing through the display gifs) that need to have an on & off state.

    So, i do:
    ---
    var count = new Array();
    var theImages = new Array("test1.gif","test2.gif", "test3.gif");

    if (document.images) {

    for (i=0;i<theImages.length;i++) {
    count[i] = new Image();
    count[i].src = theImages[i];
    }

    //for the rollovers.
    pic1on= new Image();
    pic1on.src="1_on.gif";
    pic2on= new Image();
    pic2on.src="2_on.gif";
    pic3on= new Image();
    pic3on.src="3_on.gif";

    pic1off= new Image();
    pic1off.src="1_off.gif";
    pic2off= new Image();
    pic2off.src="2_off.gif";
    pic3off= new Image();
    pic3off.src="3_off.gif";

    }
    ---

    to declare the images I want to use. The array at the top contains the images I want to browse through, the others are for the rollovers.

    Next I have:

    --
    function imgon(imgname) {

    if (document.images) {

    document[imgname].src = eval(imgname + "on.src");

    }
    }

    function imgoff(imgname) {

    if (document.images) {

    document[imgname].src = eval(imgname + "off.src");

    }
    }
    --

    to control the rollovers -again no problems here.

    Next up I have:

    --
    function set(nav_val) {

    document.setInput.nav_val.value = nav_val;

    }

    --

    This is called once when the page initally loads and is set to 0, as you will see.

    Next I have:

    --
    function next(pic_num) {

    document.images["pic"].src = count[pic_num].src;

    switch(pic_num) {

    case 0:
    nav= "<img src='1_on.gif' name='pic1' border='0'>&nbsp;<a href=\"#\" onClick=\"next(1)\" onmouseover=\"imgon('pic2');window.status='2'; return true\" onmouseout=\"imgoff('pic2')\"><img src='2_off.gif' name='pic2' border='0'></a>&nbsp;<a href=\"#\" onClick=\"next(2)\" onmouseover=\"imgon('pic3');window.status='3'; return true\" onmouseout=\"imgoff('pic3')\"><img src='3_off.gif' name='pic3' border='0'></a>";
    document.setInput.nav_val.value = 0;
    break;
    case 1:
    nav= "<a href=\"#\" onClick=\"next(0)\" onmouseover=\"imgon('pic1');window.status='1'; return true\" onmouseout=\"imgoff('pic1')\"><img src='1_off.gif' name='pic1' border='0'></a>&nbsp;<img src='2_on.gif' name='pic2' border='0'>&nbsp;<a href=\"#\" onClick=\"next(2)\" onmouseover=\"imgon('pic3');window.status='3'; return true\" onmouseout=\"imgoff('pic3')\"><img src='3_off.gif' name='pic3' border='0'></a>";
    document.setInput.nav_val.value = 1;
    break;
    case 2:
    nav= "<a href=\"#\" onClick=\"next(0)\" onmouseover=\"imgon('pic1');window.status='1'; return true\" onmouseout=\"imgoff('pic1')\"><img src='1_off.gif' name='pic1' border='0'></a>&nbsp;<a href=\"#\" onClick=\"next(1)\" onmouseover=\"imgon('pic2');window.status='2'; return true\" onmouseout=\"imgoff('pic2')\"><img src='2_off.gif' name='pic2' border='0'></a>&nbsp;<img src='3_on.gif' name='pic3' border='0'>";
    document.setInput.nav_val.value = 2;
    break;

    }

    return nav;
    return document.setInput.nav_val.value;

    }

    --

    The first part in the function changes the image on the screen and again I have no problems with this.

    In the switch statement I want to get where I have come from (pic_num) and build the correct navigation bar, and then reset the value of the form field.

    Now the html:

    --
    <body onLoad='set(0)'>
    <img src="test1.gif" name="pic">
    <br><br>
    <form name='setInput'>
    <input type='text' name='nav_val'>
    </form>
    <script language="JavaScript">
    <!--

    document.write(next(document.setInput.nav_val.value))

    //-->
    </script>
    </body>
    </html>
    --

    2 things:

    1. If anyone can think of a better way of doing this then )
    2. I have manged to get this all working in ns4.7 if I change the input type to text.... which is not much good really.

    Im actually doing this as a favour for a friend and Im really starting to wish I had kept my mouth shut...

    thanks again.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    147
    Rep Power
    12
    Could you post a link to this? It would be easier to debug having access to the images.

    Also, I see that you are might want to avoid using the word 'count' as a function name - it is a reserved word.

    Another thing: Try identifying your HTML elements by id rather than by name. Example:
    [code]<image id="pic">[code]
    Then, in your Javascript:
    Code:
    var my_image = document.getElementById('pic');

IMN logo majestic logo threadwatch logo seochat tools logo