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

  • (2 Pages)
  • +
  • 1
  • 2

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

#1 strawhat89  Icon User is offline

  • The Watcher Outside Your Window


Reputation: 247
  • View blog
  • Posts: 1,795
  • 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  Icon User is online

  • Dreaming Coder
  • member icon

Reputation: 5825
  • View blog
  • Posts: 12,677
  • 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  Icon User is offline

  • The Watcher Outside Your Window


Reputation: 247
  • View blog
  • Posts: 1,795
  • 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  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,227
  • 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. youd just fill the output div with the information of the top card.

second some notes on the code:
- you dont need to escape forward slashes (/)
- there is no need for inline Javascript
- a forin 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  Icon User is offline

  • The Watcher Outside Your Window


Reputation: 247
  • View blog
  • Posts: 1,795
  • 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  Icon User is offline

  • The Watcher Outside Your Window


Reputation: 247
  • View blog
  • Posts: 1,795
  • 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  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,227
  • 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

Id avoid a diagonal arrangement. Id 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  Icon User is offline

  • The Watcher Outside Your Window


Reputation: 247
  • View blog
  • Posts: 1,795
  • 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  Icon User is offline

  • The Watcher Outside Your Window


Reputation: 247
  • View blog
  • Posts: 1,795
  • 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  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,227
  • 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

View Poststrawhat89, 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  Icon User is offline

  • The Watcher Outside Your Window


Reputation: 247
  • View blog
  • Posts: 1,795
  • 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

View PostDormilich, on 12 July 2011 - 07:58 AM, said:

View Poststrawhat89, 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  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,227
  • 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  Icon User is offline

  • The Watcher Outside Your Window


Reputation: 247
  • View blog
  • Posts: 1,795
  • 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  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,227
  • 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 thats one reason Im against this display approach, if you only have one card to show, such problems dont arise.
Was This Post Helpful? 0
  • +
  • -

#15 strawhat89  Icon User is offline

  • The Watcher Outside Your Window


Reputation: 247
  • View blog
  • Posts: 1,795
  • 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