August 11th, 2003, 04:43 AM
-
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.
August 11th, 2003, 05:54 AM
-
<script etc...>
<!--
var str = "return two(document.forms[0].field.value)";
document.write(str)
//-->
</script>
function two(arg) {
return arg;
}
~mgb
August 11th, 2003, 06:01 AM
-
August 11th, 2003, 06:03 AM
-
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... ;-)
August 11th, 2003, 06:14 AM
-
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>
August 11th, 2003, 07:03 AM
-
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'> <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> <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> <img src='2_on.gif' name='pic2' border='0'> <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> <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> <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.
August 11th, 2003, 09:59 AM
-
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');