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,252
    Try:
    Code:
    	var element=document.getElementById("msg");
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,716
    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>
    signature under construction

  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,290

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.12565 seconds
  • Memory Usage 2,943KB
  • Queries Executed 15 (?)
More Information
Template Usage (35):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (5)bbcode_code
  • (2)bbcode_html
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (8)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (8)postbit
  • (8)postbit_onlinestatus
  • (8)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates