SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to write a script that adds an extra field to a form when needed.

    I have been trying to write a script that allows a user to click on a button like a plus sign to add an additional field for a phone number when they have more than one phone number to enter. I have created a script that sort of does this. It doubles up what is already there, so, the first time, everything is fine, but after that I get a lot more fields than I want. I am a php programmer and not familiar enough with javascript to get to what I want. I would appreciate some help. My script is included below. What I am doing here is retrieving the html content and then adding it to what is already there. In php I would use an if conditional test to see if the data has been retrieved. The first time it would retrieve the data into a variable. After that it would not retrieve it. I think I am getting into some scope and sequence issues here. Javascript is a bit different than php in these regards. I would love some help working out my script. Also there is a commented line in the code that asks another question about the use of variables that I don't understand. I also tried using appendChild() here to no avail. I couldn't get that to work at all.

    Thanks -- Kenoli


    <html>
    <head>
    <script type="text/javascript">
    var x;
    function addPhone(){
    if (x = 'undefined') {
    var x = document.getElementById('phone').innerHTML;
    }
    document.getElementById('phone').innerHTML = x + "<br/>" + x;
    // x = x + "<br/>" + x; Why does this expression not work here? In my understanding, it should be the same as the previous line of code.
    }

    function initializePage() {

    var a = document.getElementById('add');
    a.onclick = addPhone;
    x = document.getElementById('phone').innerHTML;
    }

    window.onload = initializePage;

    </script>

    </head>
    <body>

    <form id="form1" id="form1" method="post">

    <span id="phone">Phone Type: <input name="phone_type[]" type="text" size="12" maxlength="12" />
    Phone Number: <input name="phone_number[]" type="text" size="12" maxlength="12" />
    </span> Add phone <span id="add" >+</span>

    </form>

    </body/>
    </html>

  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
    3 Thread(s)
    The script is adding the entire contents of the phone list, so the first time to will have 2, then 4, then 8, then 16, etc.

    Move the script to just before the </body> tag, and you won't need the undefined check )(which should be === undefined) anyway.

    Code html4strict:
    ...
    <script type="text/javascript" src="js/script.js"></script>
    </body>
    </html>

    The following adjustment to your code will now result in success

    Code javascript:
    var x = document.getElementById('phone').innerHTML;
    function addPhone(){
        document.getElementById('phone').innerHTML += "<br/>" + x;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant. Thanks. It works perfectly. Is it common to link to a js file at the end of a document? I thought this was done in the head. I guess in this case, it has to run at that point, though I'm not sure why since it is largely defining a function that is called at at a certain point on the page. I guess the important even here is assign the value to the variable "x" at that point in the page. I have a lot of trouble visualizing sequences of events in Javascript. PHP just runs linearly from beginning to end.

    Thanks -- Kenoli

  4. #4
    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
    3 Thread(s)
    Quote Originally Posted by kenoli View Post
    Brilliant. Thanks. It works perfectly. Is it common to link to a js file at the end of a document? I thought this was done in the head.
    It used to be run in the head due to ancient browsers (version 5, or maybe even version 4) not supporting scripts from the body.

    Placing the scripts at the end of the browser achieve two major benefits.

    1. The page loads faster - Best Practices for Speeding Up Your Web Site
    2. The scripts have a much easier time working with on-page elements.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •