Hello,

I have got this code, which adds or removes Text Box on button click. When I click "Add Option" it adds a new Text Box, but a text which was for example in first Text Box will vanish. How can i prevent it?

Code:
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <script type="text/javascript">
        	// Number of option fields
var num_options = 2;

// (Re)loads option fields
function load_option_fields()
{
	var output = '';

	for (var i=1; i<=num_options; i++)
	{
		output += '<p>'+i+'. <input name="option_'+i+'" type="text" size="40" /></p>';
	}
	
	output += '<input type="hidden" name="num_options" value="'+num_options+'">';
	
	document.getElementById('option_fields').innerHTML = output;
}

// Adds option field
function add_option_field()
{
	num_options++;
	load_option_fields();
}

// Removes option field
function remove_option_field()
{
	if (num_options != 2) 
	{
		num_options--;
	}
	
	load_option_fields();
}
        </script>
    </head>
    <body>
        <form method="post" action="actions.php">
            <p>
                <label for="title">
                    Title:
                </label>
            </p>
            <p>
                <input type="text" name="title" size="30" id="title" />
            </p>
            <p>
                <label for="option_fields">
                    Options:
                </label>
            </p>
            <p>
                <div id="option_fields">
                </div>
            </p>
            <p>
                <input id="button_add_option" type="button" value="Add Option" onclick="add_option_field();"/><input id="button_remove_option" type="button" value="Remove Option" onclick="remove_option_field();"/>
            </p>
            <script type="text/javascript">
            	load_option_fields();
                remove_option_field();
            </script>
            <p>
                <label for="description">
                    Description:
                </label>
            </p>
            <p>
                <textarea cols="60" rows="5" id="description" name="description">
                </textarea>
            </p>
            <p>
                <input type="hidden" name="plan_num" value="1" /><input type="hidden" name="action" value="create_poll" /><input type="submit" name="submit" value="Submit" /><input type="button" name="cancel" onclick="window.history.back()" value="Cancel" />
            </p>
        </form>
    </body>
</html>
Thank you very much.