Fields not retaining the values

#1
kikloo

Posted 24 January 2011 - 05:49 AM

Newbie

Members
3 posts

Hello,

I made the following code using one of the threads here and it works good. But the only issue is that when the + button is press, all the fields loose their values. How to retain the values while adding the new field ?

<html>

<head>

<title></title>

<script language="javascript">

fil_fields = 0;

function addFile() 

{

	if (fil_fields != 4) 

	{

		document.getElementById('files').innerHTML += "<input type='file' name='ulfile[]' /><br />";

		fil_fields += 1;

	} 

	else 

	{

		alert ("Only 5 files are allowed.");

		document.form.addfi.disabled=true;

	}

}


eml_fields = 0;

function addEmail() 

{

	if (eml_fields != 19) 

	{

		document.getElementById('emails').innerHTML += "<input type='text' size='30' name='email[]' /><br />";

		eml_fields += 1;

	} 

	else 

	{

		alert ("Only 20 emails are allowed.");

		document.form.addem.disabled=true;

	}

}

</script>


	<style>

	body,p,td,input,file { font-family: Verdna,Arial,Tahoma; font-size: 12px; }

	</style>

</head>

<body>


<form name="form" action="upload.php" method="post" onsubmit="check();">


<table border="0" align="center" cellpadding="7" cellspacing="0">

<tr>

	<td valign="top" align="left">

	<table border="1" cellpadding="5" cellspacing="0" align="center" style="border-collapse: collapse;" width="100%">

		<tr>

			<th style="background-color:#000; color:#fff;">Select File(s):</th>

		</tr>

		<tr>

			<td><div id="files">

			<input type='file' value='' name='ulfile[]' /> <input type="button" onclick="addFile()" name="addfi" value="+" /><br />

			</div></td>

		</tr>

	</table>

	<br />

	<table border="1" cellpadding="5" cellspacing="0" align="center" style="border-collapse: collapse;" width="100%">

		<tr>

			<th style="background-color:#000; color:#fff;">Your Message:</th>

		</tr>

		<tr>

			<td><textarea name="message" style="width:100%;" rows="3"></textarea></td>

		</tr>

	</table>

	</td>

	<td valign="top">

	<table border="1" cellpadding="5" cellspacing="0" align="center" style="border-collapse: collapse;">

		<tr>

			<th style="background-color:#000; color:#fff;">Specify E-Mail Address(es):</th>

		</tr>

		<tr>

			<td><div id="emails">

			<input type='text' value='' size='30' name='email[]' /> <input type="button" onclick="addEmail()" name="addem" value="+" /><br />

			</div></td>

		</tr>

	</table>

	</td>

</tr>

</table>


<p align="center"><input type="submit" name="btnUpload" value="Click to Begin Uploading" onclick="javascript:check();" /></p>

</form>

</body>

</html>

Please help me to fix it.

Thanks.

#2
solartic

Posted 24 January 2011 - 08:34 PM

Learning Programmer

Members
95 posts

I would strongly suggest that you use a javascript library/framework such prototype or jquery for this, but never the less this might help you.

function addEmail() 
{
    if (eml_fields != 19) 
    {
                var div = document.createElement("div");
                
                div.innerHTML = "<input type='text' size='30' name='email[]' /><br />";

                var input = div.childNodes.item(0);
                var br = div.childNodes.item(1);

                document.getElementById('emails').appendChild(input);
                document.getElementById('emails').appendChild(br);
                eml_fields += 1;
    } 
    else 
    {
        alert ("Only 20 emails are allowed.");
        document.form.addem.disabled=true;
    }
}

#3
kikloo

Posted 25 January 2011 - 01:32 AM

Newbie

Members
3 posts

solartic said:

I would strongly suggest that you use a javascript library/framework such prototype or jquery for this, but never the less this might help you.


function addEmail() 

{

    if (eml_fields != 19) 

    {

                var div = document.createElement("div");

                

                div.innerHTML = "<input type='text' size='30' name='email[]' /><br />";


                var input = div.childNodes.item(0);

                var br = div.childNodes.item(1);


                document.getElementById('emails').appendChild(input);

                document.getElementById('emails').appendChild(br);

                eml_fields += 1;

    } 

    else 

    {

        alert ("Only 20 emails are allowed.");

        document.form.addem.disabled=true;

    }

}

Hi,

Thanks. Its working great.

Thanks.