rakwel10 0 Junior Poster in Training

Hi!
I have this code that adds field when the user hit the "add new field" button.
The problem here is, once you added an input field, then fill it out, then add a new field again, the info in the first field be erased.

As how the code runs, you have to add all the fields that you want to fillout FIRST before entering you data in those fields. I believe its not logical to do that.
So pls help me to modify this script.

thanks!

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<input type='text' value='' name='field[]' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form" action="form.php" method="post">
<input type="button" onclick="addInput()" name="add" value="Add input field" />

<div id="text">

</div>

<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>