0

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
5
Views
6 Years
Discussion Span
Last Post by Morta
0

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: n/a

0

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

0

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...%^^%

0

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...%^^%

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.