Member Avatar for dreamygirl

Hi guys,

I'm taking web design as a minor and currently Im doing my project on this subject .

My idea was about an Educational Website for kids

I'm almost done with the whole website

I just need a lil help with this part of a page:

[IMG]http://up.mrkzy.com/images/images/50ivlmtx9o05htzlwi8.jpg[/IMG]
The idea is to make the kid enter his/her name,grade and the part of language he wants to learn (vocabulary or grammar )

Then when pressing ok , function newwindow() is called , processes the selection and launches a new window
of specified grade and part of language (thats already existing ) , With a text at the top of the new window saying : Welcome,(student name)


I know how to create a function that processes 1 link only

but how should i do that with multiple selections of combobox and radio buttons ?????

this the code i came up with :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> :::: Mr.Cone Learn and fun ::::</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{ 
cursor:url("Cursors/bear1.ani");
background-image: url('images/back3.jpg');
background-repeat: repeat-x;
}

</style>
<script type="text/javascript">
<!--
function newwindow(){

window.open( "links/lesson1.html", "myWindow", 
"status = 1, height = 300, width = 300, resizable = 0" )

}


//-->
</script>
</head>



<body>
<div id="logostart">
</div>
<form id="namegrade" align="center" method = "post" action = "">
		 
		 <p><label>Name: 
			   <input name = "name" type = "text" size = "25" />

			</label></p>

<p><label>I want to learn: 
			   
<input type = "radio" name = "radiobutton" value = "vocab" />
			<label>Vocabulary</label>


<input type = "radio" name = "radiobutton" value = "grammar" />
			<label>Grammar</label>
		   
</label>


<p>
			<label>Grade: 

			   
			   <select name = "Grade">
				  <option selected = "selected">1</option>
				  <option>2</option>
				  <option>3</option>
				  <option>4</option>
			   
		  
			   
			   </select>
			</label>
		 </p>

		 <p>
			<input type = "button" value = "Ok!" onclick="newwindow()"/>
			<input type = "reset" value = "Clear" />
		 </p>   
	  </form>
 <a href="index.html">
<img src="images/back.gif" width="70" height="70" alt="Press here to go back to the homepage" />
</a>


</body>
</html>

If any one can help me , it would be much appreciated .

  • 3 Contributors
  • 9 Replies
  • 180 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

Did you mean, collecting all the entries from the parent window and then passing those datas in the pop-up window? Am i getting it right?
Or you just want to open a multiple window depending on the selected option?

Member Avatar for dreamygirl

Did you mean, collecting all the entries from the parent window and then passing those datas in the pop-up window? Am i getting it right?
Or you just want to open a multiple window depending on the selected option?

Yes :)

colecting all the entries from the parent window and passing the data in the pop up ..

How can I do that ?

Member Avatar for Airshow

Mmmmm, tricky one Essential. It's all yours.

Member Avatar for essential

But It would be easier if you will provide me with some help buddy! Airshow lol! &#8212; @ (dreamygirl), my preferred solution for this type of application is to use PHP. Doing this on a client-based will be a tough job. But still we have another solution if you really can't use PHP--and that will be, the help of a cookie. The only disavantages about cookie, is that they are not always available in the user's browser. I will try to provide some example as soon as i get my extra time. But for now you'll have to wait. Or wait for another poster for his/her preferred solution. ( Asside from me and AirShow ).

Member Avatar for Airshow

(Thanks for your confidence Essential!!)

Dreamygirl,

Your problem splits into two parts:

  1. Getting the form to submit into a target window which you must first open from JavaScript because you want to specify its width, height etc rather than just getting whatever your browser wants to give you that day. This is not hard but requires some specific knowledge of how to use window.open(), how to correctly return true/false from an event handler, and how to set the action, method and target in the HTML <form> tag.
  2. Getting the page in the opened window to pick up all the form parameters, and building the page accordingly. This is tricky if you want to stay 100% clint-side.

I know how to do this (not involving cookies Ess! :D ), but it is way more advanced than you would be expected to do for a school project. It would be very obvious to your marker that you had gotten some serious assistance.

A possible solution is to keep everything in the same window. You could emulate the effect of a separate window by showing an absolutely positioned iframe and loading it with your lesson page(s). But again, that is getting a bit involved.

Maybe you need to change the design concept a little, such that each combination of lesson type and grade causes a different lesson page to be displayed in the same window. This would require (2 x 4) = 8 lesson pages, and you would need to provide a nice big BACK button to users could get back to the selector page. This would all be fairly easy.

What seems simple sometimes turns out not to be; especially in web programming.

You would not be the first web programmer who had to modify a design in light of reality ..... it's pretty well goes with the territory (we've all been there).

Airshow

Member Avatar for essential

Here goes everything.
Two things to consider before applying the whole script
#1. Make sure that your cookie is enabled.
#2. You must turn off the pop-up blocker on your browser.

You must create all the following file's and save it. Be sure that all files is on the same directory.
#1 cookie.js: You will need to incorporate this in the 3 html documents.
#2. index.html
#3 and #4. Vocabulary.html which has the same content as Grammar.html.

Here is the code for the cookie.js:

// No editing required

var now = new Date(), expDate;
var data;
var cookies;
var cookieActive = Boolean( navigator.cookieEnabled );

cookies = function() {
   return { 
      set : function( name, value, exp, path ) {
         if ( cookieActive ) {
            try {
            data = name  + "=" + (( value !== null ) ? escape( value ) : "" );
            data += (( exp !== null ) ? "; expires=" + exp.toGMTString() : "" );
            data += (( path !== null ) ? "; path=" + escape( path ) : "" );
            document.cookie = data;
            } catch( e ) {
      (( e.description ) ? alert( e.description ) : alert( e.message ));
            }
         } else { alert("Unable to create cookie!\nPlease make sure that your cookie is enabled in your browser...");
         }
      }, // Baking cookie's
      del : function( name ) {
      expDate = now;
      expDate.setTime( expDate.getTime() - (( 24 * 60 * 60 * 1000 ) * 31 ));
         try {
         document.cookie = name + "=; expires=" + expDate.toGMTString() + "; path=/";
         } catch( e1 ) {
         (( e1.description ) ? alert( e1.description ) : alert( e1.message ));
         }
      }, // Dump cookie's
      eat : function( name ) {
         if ( name !== null ) {
            try {
            lists = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
      return (unescape( RegExp.$2 )); 
            } 
            catch( e ) {   
            lists = document.cookie.indexOf( name + "="); 
               if ( lists !== -1 ) {
               lists = lists + name.length + 1;
               sem = document.cookie.indexOf(";", lists);
               sem = ( sem == -1 ) ? document.cookie.length : ""; 
               return ( unescape(document.cookie.substr( lists, sem )));
               }
            }
         }
      } // Let's eat cookie's
   }; // End Block
}();

$ = { 
   ids : Object.prototype.ids = function( myELEM, num ) {
      if (( num !== null ) && ( typeof num === "number" )) {
      return document.getElementsByTagName( myELEM )[ num ];
      } else {
      return (( document.getElementById ) ? document.getElementById( myELEM ) : document.all.myELEM );
      }
    },
   rd : Object.prototype.rd = function() { 
      if ( this.checked ) {
       return this.value;
      } else {
       return "";
      }
   } 
};

index.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml-strict" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaSript : Demo</title>
<style type="text/css">
/* <![CDATA[ */
td, th {
   padding : .500em; }
/* ]]> */
</style>
<script type="text/javascript" src="./cookie.js"></script>
<script type="text/javascript">
// <![CDATA[
// No editing required;
var collectData, student;
collectData = function() {
eDate = now;
eDate.setTime( eDate.getTime() + (( 24 * 60 * 60 * 1000 ) * 31 )); // 1month validity for the cookie.

   program1 = $.ids("input", 1 ).rd();
   program2 = $.ids("input", 2 ).rd();
// Returns the value of the checked radio element.
//*  Arg "x" is the index number of this element 

student = $.ids("nAme"); // Setting the id of the name field. 
// * This is the same process as you specify your element in this declaration ( student = document.getElementById("nAme")).
// * I've just shorten out things.
   (( student.value !== null ) ? cookies.set("student", student.value, eDate, "/") :  alert("Please provide a valid name!"));
   program = cookies.set("lesson", ( program1 + program2 ), eDate, "/");
   grades = cookies.set( "grade", $.ids("grade").options[$.ids("grade").selectedIndex].value, eDate, "/" );
   if ( student.value.length > 2 ) { 
// This will open a file depending on which is button is checked.
// so if the value of the radio button is set to "Vocabulary" -
// then this will open the "Vocabulary.html" vise versa.
 
 return  window.open(( program1 + program2 + ".html"), student.value, "width = 300, height = 300, resizable = no" );
   } else {  alert("Please enter a valid name!"); return false; }
};
// ]]>
</script>
</head>
<body>
<div id="logostart">
<form id="namegrade" action="#" method="post" onsubmit="return false;">
<table frame="box" rules="all" summary="Website Project" style="text-align : left;">
<tr>
<th><label for="nAme">Name :</label></th>
<td><input type="text" name="nAme" id="nAme" value="" size="25" /></td>
</tr>
<tr>
<th colspan="2"><label>I want to learn:</label></th>
</tr>
<tr>
<td><label for="vocab">Vocabulary <input type="radio" value="Vocabulary" checked="checked" /></label></td>
<td><label>Grammar <input type="radio" value="Grammar" /></label></td>
</tr>
<tr>
<th><label for="grade">Grade:</label></th>
<td><select id="grade" name="grade" size="1">
<option value="Grade1">1</option>
<option value="Grade2">2</option>
<option value="Grade3">3</option>
</select></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="btn" name="btn" value="Ok!" onclick="collectData();" /></td>
</tr>
</table>
</form>
<a href="javascript:void(0);" onclick="history.go(-1);">&#171; Back to HomePage</a>
</div> 
</body>
</html>

same content Vocabulary.html and Grammar.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml-transitional" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title id="tiTle">JavaScript: POP-UP DEMO</title>
<script type="text/javascript" src="cookie.js"></script> 
<script type="text/javascript">
// <![CDATA[
var div;
window.onload = function() {
st = cookies.eat("student"); // Name of the student
learn = cookies.eat("lesson"); // This goes for the lesson he/she choose to learn
grd = cookies.eat("grade") // Grade of the student

div = $.ids("content");
// Let's just go with the basic -
// You can alter everything from here depending on how you want to show the gathered data. 

div.innerHTML = "<h1>Welcome " + st + "</h1>\n";

div.innerHTML += "<h2>Learning " + learn + "</h2>\n";

div.innerHTML += "<h3>" + grd + "</h3>";
};
// ]]> 
</script>
</head>
<body>
<div id="content">

</div>
<p>Documentation goes here!</p>
</body>
</html>

and that goes with the whole program- Enjoy...

Member Avatar for dreamygirl

AIRSHOW
lol i was trying to include as much java script functions as I can , to get extra marks :P

but i guess I wont be able to do that , I'll change the design concept as u've said n I'll see what can I do else.

I might try including the links of grades and lessons in the homepage instead of doing this =(

Thanks for your advices and notes ^_^


--------


Essential :

thanks alot for ur effort n time :)

but i dont have any idea on how to deal with cookies , anyway i did the following :

1- copied the cookie file n pasted it the note pad , then saved it with (.js)

2-Copied the the index,vocab n sturcture files

but i dont know how to corporate the cookie with the files I've made , how can i do that ??

Member Avatar for Airshow

Ess, I hope you don't mind me answering that last question.

Dreamygirl,
Assuming cookie.js to be in the same directory as all your html pages:

<script src="cookie.js"><script>

I usually keep all my js files in a scripts subdirectory, and therefore use:

<script src="scripts/cookie.js"><script>

You can stick as many of these statements on your pages as necessary, eg.:

<script src="scripts/cookie.js"><script>
<script src="scripts/calculation_functions.js"><script>
<script src="scripts/data.js"><script>

In fact it is a good idea to do this as it keeps your code well organised and also keeps your web pages nice and clean.

Of course you can still have some javascript directly on each page, and that is typically the case, but this should typically be a very small number of lines of code.

Airshow

Member Avatar for essential

Thank you Airshow!
@ Dreamygirl &#8212;
Just simply post your code and i will show you--how you can incorporate this file, in the cookie.js.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.