SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: createElement

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    createElement

    Ok, I have two functions, both add (or are suppossed to add) form fields when called.

    The second function does not seem to work. any ideas???

    function add_course(){

    var Course=document.createElement('input');
    Course.type='text';
    Course.name='Course';

    var newOption0=document.createElement('option');
    newOption0.value='Course 1';
    newOption0.innerHTML='Course 1';
    var newOption1=document.createElement('option');
    newOption1.value='Course 2';
    newOption1.innerHTML='Course 2';
    var newOption2=document.createElement('option');
    newOption2.value='Course 3';
    newOption2.innerHTML='Course 3';
    var newSelect=document.createElement('select');

    newSelect.name='myselect';
    newSelect.appendChild(newOption0);
    newSelect.appendChild(newOption1);
    newSelect.appendChild(newOption2);

    document.forms.Registration.appendChild(Course);
    document.forms.Registration.appendChild(newSelect);
    }

    function add_students(){

    var Student=document.createElement('input');
    Student.type='text';
    Student.name='Student';
    document.forms.Registration.appendChild(Student);
    }

  2. #2
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The addition of options in a select control must be done by using the Option object.

    So, instead of this
    Code:
    var newOption0=document.createElement('option');
    newOption0.value='Course 1';
    newOption0.innerHTML='Course 1';
    
    var newOption1=document.createElement('option');
    newOption1.value='Course 2';
    newOption1.innerHTML='Course 2';
    
    ...
    
    newSelect.appendChild(newOption0);
    newSelect.appendChild(newOption1);
    rewrite it to
    Code:
    newSelect.options[newSelect.options.length] = new Option('Course 1', 'value_course_1');
    
    newSelect.options[newSelect.options.length] = new Option('Course 2', 'value_course_2');
    Also, its better to use an array style for pointing to forms. For example instead of
    Code:
    document.forms.Registration.appendChild(Course);
    prefer this way
    Code:
    document.forms['Registration'].appendChild(Course);

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you. how come the second function wont work?

  4. #4
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is better to show your HTML code where you have called those both of the functions. It would be easier if you paste that code here. Since your code seems to be fine so maybe there is problem on calling too.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the first function:
    <input name="add_course" type="button" class="submit" onClick="add_course()" value="Add More Courses">

    for the second function:
    <input name="add_students" type="button" class="submit" onClick="add_students()" value="Add More Students">

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i got the function working. Is there a way to print out a label that goes in front of the select box?


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
  •