...

View Full Version : Dynamic Input form



el_dorito
03-01-2005, 12:12 PM
Hi,

I'm trying to make an dynamic input form.

This is the idea.

When the user enters the form there are two form elements present
(1 text input and one teaxtarea).
Below these is a button saying "add more".
Each time the user prese's this button there are two form elements (like those before)
that will be created (whitout refresh).
The user can generate as mutch as he wants.

Till this par al works fine.
I have the following code:

<script type="text/javascript">
var i=2
function CreateFields() {
document.getElementById("my_div").innerhtml=document.getElementById("my_div") .innerHTML+ '<span class="left" style="width:175px"><label for="option_name'+ i +'">'+ i +' ) Optie naam:</label><br><input type="text" name="option_name'+ i +'" id="option_name'+ i +'" size="20" maxlength="20" /></span><span class="right" style="width:315px" ><label for="option_description'+ i +'">Optie beschrijving</label><br><textarea cols="35" rows="10" name="option_description'+ i +'"></textarea></span><div style="clear:both;width:500px;height:2px"></div>';
i=i+1
}
</script>

This function is called each time the button is pressed.

The Problem:

If the user enters values in the text input an textarea and presses the button to create two more fields
The enterd values (of the previous fields) are DELETED!!. Not something that you want to happen.
What can I do to preven this?

Thanks for the help

ErroneousBee
03-03-2005, 01:13 PM
I think you need to look at using document.createElement() to create the new nodes, and to use
E.g.
var span= document.createElement('span');
span.className = 'inputrow';
var el = document.createElement('input');
el.type='text';
el.value='yadda';
span.appendChild(el)
var div = document.getElementById('my_div');
div.appendChild(span);

el_dorito
03-03-2005, 04:39 PM
Thank you so mutch for taking the time to reply :D :thumbsup:

I got the main thing working now. I only don't know how to create a
textarea widh 15 rows an 20 cols.
I tried document.createElement('textarea'), but thats not the way to do it I guess.

Regards
Geert

ErroneousBee
03-04-2005, 03:17 PM
I got the main thing working now. I only don't know how to create a
textarea widh 15 rows an 20 cols.
I tried document.createElement('textarea'), but thats not the way to do it I guess.


Heres a working demo


<html><head>
<script language="JavaScript">
function addTextArea() {
// Create the bit of teh DOM tree that we will be inserting into the webpage
var frag = document.createDocumentFragment();
var el = document.createElement('textarea');
el.cols='20';
el.rows='14';
el.value='More cheese Grommit?';
el.onkeyup = function(event) {checkTextInput(event,this)}
el.className='textarea'; // You need a CSS entry to go with this!!!
frag.appendChild(el);

// Now stitch this textarea into the document
var div = document.getElementById('my_div');
div.appendChild(frag);
}

// this is the function that reponds to key presses in the textarea
function checkTextInput(e,el) {
alert('Key:'+e.keyCode+' pressed in '+el.tagName);
alert('Current value'+el.value);
alert('Help! I\'m being held prisoner, they wont let me out.');
alert('I think they are trying to steal my shoes. Help!!');
return false;
}
</script>
</head>
<body>
<p onclick="addTextArea()">click me to add a text area </p>
<div id="my_div">
</div>
<p>Welcome to the bottom of the page</p>
</body>
</html>

el_dorito
03-04-2005, 04:10 PM
You are to kin :thumbsup: :D

You just earned your heaven :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum