how do i display data got from a form in a dynamically created div?

(2 Pages)
1
2
→

20 Replies - 2679 Views - Last Post: 13 July 2011 - 11:27 PM

#1 strawhat89

The Watcher Outside Your Window

Reputation: 247

Posts: 1,784
Joined: 11-July 11

how do i display data got from a form in a dynamically created div?

Posted 11 July 2011 - 04:08 AM

Hey guys.. I am a newbie to javascript, and what I am exactly trying to do is get data from a form, push that data into an array of objects and when a "display" button is clicked, to display the data in the form a div layer with a table in it for each object created. I have problems with dynamically creating the divs...
Here's my code, I am sure there are lots of problems in it and any help is appreciated


<html>
<head>
<title> Card Stacking </title>
<script>
var t=0;
var cards = new Array();
var j=0;

function Card(name,address,work,home) {
   this.name = name;
   this.address = address;
   this.workphone = work;
   this.homephone = home;	
}

function display(cards)
{	

	for (j in cards)
	{
	var dv = document.createElement('div');	
	id = "card" + j;
	dv.setAttribute('id',id);       
	dv.style.position = absolute;
	dv.style.left = 600+j*10;
	dv.style.top = 100+j*10;
	dv.style.zindex = j;
	dv.innerHTML = "<table><tr><th style='background-color:blue; color:white;'>Business Card of "+ cards[j].name +
		       "<\/th><\/tr>" +  "<tr><td rowspan='4'><b>Name: <\/b>"+cards[j].name+"<br><b>Address:
<\/b>"+cards[j].address+"<br><b>Work-Phone: <\/b>"+cards[j].workphone+"<br><b>Home-Phone: <\/b>"+card[j].homephone+"<br><\/td><\/tr>";
	document.forms[0].appendChild(dv);
	}
}

</script>
</head>
<body>

<form name="form1">
<p><b>Name: </b> <input type="text" size="20" name="fname" >
</p>
<p><b>Address: </b> <input type="text" size="10" name="address" >
</p>
<p><b>Work-Phone: </b> <input type="text" size="10" name="work" >
</p>
<p><b>Home-Phone: </b> <input type="text" size="10" name="home" >
</p>
<p><input type="button" value="Submit" onclick="cards.push(new Card(fname.value,address.value,work.value,home.value));">
<input type="reset" value="Reset">
<input type="button" value="Display" onclick="display(cards);"></p>
</form>

</body>
</html>

Is This A Good Question/Topic? 0

Replies To: how do i display data got from a form in a dynamically created div?

#2 baavgai

Dreaming Coder

Reputation: 4880

Posts: 11,270
Joined: 16-October 07

Re: how do i display data got from a form in a dynamically created div?

Posted 11 July 2011 - 04:24 AM

Learn to look at error messages:

// absolute is not defined for
dv.style.position = absolute;
// card is not defined for
card[j].homephone

Also, I seriously question the approach of constantly adding a div when they hit display. I'd recommend having a div that you can simply use for output, not create a new one all the time. Indeed, you could just add to it as the user hits submit, which seems far more natural.

Hope this helps.

Was This Post Helpful? 1

#3 strawhat89

The Watcher Outside Your Window

Reputation: 247

Posts: 1,784
Joined: 11-July 11

Re: how do i display data got from a form in a dynamically created div?

Posted 11 July 2011 - 04:33 AM

Ok... The card[j] part happened when I pasted the code her... Sorry about that

and I didnt get the style.position thing.. Should I write absolute within quotes?

And about the dynamic divs, I thought of that because, I wanted to have a function to shuffle the layers using z-index. It is supposed to be like a stack of cards which can be shuffled and a new card is entered everytime a new instance of the Card object is created... Do you understand my problem? And thanks for the quick response

Was This Post Helpful? 0

#4 Dormilich

痛覚残留

Reputation: 2888

Posts: 7,533
Joined: 08-June 10

Re: how do i display data got from a form in a dynamically created div?

Posted 11 July 2011 - 05:08 AM

if you shuffle and the only card you see is the top one, there is really no need for a div for each card. you’d just fill the output div with the information of the top card.

second some notes on the code:
- you don’t need to escape forward slashes (/)
- there is no need for inline Javascript
- a for…in loop is used to loop over objects, for arrays and lists use a standard for() loop
- the Card object can fetch the appropriate values itself

explanation for the last point:

//# using only one property
function Card()
{
    this.setName();
}
//# a static property
Card.setNameField = function(elem) 
{
    Card.nameField = elem;
}
//# an instance property
Card.prototype.setName = function()
{
    this.name = Card.nameField.value;
}

//# use as

//# init fields
window.onload = function() {
    Card.setNameField(document.form1.fname);
}
//# create a card from the current form data ajnd add it to the stack
cards.push(new Card);

Was This Post Helpful? 1

#5 strawhat89

The Watcher Outside Your Window

Reputation: 247

Posts: 1,784
Joined: 11-July 11

Re: how do i display data got from a form in a dynamically created div?

Posted 11 July 2011 - 05:49 AM

Ok gotcha

Thanks.

Was This Post Helpful? 0

#6 strawhat89

The Watcher Outside Your Window

Reputation: 247

Posts: 1,784
Joined: 11-July 11

Re: how do i display data got from a form in a dynamically created div?

Posted 11 July 2011 - 09:37 PM

What if I wanted the Card stack to look like this ? Wouldn't I need dynamic divs then ?


<html>
<head>
<title> Card Stacking </title>
<script>
var cards = new Array();
function mover(c1,c2,c3)
{	
	document.getElementById(c1).style.zIndex = "2";
	document.getElementById(c1).style.left= 130;
	document.getElementById(c1).style.top= 140;

	document.getElementById(c2).style.zIndex=0;
	document.getElementById(c2).style.left= 100;
	document.getElementById(c2).style.top= 100;

	document.getElementById(c3).style.zIndex=1;
	document.getElementById(c3).style.left= 110;
	document.getElementById(c3).style.top= 120;
}

function Card(name,address,work,home) {
   this.name = name;
   this.address = address;
   this.workphone = work;
   this.homephone = home;
   this.PrintCard = PrintCard;
}

</script>
</head>
<body>
<script>
sue = new Card("Sue Suthers", "123 Elm Street", "555-1234", "555-9876");
phred = new Card("Phred Madsen", "233 Oak Lane", "555-2222", "555-4444");
henry = new Card("Henry Tillman", "233 Walnut Circle", "555-1299", "555-1344");
</script> 

<div id="card1" style="position:absolute; left:100; top:100; z-index:0;" onclick="mover('card1','card2','card3')">
<table>
<tr><th style="background-color:blue; color:white;">Business Card of <script>document.write(sue.name)</script></th></tr>
<tr><td rowspan="4" style="background-color:purple; color:white;">
<b>Name: </b><script>document.write(sue.name)</script><br>
<b>Address: </b><script>document.write(sue.address)</script><br>
<b>Work-Phone: </b><script>document.write(sue.workphone)</script><br>
<b>Home-Phone: </b><script>document.write(sue.homephone)</script><br>
</td></tr>
</table>
</div>

<div id="card2" style="position:absolute; left:110; top:120; z-index:1;" onclick="mover('card2','card3','card1')">
<table>
<tr><th style="background-color:black; color:white;">Business Card of <script>document.write(phred.name)</script></th></tr>
<tr><td rowspan="4" style="background-color:brown; color:white;">
<b>Name: </b><script>document.write(phred.name)</script><br>
<b>Address: </b><script>document.write(phred.address)</script><br>
<b>Work-Phone: </b><script>document.write(phred.workphone)</script><br>
<b>Home-Phone: </b><script>document.write(phred.homephone)</script><br>
</td></tr>
</table>
</div>

<div id="card3" style="position:absolute; left:130; top:140; z-index:2;" onclick="mover('card3','card1','card2')">
<table>
<tr><th style="background-color:red; color:white;">Business Card of <script>document.write(henry.name)</script></th></tr>
<tr><td rowspan="4" style="background-color:yellow; color:black;">
<b>Name: </b><script>document.write(henry.name)</script><br>
<b>Address: </b><script>document.write(henry.address)</script><br>
<b>Work-Phone: </b><script>document.write(henry.workphone)</script><br>
<b>Home-Phone: </b><script>document.write(henry.homephone)</script><br>
</td></tr>
</table>
</div>
</body>
</html>

This post has been edited by strawhat89: 11 July 2011 - 09:37 PM

Was This Post Helpful? 0

#7 Dormilich

痛覚残留

Reputation: 2888

Posts: 7,533
Joined: 08-June 10

Re: how do i display data got from a form in a dynamically created div?

Posted 12 July 2011 - 12:35 AM

I’d avoid a diagonal arrangement. I’d probably use an accordion-style list (nested <ul>) which you can open and close, similar to a suckerfish dropdown menu. but that does not need Javascript to create all data, those would be either fetched via AJAX or built on the server-side.

Was This Post Helpful? 0

#8 strawhat89

The Watcher Outside Your Window

Reputation: 247

Posts: 1,784
Joined: 11-July 11

Re: how do i display data got from a form in a dynamically created div?

Posted 12 July 2011 - 12:45 AM

I am doing an internship in a company and they have asked me to improve my javascript skills.. So I wanted to implement it pure javascript with no AJAX or jQuery... The suckerfish idea sounds good. I'll try it out, thanks

Was This Post Helpful? 0

#9 strawhat89

The Watcher Outside Your Window

Reputation: 247

Posts: 1,784
Joined: 11-July 11

Re: how do i display data got from a form in a dynamically created div?

Posted 12 July 2011 - 03:53 AM

I did it! My thanks to Dormilich and baavgai

Here's the code if anyone wants to use it.


<html>
<head>
<title> Card Stacking </title>
<script>
var cards = new Array();
var i = 0;

function Card(name,address,work,home) 
{
   this.name = name;
   this.address = address;
   this.workphone = work;
   this.homephone = home;
}

function prev()
{
	if(i == 0)
	{
		i=(cards.length-1);
		display(cards);
	}
	else
	{
		i--;
		display(cards);
	}
}

function next()
{
	if(i == (cards.length-1))
	{
		i=0;
		display(cards);
	}
	else
	{
		i++;
		display(cards);
		
	}
}

function display(cards)
{
	document.getElementById("p1").style.visibility = "visible";
	var dv = document.createElement('div');	
	if(document.getElementById("card1"))
		document.body.replaceChild(dv,document.getElementById("card1"));
	else
		document.body.appendChild(dv);
	var id = "card1";
	dv.setAttribute('id',id);       
	dv.style.position = "absolute";
	dv.style.left = 575;
	dv.style.top = 50;
	dv.innerHTML = "<table><tr><th style='background-color:blue; color:white;'>Business Card of "+ cards[i].name +
		       "<\/th><\/tr>" +  "<tr><td rowspan='4' style='background-color:purple; color:white;'><b>Name: <\/b>"+cards[i].name+"<br><b>Address: <\/b>"+cards[i].address+"<br><b>Work-Phone: <\/b>"+cards[i].workphone+"<br><b>Home-Phone: <\/b>"+cards[i].homephone+"<br><\/td><\/tr>"; 
			
}

</script>
</head>

 
<body>

<p id="p1" align=center style="visibility:hidden;">
<input type="button" onclick="prev();" value="Previous">

<input type="button" onclick="next();" value="Next">

</p>

<form name="form1">
<p><b>Name: </b> <input type="text" size="20" name="fname" >
</p>
<p><b>Address: </b> <input type="text" size="10" name="address" >
</p>
<p><b>Work-Phone: </b> <input type="text" size="10" name="work" >
</p>
<p><b>Home-Phone: </b> <input type="text" size="10" name="home" >
</p>
<p><input type="button" value="Submit" onclick="cards.push(new Card(fname.value,address.value,work.value,home.value));">
<input type="reset" value="Reset">
<input type="button" value="Display" onclick="display(cards);"></p>
</form>

</body>
</html>

Was This Post Helpful? 0

#10 Dormilich

痛覚残留

Reputation: 2888

Posts: 7,533
Joined: 08-June 10

Re: how do i display data got from a form in a dynamically created div?

Posted 12 July 2011 - 07:58 AM

strawhat89, on 12 July 2011 - 09:45 AM, said:

I am doing an internship in a company and they have asked me to improve my javascript skills..

then you should strive to avoid any unnecessary globals (like the i counter variable)

Was This Post Helpful? 0

#11 strawhat89

The Watcher Outside Your Window

Reputation: 247

Posts: 1,784
Joined: 11-July 11

Re: how do i display data got from a form in a dynamically created div?

Posted 12 July 2011 - 10:44 PM

Dormilich, on 12 July 2011 - 07:58 AM, said:

strawhat89, on 12 July 2011 - 09:45 AM, said:

I am doing an internship in a company and they have asked me to improve my javascript skills..

then you should strive to avoid any unnecessary globals (like the i counter variable)

Ok I am stumped. How else do I keep track of which object I am on?

Was This Post Helpful? 0

#12 Dormilich

痛覚残留

Reputation: 2888

Posts: 7,533
Joined: 08-June 10

Re: how do i display data got from a form in a dynamically created div?

Posted 13 July 2011 - 01:24 AM

you could use an object.

you could even go as far as using an Iterator, but they’re not supported in every browser.

// some very basic storage object
var stack = {
    i : 0,
    data : [],
    //# I don’t use next/prev, as they are not intended to cycle through an array 
    //# i.e. there will be no prev if you’re at position 0
    forward :  function() { 
        stack.isEmpty();
        stack.i = (stack.i + 1) % stack.data.length;
    },
    backward : function() {
        stack.isEmpty();
        stack.i = (stack.i + stack.data.length - 1) % stack.data.length;
    },
    current : function() {
        stack.isEmpty();
        return stack.data[stack.i];
    },
    isEmpty : function() {
        if (!stack.data.length) {
            throw new Error("stack is empty");
        }
    }
}

This post has been edited by Dormilich: 13 July 2011 - 01:28 AM

Was This Post Helpful? 1

#13 strawhat89

The Watcher Outside Your Window

Reputation: 247

Posts: 1,784
Joined: 11-July 11

Re: how do i display data got from a form in a dynamically created div?

Posted 13 July 2011 - 01:45 AM

So the

  data : []

is where I store the card objects ?

Well back to my original question, I finally managed the diagonal dynamical divs..

<html>
<head>
<title> Card Stacking </title>
<script>
var cards = new Array();

function Card(name,address,work,home) {
   this.name = name;
   this.address = address;
   this.workphone = work;
   this.homephone = home;
	
}

function next(cards)
{	
var child = document.body.childNodes;
var divs = new Array;
var k=0;
child[child.length-1].style.zindex=0;
for(i=2;i<(child.length)-1;i++)
{	
	
	
	child[i].style.zindex += 1;
	k++;
	divs[k] = child[i];
}
divs[0]=child[(child.length)-1];
for (j in divs)
	document.body.appendChild(divs[j]);	
	
}

function display(cards)
{
	document.getElementById("p1").style.visibility = "visible";
	for (j in cards)
	{
	var dv = document.createElement('div');	
	id = "card" + j;
	dv.setAttribute('id',id);       
	dv.style.position = "absolute";
	dv.style.left = (600+j*15);
	dv.style.top = (100+j*20);
	dv.style.zindex = j;
	dv.innerHTML = "<table border=2><tr><th style='background-color:blue; color:white;'>Business Card of "+ cards[j].name +
		       "<\/th><\/tr>" +  "<tr><td rowspan='4' style='background-color:purple; color:white;'><b>Name: <\/b>"+cards[j].name+"<br><b>Address: <\/b>"+cards[j].address+"<br><b>Work-Phone: <\/b>"+cards[j].workphone+"<br><b>Home-Phone: <\/b>"+cards[j].homephone+"<br><\/td><\/tr>"; 
	document.body.appendChild(dv);
	}
}


</script>
</head>
<body>
<p id="p1" align=center style="visibility:hidden;"><input type="button" onclick="next(cards);" value="Next">

</p>
<form name="form1">
<p id="p1"><b>Name: </b> <input type="text" size="20" name="fname" >
</p>
<p><b>Address: </b> <input type="text" size="10" name="address" >
</p>
<p><b>Work-Phone: </b> <input type="text" size="10" name="work" >
</p>
<p><b>Home-Phone: </b> <input type="text" size="10" name="home" >
</p>
<p><input type="button" value="Submit" onclick="cards.push(new Card(fname.value,address.value,work.value,home.value));">
<input type="reset" value="Reset">
<input type="button" value="Display" onclick="display(cards);"></p>
</form>

</body>
</html>

Pressing next does bring the next object in the stack to the front, but it would be nice if it assumed the original top objects place... Any ideas how to change the left and top attributes ?

Was This Post Helpful? 0

#14 Dormilich

痛覚残留

Reputation: 2888

Posts: 7,533
Joined: 08-June 10

Re: how do i display data got from a form in a dynamically created div?

Posted 13 July 2011 - 02:07 AM

you would have to manually switch them. and that’s one reason I’m against this display approach, if you only have one card to show, such problems don’t arise.

Was This Post Helpful? 0

#15 strawhat89

The Watcher Outside Your Window

Reputation: 247

Posts: 1,784
Joined: 11-July 11

Re: how do i display data got from a form in a dynamically created div?

Posted 13 July 2011 - 02:18 AM

So there's no other way than manually switching them ? I tried changing the left and top values with an expression just like I did when I created them, but it didn't work. In fact it stopped the next function from working.
The expressions I used were

child[i].style.left -= (cards.length-1-k)*15;
child[i].style.top -= (cards.length-1-k)*20;

I put these in the first for loop in the next() function.

I know if there's only one output card its easier. But I feel the diagonal ones look like the cascading windows you get when you press Alt + Tab in Vista and Win 7... With a cool theme, it could look great...

Was This Post Helpful? 0

(2 Pages)
1
2
→

20 Replies - 2679 Views - Last Post: 13 July 2011 - 11:27 PM

how do i display data got from a form in a dynamically created div?

Replies To: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Re: how do i display data got from a form in a dynamically created div?

Follow & Share

Give It A Try!

Programming

Web Development

Reference Sheets

Bye Bye Ads

Monthly Drawing