Click to See Complete Forum and Search --> : document.write(...)
marshall_73
07-29-2003, 05:00 PM
Hi,
I'm a newbie at scripts, so I have a question which is probably very simple to answer, but I don't know the answer myself. So here it is.
In the following code, the output of the "service.selectedIndex" consists of a number. In the original drop-down menu (selectbox) there are a few options which contain text. Here is the script and the HTML of the drop-down menu:
msg.document.write(Service.selectedIndex+".........");
The output from this is a digit in stead of the text of the options (see below).
Here is the HTML:
<select name="select2" id="Service" value="">
<option>goede service</option>
<option>matige service</option>
<option>slechte service</option>
</select>
My goal is to output the text of the selected option, by using the document.write statement (or another, as long as it works ;) )
Someone got the answer???
Many thanks.
Try this:
<script type="text/javascript">
function setVals(sel) {
document.getElementById("mydiv").innerHTML = sel.options[sel.selectedIndex].text;
}
</script>
</head>
<body>
<form name="myform">
<select name="group" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</form>
<div id="mydiv"></div>
marshall_73
07-30-2003, 03:53 PM
Originally posted by pyro
Try this:
<script type="text/javascript">
function setVals(sel) {
document.getElementById("mydiv").innerHTML = sel.options[sel.selectedIndex].text;
}
</script>
</head>
<body>
<form name="myform">
<select name="group" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</form>
<div id="mydiv"></div>
That's exactly what I'm after, but now I want the output in a new window. So the form is on a website, when the choice is selected, the outcome must be in a new window. Tried the following, but it doesn't work (probably because I'm a newbie, but I try my best :D ) :
<script type="text/javascript">
function setVals(sel) {
msg=open("","DisplayWindow","toolbar=no,menubar=no,directories=no");
msg.document.getElementById("mydiv").innerHTML= sel.options[sel.selectedIndex].text;
}
</script>
Any suggestions??
Thanks
Try this:
<script type="text/javascript">
function setVals(sel) {
newwin = window.open("","winname","width=300,height=200,scrollbars=1");
newwin.document.write (sel.options[sel.selectedIndex].text);
}
</script>
</head>
<body>
<form name="myform">
<select name="group" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</form>
marshall_73
07-30-2003, 04:52 PM
Great !!! We're getting close. Appreciate your help. One final question (I hope). What to do if I want the output of 3 selectboxes in only one new window? Now each selectbox opens a new window. Here's the idea:
On a website I have three forms with select-boxes (like the one you've already gave me). Someone has to make three choises, then click a button and the new window appears with the output of the tree selections. Can this be done??
Thank you very much, your help is much appreciated.
Gr. M. (sorry for asking so many questions, but I really enjoy making websites, but I'm still new at it)
Yes, you'll just have to get the values of each select box and write them to the new window when the button is clicked.
marshall_73
07-30-2003, 07:21 PM
Originally posted by pyro
Yes, you'll just have to get the values of each select box and write them to the new window when the button is clicked.
I'm sorry, but i didn't succeed. When I make a choice in one selectbox, it immediately opens a new window with the output. I want to make three different choices in three different selectboxes and then a button beneath those selectboxes, which opens the new window with the output of the three boxes. Here's the html:
<html>
<head>
<script type="text/javascript">
??????????????????
</script>
<body>
<form name="myform">
<select name="group" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">one</option>
<option value="1">two</option>
<option value="2">three</option>
</select>
</form>
<form name="myform2">
<select name="group2" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">januar</option>
<option value="1">februar</option>
<option value="2">march</option>
</select>
</form>
<form name="myform3">
<select name="group3" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">2001</option>
<option value="1">2002</option>
<option value="2">2003</option>
</select>
</form>
<input type="button" value="Output to new window" onClick="?????()">
</body>
</html>
See what I mean? For exemple: I choose "two" from the first selectbox, "march" from the second box and "2003" from the third box. The output in the new window (after I clicked the button) must be: "two march 2003". Hope you can help me out with this.
Many, many, many thanx again.
Gr. M.
Something along these lines is what we are shooting for:
<script type="text/javascript">
function setVals(frm) {
one = frm.group.options[frm.group.selectedIndex].text;
two = frm.group2.options[frm.group2.selectedIndex].text;
three = frm.group3.options[frm.group3.selectedIndex].text;
newwin = window.open("","winname","width=300,height=200,scrollbars=1");
newwin.document.write (one+" "+two+" "+three);
}
</script>
<body>
<form name="myform">
<select name="group" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">one</option>
<option value="1">two</option>
<option value="2">three</option>
</select>
<select name="group2" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
</select>
<select name="group3" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">2001</option>
<option value="1">2002</option>
<option value="2">2003</option>
</select>
<input type="button" value="Output to new window" onClick="setVals(this.form)">
</form>
marshall_73
07-31-2003, 07:32 AM
BULLSEYE !!!!
This is exactly wat I mean. I used it, tested it and it works fantastic !!
Thanx for that
One more tiny little question (final one, I promise :D ): When you have a lot of options in a selectbox (e.g. 50) and you press the little arrow in that box wich shows you the list; is there a possibility to set the lenght of that list so that it does'n take the whole space of the screen (I get to see all the 50 options I can choose), but only let's say 5 visible options and a scrollbar.
For example: the same as the color selectbox in the "edit-reply" mode of this forum.
Hope you can help me again, although this isn't that important, it's just a esthetic issue. (it looks nicer)
Gr. M.
No, I don't know of a way to do that, besides setting the size with <select size="5"> but that is not what you are looking for...
marshall_73
07-31-2003, 08:32 AM
Originally posted by pyro
No, I don't know of a way to do that, besides setting the size with <select size="5"> but that is not what you are looking for...
Okay, then I leave it this way. Many thanx for all the rest.
Gr. M.
marshall_73
07-31-2003, 07:17 PM
I'm sorry Pyro, but I discovered a little error that I can't figure out. De script does exactly what I want, so that's not the problem. The problem is as follows:
As soon as you select a different option than the first one (default one), the status-bar prompts an error (I noticed later). It says:
Line: 5
Character: 2
error: 'group.options' is empty or not an object
code: 0
(but then in Dutch :) )
Do you perhaps know what the error is?
Thanx again.
Gr. M.
Can I see the entire code, please?
marshall_73
07-31-2003, 07:25 PM
Originally posted by pyro
Can I see the entire code, please?
It's the code you gave me in a previous post, but here it is:
<script type="text/javascript">
function setVals(frm) {
one = frm.group.options[frm.group.selectedIndex].text;
two = frm.group2.options[frm.group2.selectedIndex].text;
three = frm.group3.options[frm.group3.selectedIndex].text;
newwin = window.open("","winname","width=300,height=200,scrollbars=1");
newwin.document.write (one+" "+two+" "+three);
}
</script>
<body>
<form name="myform">
<select name="group" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">one</option>
<option value="1">two</option>
<option value="2">three</option>
</select>
<select name="group2" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
</select>
<select name="group3" onchange="setVals(this);">
<option value="choose">Please Choose</option>
<option value="0">2001</option>
<option value="1">2002</option>
<option value="2">2003</option>
</select>
<input type="button" value="Output to new window" onClick="setVals(this.form)">
</form>
ps. My god, you're a quick replier.
Gr. M.
My fault, sorry. You need to remove the onchange event handler from each of the <select> tags:
<script type="text/javascript">
function setVals(frm) {
one = frm.group.options[frm.group.selectedIndex].text;
two = frm.group2.options[frm.group2.selectedIndex].text;
three = frm.group3.options[frm.group3.selectedIndex].text;
newwin = window.open("","winname","width=300,height=200,scrollbars=1");
newwin.document.write (one+" "+two+" "+three);
}
</script>
<body>
<form name="myform">
<select name="group">
<option value="choose">Please Choose</option>
<option value="0">one</option>
<option value="1">two</option>
<option value="2">three</option>
</select>
<select name="group2">
<option value="choose">Please Choose</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
</select>
<select name="group3">
<option value="choose">Please Choose</option>
<option value="0">2001</option>
<option value="1">2002</option>
<option value="2">2003</option>
</select>
<input type="button" value="Output to new window" onClick="setVals(this.form)">
</form>
marshall_73
08-01-2003, 02:46 AM
Done !!!
It works great. Thank you for the effort. I won't bother you anymore (at least not with this issue ;) ).
Gr. M.