SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Dynamic Form

  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic Form

    hi
    I want to create a dynamic form like this

    but I cant
    may you help me please
    I write this code but it works incorrect
    plz help me
    i spend 3 day time to solve this
    but i cant

    Code:
    var i ;
    i=1;
    function Form(formName)
    	{
    		var newform = document.createElement('form');
    		newform.innerHTML = "<br>Form " + (i + 1) + "<br>\
    		<span >\
    			<span>\
    				<input type='button' value='New Form' onClick=\"Form('Form')\" >"+" "+"\
    				<input type='button' value='New Row'onClick=\"Row('Row')\" >"+" "+"\
    				Input Text: <input type='text' name='firstname' />"+" "+"\
    				<select>\
    					<option></option>\
    					<option>One</option>\
    					<option>Two</option>\
    					<option>Three</option>\
    					<option>Four</option>\
    				</select>\
    			</span>\
    		</span>"
    		document.getElementById(formName).appendChild(newform);
    		i++;
    		newform.className= "form"+i;
    	}
    j=1;
    function Row(spanName)
    	{
    		var newspan = document.createElement('span');
    		newspan.innerHTML = "<br>Form "+ i +" Row " + (j + 1) + "<br>\
    		<span>\
    			<input type='button' value='New Form' onClick=\"Form('Form')\" >"+" "+"\
    			<input type='button' value='New Row' onClick=\"Row('Row')\" >"+" "+"\
    			Input Text: <input type='text' name='firstname' />"+" "+"\
    			<select>\
    				<option></option>\
    				<option>one</option>\
    				<option>two</option>\
    				<option>three</option>\
    				<option>four</option>\
    			</select>\
    		</span>";
    		document.getElementById(spanName).appendChild(newspan);
    		j++;
    		newspan.className="Row"+j;
    	}
    ------------------------------------------------------------------------
    HTML Code:
    <script src="javascript.js" language="Javascript" type="text/javascript"></script>
    <div id="Form">
    	<form class="form1"method="POST">
    		Form 1<br/>
    		<span id="Row">
    			<span>
    				<input type="button" value="New Form" onClick="Form('Form')"/>			
    				<input type="button" value="New Row"  onClick="Row('Row')"/>
    				Input Text: <input type="text" name="firstname" />
    				<select>
    					<option value=""></option>
    					<option>One</option>
    					<option>Two</option>
    					<option>Three</option>
    					<option>Four</option>
    				</select>
    			</span>
    		</span>
    	</form>
    </div>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by lordjohar View Post
    I want to create a dynamic form like this
    I don't understand from the image what you are trying to achieve.
    '
    Can you provide further details about what it is that you need help with?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want a form that when click on each button create new row
    if click on Square a new row separated
    if click on circle a new row that is child
    --------
    excuse me for my bad English


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
  •