www.webdeveloper.com
Results 1 to 8 of 8

Thread: Problem Adding Elements to A Form

  1. #1
    Join Date
    Jun 2013
    Posts
    2

    Problem Adding Elements to A Form

    Hello. I am trying to add new fields to an html form when a user clicks a button and so far it isn't working. I have checked and rechecked the code and it all appears correct but it still isn't working. Any insight would be greatly appreciated.

    Here is the Javascript:
    Code:
    function addInfo() {
    
    	var para=document.createElement("p");
    
    	var input_email=document.createElement("input");
    	input_email.setAttribute("type", "text");
    	input_email.setAttribute("name", "email1");
    	input_email.setAttribute("size", "10");
    	para.appendChild(input_email);
    
    	var input_phone=document.createElement("input");
    	input_phone.setAttribute("type", "text");
    	input_phone.setAttribute("name", "phone1");
    	input_phone.setAttribute("size", "10");
    	para.appendChild(input_phone);
    
    	var select_service=document.createElement("select");
    	select_service.setAttribute("name", "service1");
    	
    	var option_att=document.createElement("option");
    	var option_metropcs=document.createElement("option");
    	var option_tmobile=document.createElement("option");
    	var option_verizon=document.createElement("option");
    	
    	option_att.setAttribute("value", "att");
    	option_metropcs.setAttribute("value", "metropcs");
    	option_tmobile.setAttribute("value", "tmobile");
    	option_verizon.setAttribute("value", "verizon");
    	
    	option_att_text=document.createTextNode("ATT");
    	option_metropcs_text=document.createTextNode("Metro PCS");
    	option_tmobile_text=document.createTextNode("T Mobile");
    	option_verizon_text=document.createTextNode("Verizon");
    	
    	option_att.appendChild(option_att_text);
    	option_metropcs.appendChild(option_metropcs_text);
    	option_tmobile.appendChild(option_tmobile_text);
    	option_verizon.appendChild(option_verizon_text);
    	
    	select_service.appendChild(option_att);
    	select_service.appendChild(metropcs);
    	select_service.appendChild(tmobile);
    	select_service.appendChild(verizon);
    	para.appendChild(select_service);
    
    	var element=element.getElementById("msg");
    	element.appendChild(para);
    
    }
    The HTML head:
    HTML Code:
     <head>
      <title>Calendar Admin</title>
      <link rel="stylesheet" title="Default" type="text/css" href="style.css" />
      <script type="text/javascript" src="icode.js"></script>
      <script src="e_edit.js" type="text/javascript"></script>
      <script src="add_info.js" type="text/javascript"></script>
     </head>
    And the form in question:
    HTML Code:
      <div class="paneltwo">
    	<form id="msg">
    		<p>
    			<input type="checkbox" name="sendmessage" value="dont_send" />Don't Send Messages<br />
    			Send messages to:
    			<select name="sendto">
    				<option value="everyone">Everyone</option>
    				<option value="staff">Staff Only</option>
    			</select><br />
    		</p>
    		<p>
    			<input type="text" name="email" size="10" />
    			<input type="text" name="phone" size="10" />
    			<select name="service">
    				<option value="att">ATT</option>
    				<option value="metropcs">Metro PCS</option>
    				<option value="tmobile">T Mobile</option>
    				<option value="verizon">Verizon</option>
    			</select>
    		</p>
    	</form>
    	<input type="button" value="Add" onclick="javascript:addInfo();" />
      </div>
    Thank you.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,144
    Try:
    Code:
    	var element=document.getElementById("msg");
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    short version
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Calendar Admin</title>
    <script type="text/javascript">
    function op(opts,value,text){
    var o=document.createElement('option');o.value=value;o.text=text;opts.add(o,null);
    }
    function addInfo(){
    var q=document.getElementsByTagName('select').length-1,
    para=document.createElement("p");
    document.getElementById("msg").appendChild(para);
    var email=document.createElement("input");email.type="text";email.name="email"+q;email.size="10";para.appendChild(email),
    phone=document.createElement("input");phone.type="text";phone.name="phone"+q;phone.size="10";para.appendChild(phone),
    ss=document.createElement("select");ss.name="service"+q;para.appendChild(ss);
    op(ss.options,'att','ATT');
    op(ss.options,'metropcs','Metro PCS');
    op(ss.options,'tmobile','T Mobile');
    op(ss.options,'verizon','Verizon');
    }
    </script>
    </head>
    <body>
    <div class="paneltwo">
    	<form id="msg">
    		<p>
    			<input type="checkbox" name="sendmessage" value="dont_send" />Don't Send Messages<br />
    			Send messages to:
    			<select name="sendto">
    				<option value="everyone">Everyone</option>
    				<option value="staff">Staff Only</option>
    			</select><br />
    		</p>
    		<p>
    			<input type="text" name="email" size="10" />
    			<input type="text" name="phone" size="10" />
    			<select name="service">
    				<option value="att">ATT</option>
    				<option value="metropcs">Metro PCS</option>
    				<option value="tmobile">T Mobile</option>
    				<option value="verizon">Verizon</option>
    			</select>
    		</p>
    	</form>
    	<input type="button" value="Add" onclick="javascript:addInfo();" />
      </div>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    Jun 2013
    Posts
    2
    So I got the code to work but I forgot to add my checkbox in there and after I added it the other fields still work and are added but the checkbox is not. Here is updated code:
    Code:
    var counter = 1;
    
    function addInfo() {
    
    	counter++;
    	
    	var name_email = "email" + counter;
    	var name_phone = "phone" + counter;
    	var name_service = "service" + counter;
    	var name_staff = "staff" + counter;
    
    	var para=document.createElement("p");
    	para.setAttribute("id", "contact" + counter)
    	var element=document.getElementById("msg");
    	
    	var input_email=document.createElement("input");
    	input_email.setAttribute("type", "text");
    	input_email.setAttribute("name", name_email);
    	input_email.setAttribute("size", "10");
    	para.appendChild(input_email);
    
    	var input_phone=document.createElement("input");
    	input_phone.setAttribute("type", "text");
    	input_phone.setAttribute("name", name_phone);
    	input_phone.setAttribute("size", "10");
    	para.appendChild(input_phone);
    	
    	var input_staff=document.createElement("input");
    	input_staff.setAttribute("type", "checkbox");
    	input_staff.setAttribute("name", name_staff);
    	input_staff.setAttribute("value", "staff");
    	para.appendChild(input_staff);
    
    	var select_service=document.createElement("select");
    	select_service.setAttribute("name", name_service);
        select_service.options[0]=new Option('ATT','att')
        select_service.options[1]=new Option('Metro PCS','metropcs')
        select_service.options[2]=new Option('T Mobile','tmobile')
        select_service.options[3]=new Option('Verizon','verizon')
    	para.appendChild(select_service);
    
    	element.appendChild(para);
    	
    	var numContacts = document.getElementById("num_contacts");
    	numContacts.setAttribute("value", counter);
    
    }

  5. #5
    Join Date
    Jul 2013
    Posts
    3

    Please help friends

    Quote Originally Posted by discourse_insta View Post
    So I got the code to work but I forgot to add my checkbox in there and after I added it the other fields still work and are added but the checkbox is not. Here is updated code:
    Code:
    var counter = 1;
    
    function addInfo() {
    
    	counter++;
    	
    	var name_email = "email" + counter;
    	var name_phone = "phone" + counter;
    	var name_service = "service" + counter;
    	var name_staff = "staff" + counter;
    
    	var para=document.createElement("p");
    	para.setAttribute("id", "contact" + counter)
    	var element=document.getElementById("msg");
    	
    	var input_email=document.createElement("input");
    	input_email.setAttribute("type", "text");
    	input_email.setAttribute("name", name_email);
    	input_email.setAttribute("size", "10");
    	para.appendChild(input_email);
    
    	var input_phone=document.createElement("input");
    	input_phone.setAttribute("type", "text");
    	input_phone.setAttribute("name", name_phone);
    	input_phone.setAttribute("size", "10");
    	para.appendChild(input_phone);
    	
    	var input_staff=document.createElement("input");
    	input_staff.setAttribute("type", "checkbox");
    	input_staff.setAttribute("name", name_staff);
    	input_staff.setAttribute("value", "staff");
    	para.appendChild(input_staff);
    
    	var select_service=document.createElement("select");
    	select_service.setAttribute("name", name_service);
        select_service.options[0]=new Option('ATT','att')
        select_service.options[1]=new Option('Metro PCS','metropcs')
        select_service.options[2]=new Option('T Mobile','tmobile')
        select_service.options[3]=new Option('Verizon','verizon')
    	para.appendChild(select_service);
    
    	element.appendChild(para);
    	
    	var numContacts = document.getElementById("num_contacts");
    	numContacts.setAttribute("value", counter);
    
    }



    ----------------------------------------------------------------------------

    Where there is the process of adding the code. However, no deletion. How does the delete operation. Please help.

  6. #6
    Join Date
    Jul 2013
    Posts
    3
    Where there is the process of adding the code. However, no deletion. How does the delete operation. Please help.

  7. #7
    Join Date
    Jul 2013
    Posts
    3
    hey friends, please help.

  8. #8
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles