SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

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

    insertBefore(); help

    OK, the script creates new input box onclick. How can I get it to show up above the button? I am confused on insertBefore();

    <div id="newcourses" style="text-align:left;">
    <input name="add_students" type="button" class="submit" onClick="add_student()" value="Add More Students"></div>


    function add_student(){

    //// Create Line breaks ////
    var linebreak=document.createElement("p");
    var linebreak0=document.createElement("p");

    //// Create text ////
    var header = document.createTextNode("Student Information");
    var firstname_text = document.createTextNode("First Name: ");

    //// Create input boxes ////
    var StudentFirstname=document.createElement('input') ;
    StudentFirstname.type='text';
    StudentFirstname.size='45';
    StudentFirstname.name='Student2_Firstname';

    //// Append ////
    document.forms.Registration.appendChild(header);
    document.forms.Registration.appendChild(linebreak0 );
    document.forms.Registration.appendChild(firstname_text);
    document.forms.Registration.appendChild(StudentFir stname);
    }

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Holy crap. You're creating linebreaks by creating <p> elements? You should be putting the text INSIDE the <p> elements, not in between them! Append the textnodes to the paragraphs!

    As for insertBefore, say you want to insert StudentFirstName before the button:

    Code:
    document.forms.Registration.insertBefore(StudentFirstName, this);
    this points to the element the event occured on, i.e. the button.

    Have a look at the spec: http://developer.mozilla.org/en/docs...t.insertBefore

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, it still prints out at the bottom on the form, not above the button.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I made a mistake. Call the function like this:
    Code:
    onclick="add_student(this)"
    Use insertBefore like this:
    Code:
    function add_student(where) {
      ...
    where.parentNode.insertBefore(StudentFirstName, where);
    Also, I hope you're not ignoring what I said about not using <p> simply for line breaks.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I append to wrap around both the label and the text box?

    It just seems to be putting in the <p></p> still:

    Code JavaScript:
    p.appendChild(firstname_text);
    document.forms.Registration.appendChild(p);
    label.appendChild(firstname_text);
    document.forms.Registration.appendChild(label);
    document.forms.Registration.appendChild(StudentFirstname);

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    How am I supposed to know what label is? Post more complete code, including use of insertBefore. In any case, you're doing something wrong because you're appending the same text node (firstname_text) to two different elements.


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
  •