Member Avatar for rakwel10

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>
  • 2 Contributors
  • 4 Replies
  • 147 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Morta

Recommended Answers

All 4 Replies

Member Avatar for Morta

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[]' /><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><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+"'/><br />";
document.getElementById('text').innerHTML += "<input type='text' value='' name='field"+fields+"'  id='field"+fields+"'/><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>

%^^%Murtada%^^%

Edited by Morta because: n/a
Member Avatar for rakwel10

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 : )

Member Avatar for Morta

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"+[B][U]i[/U][/B]+"'/><br />";

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

<input type='text' value=' ' name='field0' id='field"+i+"'/><br />
<input type='text' value=' ' name='field1' id='field"+i+"'/><br />

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

Member Avatar for Morta

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"+[B][U]i[/U][/B]+"'/><br />";

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

<input type='text' value=' ' name='field0' id='field"+i+"'/><br />
<input type='text' value=' ' name='field1' id='field"+i+"'/><br />

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.