SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Simple question

  1. #1
    SitePoint Guru mmarif4u's Avatar
    Join Date
    Dec 2006
    Location
    /dev/swat
    Posts
    619
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple question

    hi guys this is a simple question but out of mind this time...
    i have a dropdown on my one page it have 6 choices for example(1,2,3,4,5,6)
    when a user select 3, then 3 textboxes appaer where they fill it, if 2 then 2texbox and so on...
    i know that javascript can do it, but how bcoz i am not good in js.
    this is the dropdown button code.
    Code:
    <tr>
        <td align="right">
                <p>No. of cildren :</p>
            </td>
        <td align="left">
        <select class="textbox2" name="child">
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3" selected="selected">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6">6</option>
    	</select>
        <font color="black" size="3"><tt><b>*</b></tt></font>
        </td>
        </tr>
    Can any one point me some good stuff.
    Any help will be appreciated.
    Thanks.

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    // this goes in the head, make sure to give your SELECT an ID attribute...
    // also, make sure you have an target-element in your document with an id of "target"
    window.onload = function ()
    {
    	var theSelect = document.getElementById ('id-of-select');
    	theSelect.onchange = function ()
    	{
    		var no = this.value;
    		document.getElementById('target').innerHTML = '';
    		for (var i=0; i < no; i++)
    		{
    			var inp = document.createElement('input');
    			inp.type = 'text';
    			inp.name = 'child[]';
    			document.getElementById('target').appendChild(inp);
    		}
    	}
    }

  3. #3
    SitePoint Guru mmarif4u's Avatar
    Join Date
    Dec 2006
    Location
    /dev/swat
    Posts
    619
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for ur reply...

    I make this but its not working, are i have to put input textboxes in the form.
    This is the latest code:
    HTML Code:
    <script>
    // this goes in the head, make sure to give your SELECT an ID attribute...
    // also, make sure you have an target-element in your document with an id of "target"
    window.onload = function ()
    {
    	var theSelect = document.getElementById ('child');
    	theSelect.onchange = function ()
    	{
    		var no = this.value;
    		document.getElementById('child').innerHTML = '';
    		for (var i=0; i < no; i++)
    		{
    			var inp = document.createElement('input');
    			inp.type = 'text';
    			inp.name = 'child[]';
    			document.getElementById('child').appendChild(inp);
    		}
    	}
    }
    </script>

    Dropdown code:
    HTML Code:
    <tr>
        <td align="right">
                <p>No. of cildren :</p>
            </td>
        <td align="left" id="child">
        <select class="textbox2" name="child">
    	<option value="1" selected="selected">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6">6</option>
    	</select>
        <font color="black" size="3"><tt><b>*</b></tt></font>
        </td>
        </tr>
    How to configure it bcoz i have no idea about js.

    Thanks again.

  4. #4
    SitePoint Guru SSJ's Avatar
    Join Date
    Jan 2007
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this one:

    Code:
    <html>
    <head>
    <title>Dynamic Form</title>
    <script language="javascript">
    function changeIt(num)
    {
    	var i;
    	for(i=0;i<num;i++)
    	{
    		if(i==0){
    		my_div.innerHTML = "<br><input type='text' name='mytext'+ i>"
    		}
    		else{
    		my_div.innerHTML = my_div.innerHTML+"<br><input type='text' name='mytext'+ i>"
    		}
    		
    	}
    }
    </script>
    </head>
    <body>
    
    <form name="form" action="post" method="">
    <select name="select1" onChange="changeIt(this.options[this.selectedIndex].value);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select>
    </form>
    <div id="my_div"></div>
    </body>
    </html>

  5. #5
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mmarif4u View Post
    Thanks for ur reply...

    I make this but its not working, are i have to put input textboxes in the form.
    This is the latest code:
    HTML Code:
    <script>
    // this goes in the head, make sure to give your SELECT an ID attribute...
    // also, make sure you have an target-element in your document with an id of "target"
    window.onload = function ()
    {
    	var theSelect = document.getElementById ('child');
    	theSelect.onchange = function ()
    	{
    		var no = this.value;
    		document.getElementById('child').innerHTML = '';
    		for (var i=0; i < no; i++)
    		{
    			var inp = document.createElement('input');
    			inp.type = 'text';
    			inp.name = 'child[]';
    			document.getElementById('child').appendChild(inp);
    		}
    	}
    }
    </script>

    Dropdown code:
    HTML Code:
    <tr>
        <td align="right">
                <p>No. of cildren :</p>
            </td>
        <td align="left" id="child">
        <select class="textbox2" name="child">
    	<option value="1" selected="selected">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6">6</option>
    	</select>
        <font color="black" size="3"><tt><b>*</b></tt></font>
        </td>
        </tr>
    How to configure it bcoz i have no idea about js.

    Thanks again.
    You have to give your SELECT element an id. You still need the name-attribute, but getElementById targets an element by id:

    Code:
    <select class="textbox2" name="child" id="child">
    The second element I target with getElementById, e.g.:

    Code:
    document.getElementById('child').innerHTML = '';
    // and: 
    document.getElementById('child').appendChild(inp);
    ...is not the same element as the Select element. Change these to:

    Code:
    document.getElementById('target').innerHTML = '';
    // and: 
    document.getElementById('target').appendChild(inp);
    ...and add an element with the id "target" to your document. For instance...

    HTML Code:
    <fieldset id="target"></fieldset>
    ...will do the trick.

    Let me know how that turns out.


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
  •