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

JavaScript
1

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

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.


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

The following adjustment to your code will now result in success


var x = document.getElementById('phone').innerHTML;
function addPhone(){
    document.getElementById('phone').innerHTML += "<br/>" + x;
}
3

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

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.