Jump to content

dynamic field creation


Jocka

Recommended Posts

I'm working on a script that will let a user create up to 10 fields to put experience and years of experience in.

I ran into 2 problems with this.

1. I want to align the fields properly so it doesn't look generic. I tried using tables but the javascript wouldn't let me.
2. I need to keep information typed into any of the boxes.

here is my script:
[code]
<html>
<head>

<-script language="Javascript" type="text/javascript">
var tcount = 1;
var inhtml = '';
function tst(){
var info = document.getElementById('test');
if(tcount < 10){
if(tcount == 1){
inhtml = info.innerHTML
}
info.innerHTML += inhtml
tcount = tcount + 1
return true;
} else {
return false;
}
}

</script->

</head>
<body>

<form>
<table width="100%">
<tr>
<td width="50%"valign="top">
Experience Name | Years of Experience<br>
<div id="test" name="test">
<input type="text" name="exname" value="Experience Title.."> | <input type="text" name="exyears" value="0"><br>
</div>
</td>
<td width="50%" align="center" valign="top">
<input type="button" name="morefields" value="Add A Field" onClick="tst()">
</td>
</tr>
</table>
</form>


</body>
</html>
[/code]
and like I said, if they type something in then hit "add field" i want that information to still be there but it's not (and i'm not sure WHY it's not). And a way to align the fields, even if I have to use css (which i'm not 100% great with)
Link to comment
Share on other sites

I think I know the best way to do this but can't get it to work.

I'm trying to run through each field as an array and save the information to a var to be put back into the innerHTML correctly.Here's the javascript code I have (that ISN'T working)
[code]
var tcount = 1;
var inhtml = '';
var newinfo = '';
var nameinfo = '';
var yearsinfo = '';
var n
function tst(){
var info = document.getElementById('test');
nameinfo = '';
if(tcount < 10){
if(tcount == 1){
inhtml = info.innerHTML
}
for(n in document.tform.exname){
newinfo += "<input type=\"text\" name=\"exname[]\" value=\"" + document.tform.exname[n].value + "\"> | <input type=\"text\" name=\"exyears[]\" value=\"" + document.tform.exyears[n].value + "\"><br>"
}

info.innerHTML = newinfo + inhtml
tcount = tcount + 1
return true;
} else {
return false;
}
}
[/code]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.