SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Add or removion text box on button click

    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.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    I have found this code:

    Code:
    <html>
    <head>
    <title>Page Title</title>
    <script type="text/javascript">
    var i = 0;
    function addInput(){
        if (i >= 10)
            return;
        var a = document.createElement('input');
        a.type='text';
        var inputs = document.getElementById('inputs');
        inputs.appendChild(document.createElement('br'));
        inputs.appendChild(a);
        i++;
    }
    </script>
    </head>
    <body>
    <span id="inputs"><input type="text" /></span><br />
    <button onclick="addInput();">Add text box</button>
    </body>
    </html>
    So it's solved now. Thanks anyway.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •