PDA

View Full Version : switch cases and positions order

kfai
08-16-2002, 04:30 PM
Hi...please help me....
I have 3 items (item A, item B and item C).next to each item are two textboxes. there is a submit button at the bottom.
Item A textbox1, Item B textbox1 and Item C textbox1 are used to let the user choose which page he wants to link to. for example, when the user choose 1, it will link to apple.htm. and when the user choose 2, it will link to orange.htm...etc

now Item A textbox2, Item B textbox2 and Item C textbox2 are used to allow the user to choose what position order they want.
. for example, if the user put 1 in the item A textbox2, 3 in the item B textbox2 and 2 in the item C textbox2. then click submit. it will link to another new window. the result will be shown like item A will be placed on the top, item C will be in the middle and item B below. in this window, when the user click on the e.g. item A, it will link to the page (in the same window) according what he types in the textbox1

i really need your help...thanks!
beetle
08-16-2002, 05:27 PM
Uh. Uh. Confusion

Ok, three groups of 2 text inputs. The user enters a page URL into each first box, and then assigns it a priority number in the 2nd.

Now lets assume this data has been entered:+----------+----------+
| URLS | Priority |
+----------+----------+
| page.htm | 1 |
| site.htm | 3 |
| url.htm | 2 |
+----------+----------+ So now when the user clicks Submit, what...a popup window opens with 3 frames? Like this?<frameset rows="*,*,*">
<frame src="page.htm">
<frame src="url.htm">
<frame src="site.htm">
</frameset> Do I get you right?
kfai
08-16-2002, 05:55 PM
ok....1 link to apple.htm and 2 link to orange.htm

____________________
| |
| Item A [1] [3] |
| Item B [2] [1] |
| Item C [1] [2] | [] <--- textbox
| {submit} | {} <--- submit button
|___________________|


click on the submit button, it will link to another window like this..

__________________________
| |
| Item B |
| Item C |
| Item A |
| |
| |
|__________________________|

here, Item B, Item C and Item A are hyperlinks...
item B links to orange.htm
item C links to apple.htm
item A links to apple.htm
beetle
08-16-2002, 06:27 PM
Ohhhh, I see. That's a fairly complicated problem, and the solution may very well be over your head. I'll code somthing up and post it here later. :D
beetle
08-16-2002, 06:49 PM
Ok. The first page is simple. Let's call it test.htm<html>
<head>
<title>Test</title>
</head>

<body>
<form action="test2.htm" method="get">
<input type="text" id="url1" name="url1"><input type="text" id="p1" name="p1"><br>
<input type="text" id="url2" name="url2"><input type="text" id="p2" name="p2"><br>
<input type="text" id="url3" name="url3"><input type="text" id="p3" name="p3"><br>
<input type="submit" value="Make Page w/URLs!">
</form>
</body>

</html>Now, things get complicated. Here is the HTML for the page it submits to, test2.htm<html>
<head>
<title>Test</title>

<script>
var qString = top.location.search;
qString = unescape(qString.substring(1));
var getVars = qString.split(/[\&]/);
var counter = 0;
var pageVars = new Array();
var temp;
for (var j=0; j<getVars.length; j+=2) {
pageVars[counter] = new Array()
temp = getVars[j].split(/[=]/);
pageVars[counter][0] = temp[1];
temp = getVars[j+1].split(/[=]/);
pageVars[counter][1] = temp[1];
counter++;
}

function getLink(i) {
var linkHTML = "<a href='?'>?</a>";
var page = "";
for (var j in pageVars)
if (parseInt(pageVars[j][1]) == i)
page = pageVars[j][0];
linkHTML = linkHTML.replace(/\?/g,page);
return linkHTML;
}

</script>
</head>

<body>
<script>
document.writeln(getLink(1)+"<br>");
document.writeln(getLink(2)+"<br>");
document.writeln(getLink(3)+"<br>");
</script>
</body>

</html>
kfai
08-17-2002, 01:25 AM
Thanks for your help...but the solution still doesn't solve my problem...maybe i don't explain very clearly...i try to explain to you again...sorry...


ok....1 link to apple.htm and 2 link to orange.htm

_________________
| |
| Peter [1] [3] |
| James [2] [1] |
| Sam [1] [2] | [] <--- textbox
| {submit} | {} <--- submit button
|________________|


click on the submit button, it will link to another window like this..

_____________
| |
| James |
| Sam |
| Peter |
| |
| |
|___________ |

here, Item B, Item C and Item A are hyperlinks...
Sam links to orange.htm
Peter links to apple.htm
James links to apple.htm

I need the name to be shown in the new window..
kfai
08-17-2002, 01:32 AM
and one more question....

if i heve 2 links for the user to choose which onehe wants to go...
what should i do?


this is what i did in test2.htm:

function getLink(i) {
var linkHTML = "<a href='script.htm'>?</a>";
var page = "";
for (var j in pageVars)
if (parseInt(pageVars[j][1]) == i)
page = pageVars[j][0];
linkHTML = linkHTML.replace(/\?/g,page);
return linkHTML;
}

another called script2.htm
beetle
08-17-2002, 04:37 AM
Meep. Even more complicated. Doable though. Here it is, the code for test.htm. I put the data in tables so it's easier to follow.<html>
<head>
<title>Test</title>
</head>

<body>
<form action="test2.htm" method="get">
<table border="1" cellpadding="5">
<tr>
<th>Link Text</th>
<th>Link URL Index<br>1=orange.htm, 2=apple.htm</th>
<th>Sort Order</th>
</tr>
<tr>
<td>Peter</td>
<td><input type="text" id="Peter" name="Peter"></td>
<td><input type="text" id="p1" name="p1"></td>
</tr>
<tr>
<td>James</td>
<td><input type="text" id="James" name="James"></td>
<td><input type="text" id="p2" name="p2"></td>
</tr>
<tr>
<td>Sam</td>
<td><input type="text" id="Sam" name="Sam"></td>
<td><input type="text" id="p3" name="p3"></td>
</tr>
</table>
<input type="submit" value="Make Page w/URLs!">
</form>
</body>

</html>And now, for test2.htm<html>
<head>
<title>Test</title>

<script>
var links = new Array('default.htm','orange.htm','apple.htm');
var qString = top.location.search;
qString = unescape(qString.substring(1));
var getVars = qString.split(/[\&]/);
var counter = 0;
var pageVars = new Array();
var temp;
for (var j=0; j<getVars.length; j+=2) {
pageVars[counter] = new Array()
temp = getVars[j].split(/[=]/);
pageVars[counter][0] = temp[0];
pageVars[counter][1] = temp[1]
temp = getVars[j+1].split(/[=]/);
pageVars[counter][2] = temp[1];
counter++;
}
alert(pageVars);
function getLink(i) {
var linkHTML = "<a href='&'>?</a>";
var page = "";
var text = "";
for (var j in pageVars)
if (parseInt(pageVars[j][2]) == i) {
text = pageVars[j][0];
page = links[pageVars[j][1]];
}
linkHTML = linkHTML.replace(/\&/,page);
linkHTML = linkHTML.replace(/\?/,text);
return linkHTML;
}

</script>
</head>

<body>
<script>
document.writeln(getLink(1)+"<br>");
document.writeln(getLink(2)+"<br>");
document.writeln(getLink(3)+"<br>");
</script>
</body>

</html> If you want to understand how this works, let me know and I'll explain it some.
kfai
08-20-2002, 11:35 AM
sorry really sorry
i say wrongly
it should be like the following....

Peter textbox1 can choose 2 links only
(e.g. 1 to apple.htm, 2 to orange.htm)

James textbox1 can choose another 2 links only
(e.g. 1 to pear.htm, 2 to banana.htm)

Sam textbox1 can choose another 2 links only
(e.g. 1 to strewberry.htm, 2 to grapes.htm)
beetle
08-20-2002, 02:52 PM
I will do my best.

Ok, first of all, the form in test1.htm sends it's data via the GET method, meanin that it attaches all the dad within the form to the URL in the form of what is commonly called, the query string (starts with a ?) If you go back and try submitting the page, you will see what I mean.

Now, since we can access the query string via the search attribute of the location object, we grab that with these lines
var qString = top.location.search;
qString = unescape(qString.substring(1));
Notice I take the substring starting at the first index of the string, because we don't want to capture the '?'. I also unescaped it in case there is any URL encoded charaters (spaces, for example, become %20)

Now, I need to split the query string into name/value pairs. Each name value pair is separated by an ampersand (&), so I split the string that way, and assign them to the variable getVarsvar getVars = qString.split(/[\&]/);Now, getVars is an array holding all my name/value pairs (which is a total of 6, in this case) The next for loop is complicated, and does most of the work.// Loop through the getVars array skipping every 2nd index
for (var j=0; j<getVars.length; j+=2) {
// Create the 2nd dimension to the array
pageVars[counter] = new Array()
// Split the name/value pair up
temp = getVars[j].split(/[=]/);
// assign the name to index 0 and the value to index 1
pageVars[counter][0] = temp[0];
pageVars[counter][1] = temp[1]
// Split the name/value pair again
temp = getVars[j+1].split(/[=]/);
// Assign the value to index 2
pageVars[counter][2] = temp[1];
// pageVars[0] now holds data like this: ('Peter',1,2)
counter++;
}
Whew! Now that I have all my data in a tidy 2-dimensional array, I need a function to use it. I decided to just make three function calls, and use the priority number as the only parameter<script>
document.writeln(getLink(1)+"<br>"); //Shows link with priority 1
document.writeln(getLink(2)+"<br>"); //Shows link with priority 2
document.writeln(getLink(3)+"<br>"); //Shows link with priority 3
</script>
Now, for how the getLink() function works. function getLink(i) {
// Initialize link HTML with 2 replacement characters
var linkHTML = "<a href='&'>?</a>";
var page = "";
var text = "";
// Loop through the pageVars array
for (var j in pageVars)
// If i matches priority of current array set, then assign the link text and link href to text and page
if (parseInt(pageVars[j][2]) == i) {
text = pageVars[j][0];
page = links[pageVars[j][1]];
}
// Replace the replace characters with the correct values
linkHTML = linkHTML.replace(/\&/,page);
linkHTML = linkHTML.replace(/\?/,text);
// Return HTML to page for writing
return linkHTML;
}
kfai
08-20-2002, 03:08 PM
wah...it's so complicated....i try to understand it...

and if the program become like the following....

Peter textbox1 can choose 2 links only
(e.g. 1 to apple.htm, 2 to orange.htm)

James textbox1 can choose another 2 links only
(e.g. 1 to pear.htm, 2 to banana.htm)

Sam textbox1 can choose another 2 links only
(e.g. 1 to strewberry.htm, 2 to grapes.htm)

what should i change?
or will it be completely different?
beetle
08-20-2002, 03:16 PM
Nah, not too bad<html>
<head>
<title>Test</title>

<script>
var PeterLinks = new Array('default.htm','orange.htm','apple.htm');
var JamesLinks = new Array('default.htm','pear.htm','banana.htm');
var SamLinks = new Array('default.htm','strawberry.htm','grapes.htm');

var qString = top.location.search;
qString = unescape(qString.substring(1));
var getVars = qString.split(/[\&]/);
var counter = 0;
var pageVars = new Array();
var temp;
for (var j=0; j<getVars.length; j+=2) {
pageVars[counter] = new Array()
temp = getVars[j].split(/[=]/);
pageVars[counter][0] = temp[0];
pageVars[counter][1] = temp[1]
temp = getVars[j+1].split(/[=]/);
pageVars[counter][2] = temp[1];
counter++;
}

function getLink(i) {
var linkHTML = "<a href='&'>?</a>";
var page = "";
var text = "";
for (var j in pageVars)
if (parseInt(pageVars[j][2]) == i) {
text = pageVars[j][0];
page = eval(text+'Links[pageVars[j][1]]');
}
linkHTML = linkHTML.replace(/\&/,page);
linkHTML = linkHTML.replace(/\?/,text);
return linkHTML;
}

</script>
</head>

<body>
<script>
document.writeln(getLink(1)+"<br>");
document.writeln(getLink(2)+"<br>");
document.writeln(getLink(3)+"<br>");
</script>
</body>

</html>
kfai
08-20-2002, 03:25 PM
ok....i start to understand a bit....

var Peter Links = new Array('default.htm','orange.htm','apple.htm');

the name must be the same as the id in test1.htm?
beetle
08-20-2002, 03:27 PM
Bingo, because the eval() statement (that I highlighted) further down uses that
kfai
08-20-2002, 03:36 PM
ok...but the fpr loop part is really confusing...

what is
// Loop through the getVars array skipping every 2nd index
for (var j=0; j<getVars.length; j+=2) {

and

// Create the 2nd dimension to the array
pageVars[counter] = new Array()
beetle
08-20-2002, 03:40 PM
Ok, do you have a basic understanding of how FOR loops work.

Also, do you know what a two dimensional array is?
kfai
08-20-2002, 03:43 PM
i have no idea what two dimensional array is.
beetle
08-20-2002, 04:07 PM
Ok, a one dimensional array is simple, and what you are probably familiar with. Like

var grades = new Array(90, 87, 65, 95);

Now, it's important to know that an array stores two pieces of data per entry. It's obvious that it stores the data you enter (in this case, the grades) but it also stores an index for that data. Arrays are zero-based so the first index is 0. So, to be more accurate, the array looks like this+----+----+----+----+
| 0 | 1 | 2 | 3 | <-- Indexes, or pointer
+----+----+----+----+
| 90 | 87 | 65 | 95 | <-- values
+----+----+----+----+

So, you can see, grades[0] == 90, grades[1] == 87, and so on.

Now, the data held by one array value can also be an array. This creates a two dimensonal array (like Battleship ;)) I'll show you what the pageVars array looks like here. +-------+-------+-----+
| 0 | 1 | 2 | <-- indexes for first dimension
+----+-------+-------+-----+
| 0 | Peter | James | Sam | <-- values for pageVars[i][0]
+----+-------+-------+-----+
| 1 | 1 | 2 | 1 | <-- values for pageVars[i][1]
+----+-------+-------+-----+
| 2 | 3 | 1 | 2 | <-- values for pageVars[i][2]
+----+-------+-------+-----+
^Indexes for 2nd dimension

So, for a couple examples, pageVars[0][2] == 3, pageVars[2][0] == 'Sam' etc.

Got all that? :D
kfai
08-20-2002, 04:18 PM
ic...i understand...more and more interesting...
i am a newbie in javascript and i just started learning it..:p

assume that i have left frame and right frame...if the name James, Peter and Sam are on the left frame, and when i click on e.g. James, the page will be shown on the right frame.
is it possible?

this is what i have tried before....(i create 2 files)

----------------------------------------------------------------------------
in first htm file..

<html>

<frameset cols="22%,*" frameborder="1">
<frame name="leftframe" src="leftframe.htm">
<frame name="rightframe" src="index.htm">
</frameset>

</html>

----------------------------------------------------------------------------
in leftframe.htm

<html>
<head>
<script type="text/javascript">

function put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=option
document.forms[0].favorite.value=txt
}


function go(form)
{
parent.rightframe.location=form.selectmenu.value
}




</script>
</head>

<body>
<form>
<p>Fruits<br>
<select name="selectmenu" onchange="go(this.form)">
<option value="index.htm">--Select A Fruit--
<option value="fruit.htm">All fruits
<option value="apple.htm">Apple
<option value="orange.htm">Orange
<option value="pear.htm">Pear
<option value="banana.htm">Banana
</select>
</p>
</form>
</body>
</html>
-----------------------------------------------------------------------
this is the drop-down list.....
does it work in hyperlink?
beetle
08-20-2002, 05:32 PM
All you need is the 'target' attribute here.

<a href="apple.htm" target="rightframe">Peter</a>
kfai
08-20-2002, 07:31 PM
is it possible to do that in test2.htm?
what should i change?
beetle
08-20-2002, 07:34 PM
Sure, this line was created for just that purposevar linkHTML = '<a href="&" target="rightframe">?</a>';
kfai
08-20-2002, 07:42 PM
but i cannnot just add target="rightframe" for test1.htm and test2.htm to get the result i want, correct?
what else i need to do?
beetle
08-20-2002, 07:50 PM
Uh, I guess I don't know what you want. What do you want?
kfai
08-20-2002, 07:56 PM
ok...now we go back to test1.htm and test2.htm.....

we have :

(Left frame) | (Right Frame)
James |
Peter |
Sam |

when click on james, the result will be displayed on right frame...
beetle
08-20-2002, 08:04 PM
Why don't you actually test what I've given you and see if it works. From what I think you are asking to do, it should.
kfai
08-20-2002, 08:12 PM
i've tried it but it makes no different...
i change this line
var linkHTML = "<a href='&'>?</a>";
to
var linkHTML = '<a href="&" target="rightframe">?</a>';
beetle
08-20-2002, 08:15 PM
Can you post what you have online?...I think I have lost my ability to follow what's going here without any sort of visual aid...
kfai
08-20-2002, 08:17 PM
test.htm

<html>
<head>
<title>Test</title>
</head>

<body>
<form action="test2.htm" method="get">
<table border="1" cellpadding="5">
<tr>
<th>Link Text</th>
<th>Fill in the no.<br> representing the format</th>
<th>Sort Order</th>
</tr>
<tr>
<td>All Teams</td>
<td><input type="text" id="AllTeams" name="AllTeams" size="1"></td>
<td><input type="text" id="p1" name="p1" size="1"></td>
</tr>
<tr>
<td>France</td>
<td><input type="text" id="France" name="France" size="1"></td>
<td><input type="text" id="p2" name="p2" size="1"></td>
</tr>
<tr>
<td>Senegal</td>
<td><input type="text" id="Senegal" name="Senegal" size="1"></td>
<td><input type="text" id="p3" name="p3" size="1"></td>
</tr>
</table>
<input type="submit" value="Make Page w/URLs!">
</form>
</body>

</html>
----------------------------------------------------------------------------

test2.htm

<html>
<head>
<title>Test</title>

<script>
var AllTeamsLinks = new Array('default.htm','script.htm','script2.htm');
var FranceLinks = new Array('default.htm','index.htm','sss.htm');
var SenegalLinks = new Array('default.htm','france.xml','allteamsV.xml');

var qString = top.location.search;
qString = unescape(qString.substring(1));
var getVars = qString.split(/[\&]/);
var counter = 0;
var pageVars = new Array();
var temp;
for (var j=0; j<getVars.length; j+=2) {
pageVars[counter] = new Array()
temp = getVars[j].split(/[=]/);
pageVars[counter][0] = temp[0];
pageVars[counter][1] = temp[1]
temp = getVars[j+1].split(/[=]/);
pageVars[counter][2] = temp[1];
counter++;
}

function getLink(i) {
var linkHTML = '<a href="&" target="rightframe">?</a>';
var page = "";
var text = "";
for (var j in pageVars)
if (parseInt(pageVars[j][2]) == i) {
text = pageVars[j][0];
page = eval(text+'Links[pageVars[j][1]]');
}
linkHTML = linkHTML.replace(/\&/,page);
linkHTML = linkHTML.replace(/\?/,text);
return linkHTML;
}

</script>
</head>

<body>
<script>
document.writeln(getLink(1)+"<br>");
document.writeln(getLink(2)+"<br>");
document.writeln(getLink(3)+"<br>");
</script>
</body>

</html>
kfai
08-20-2002, 08:58 PM
it can works now...:p
thanks for your help!
you help me a lot.