Adding New Field Problem

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[]' />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "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>


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

rakwel10

Junior Poster in Training

68 posts since Oct 2009

Reputation Points: 10

Solved Threads: 0

8 Months Ago

Hiii , I solved it by using array ....check it:

<html><head><title></title><script language="javascript">fields = 0;function addInput() {if (fields != 10) {document.getElementById('text').innerHTML += "<input type='text' value='' name='field[]' />";fields += 1;} else {document.getElementById('text').innerHTML += "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> <input type="submit" value="Submit" /></form></body></html><html>
<head>
<title></title>
<script language="javascript">
fields = 0;

function addInput() {
if (fields != 10) {
	var images = new Array();
	for(i=0;i<fields;i++)
	images[i]=document.getElementById("field"+i+"").value;
document.getElementById('text').innerHTML="";
for(i=0;i<fields;i++)
document.getElementById('text').innerHTML += "<input type='text' value='"+images[i]+"' name='field"+i+"'  id='field"+i+"'/>";
document.getElementById('text').innerHTML += "<input type='text' value='' name='field"+fields+"'  id='field"+fields+"'/>";
fields += 1;
} else {
document.getElementById('text').innerHTML += "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>


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

%^^%Murtada%^^%

Morta

Newbie Poster

19 posts since Sep 2011

Reputation Points: 11

Solved Threads: 3

8 Months Ago

Hi! thanks for the reply.

I have a question.
I see that you modified also the 'name' of the input field. Before the name has an array value where all the data entry of the input field will be saved.
I'm not familiar with this method: "name='field"+i+"' "
Can this still save like an array?

Pls help me. My JavaScript knowledge is only a spoonful.
Thankyou : )

rakwel10

Junior Poster in Training

68 posts since Oct 2009

Reputation Points: 10

Solved Threads: 0

8 Months Ago

no i dont modified the name of input, it but it's the same,i used new variable (i), its values are the same values of variable (fields),this code:

for(i=0;i<fields;i++)
document.getElementById('text').innerHTML += "<input type='text' value='"+images[i]+"' name='field"+i+"'  id='field"+<strong>i</strong>+"'/>";

is to recreate the old inputs with their values.and the output of it is like that if fields =2:

%^^%Murtada...%^^%

Morta

Newbie Poster

19 posts since Sep 2011

Reputation Points: 11

Solved Threads: 3

8 Months Ago

no i dont modified the name of input, it but it's the same,i used new variable (i), its values are the same values of variable (fields),this code:

for(i=0;i<fields;i++)
document.getElementById('text').innerHTML += "<input type='text' value='"+images[i]+"' name='field"+i+"'  id='field"+<strong>i</strong>+"'/>";

is to recreate the old inputs with their values.and the output of it is like that if fields =2:

%^^%Murtada...%^^%

Morta

Newbie Poster

19 posts since Sep 2011

Reputation Points: 11

Solved Threads: 3

This article has been dead for over three months

You