Dynamic Input form

el_dorito

03-01-2005, 11:12 AM

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, 12: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, 03: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, 02: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, 03:10 PM

You are to kin :thumbsup: :D

You just earned your heaven :)