JavaScript - Getting The Text/label Value Of A Drop Down Box

udayanga0727@yahoo.comI need to a code to do the following.

There is a Text Area that user can enter text. assume that user enter something and put a dot Following values should be populate in a drop down at the place where dot locate .

-Hello
-Hi
_Test


like when we get the string object using Net Beans IDE and when we put "Object." , drop down will be displayed with available methods for that particular object. idea is to build a editor using java script.


can any one help me on this?

Hi to everyone,

I'm kind of new to html/php/javascript but still I manage to create a nice looking form in wich the users have to fill some text fields and select items from drop list.

But I now have a small problem. I need one of those text fields to be automaticly filled by the informations selected in 2 drop lists.

This is how it would looks like :

Machine-Name : __________ (empty text field)

Drop-List1 : abc (the user selected the string "abc" from the list.)

Machine-Name : abc-

Drop-List 2 : zxy(the user selected the string "zxy" from the list.)

Machine-Name : abc-zxy-


I hope you understand what I mean. If needed, I can past those fields and list code, but I don't think that would be very useful since it is kind of trivial.

So, in words, how would you guys proceed to achieve this goal?

Hi everyone.
I am unfortunately stuck, and must admit myself defeated by my inferior javascript knowledge.

I would really love some sort of javascript observer to automatically add/remove a class to the labels on my page, depending on wether their checkboxes are checked or not. As well as adding those same CSS-classes to the checkboxes already checked on document load.

This would be possible in javascript, wouldn't it?

Hi all, I'm very new to Javascript and wonder if someone can help me.

I'm creating an online enrolment form for my company, who are a training company. Users enrolling on the course must make three choices - The level of course, the size of course and whether they wish to attend a workshop or study by distance learning. The combination of these three factors will determine the price. I'd like to have the price automatically calculated using javascript and displayed on the form before they submit. Can anyone give me an idea of how to do this?

There are three drop down boxes for users to select their course. They a -

Level of Qualification:
Level 3
Level 4
Level 5
Level 6

Scale of Qualification:
Award
Certificate
Diploma

Preferred Delivery Method
Workshop
Distance Learning

Each possible combination of these will affect the price. So for instance, if the user were to select 'Level 4', 'Certificate' and 'Workshop' the price would be calculated based on these three options.

How can I calculate the ultimate price and then display it on the page (I was thinking of using innerHTML in a 'span' element to display the final value, but if anyone has any better ideas I'd be glad to hear them)

The HTML code for the drop down boxes is below:

Code:

<form action="enrolment.php" method="post">

<select name="level" class="input" id="level">

  <option value="chooselevel"></option>
  <option value="Level 3">Level 3</option>
  <option value="Level 4">Level 4</option>
  <option value="Level 5">Level 5</option>
  <option value="Level 6">Level 6</option>

</select>

<select name="size" class="input" id="size">

  <option value="choosesize"></option>
  <option value="Award">Award</option>
  <option value="Certificate">Certificate</option>
  <option value="Diploma">Diploma</option>

</select>

<select name="delivery" class="input" id="deliv">

  <option value="deliverymethod"></option>
  <option value="Workshop">Workshop</option>
  <option value="Distance Learning">Distance Learning</option>

</select>

</form>

Thanks all, hope someone here can help!

Regards

Chris

*EDIT: I should mention that the form is also inside a table - Not sure if that will make a difference.

Hello All,

Below is my code, I am needing to get to where the label name will match the behavior that my field currently does. If nothing is entered the field is changed to a red background. If it is focused it goes back to white. I am needing the font color of the label to match color of the field and match the same behavior.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab06 - Form Validation</title>
<script type="text/javascript" charset="utf-8">



	function passcheck(){
		var pw1 = document.forms[ 0 ].password.value;
		var pw2 = document.forms[ 0 ].passcomf.value;
		
		if ( pw1 != pw2 ) {
			alert ("You did not enter the same new password twice. Please re-enter your password.");
			return false;
		}else{
			return true;
		}
	}


	function validate( ) {
		var errors = new Array( );
		
		for( var i = 0; i < document.forms[ 0 ].elements.length ; i++ ){
			
			if( document.forms[ 0 ].elements[ i ].type == "text" ) {
				if( document.forms[ 0 ].elements[ i ].value == "" ){
					errors.push( "The " + document.forms[ 0 ].elements[ i ].name + " field cannot be blank.\n");
					
					document.forms[ 0 ].elements[ i ].className = "in_error";
					
					
					
				}
				
			
			}
		
			if( document.forms[ 0 ].elements[ i ].type == "select-one") {
				if(document.forms[ 0 ].elements[ i ].selectedIndex == 0 ) {
					errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
						
					document.forms[ 0 ].elements[ i ].className = "in_error";
				}
		 }
		 
		 	if( document.forms[ 0 ].elements[ i ].type == "select-one") {
				if(document.forms[ 0 ].elements[ i ].selectedIndex == 2 ) {
					errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
						
					document.forms[ 0 ].elements[ i ].className = "in_error";
				}
		 }
		 

			




	}
		if( errors.length == 0 ) {
			return true;
		} else {
			clear_errors( );
			show_errors( errors );
			
			return false;
		}
		

	}
	

	
	function clear_errors( ){
		var div = document.getElementById( "errors" );
		while( div.hasChildNodes( ) ){
			div.removeChild( div.firstChild );
		}
	}
	
	function show_errors ( errors ) {
		var div = document.getElementById( "errors" );
		for( var i = 0; i < errors.length; i++ ){
			var error = document.createTextNode( errors[ i ] );
			var p = document.createElement( "p" );
			p.appendChild( error );
			div.appendChild( p );
		}
	}
	

	window.onload = function( ) {
		document.forms[ 0 ].onsubmit = validate;
		
	}



</script>


<style type="text/css" media="screen">
	#errors {
		color: #F00;
	}
	.in_error {
		background-color: #F00;
	}
	input:focus {
		background-color: #FFF;
	}
	select:focus {
		background-color: #FFF;
	}
</style>

</head>

<body>

	<h1>Form Validation</h1>
    
    <div id="errors"></div>
    
    <form action="" method="post" onsubmit="return passcheck()">
    	 <p>
        	<label for="firstname" id="labelfirstname">First name:</label>
            <input type="text" name="First name" value="" id="firstname" />
        </p>
         <p>
        	<label for="lastname" id="labellastname">Last name:</label>
            <input type="text" name="Last name" value="" id="lastname"/>
        </p>
         <p>
        	<label for="middlei" id="labelmiddlei">Middle initial:</label>
            <input type="text" name="Middle initial" value="" id="middlei"/>
        </p>
         <p>
        	<label for="address" id="labeladdress">Street address:</label>
            <input type="text" name="Street address" value="" id="address"/>
        </p>
         <p>
        	<label for="city" id="labelcity">City:</label>
            <input type="text" name="City" value="" id="city"/>
        </p>
         <p>
        	<label for="State" id="labelstate">State:</label>
            <input type="text" name="State" value="" id="state"/>
        </p>
         <p>
        	<label for="zipcode" id="idzipcode">Zipcode:</label>
            <input type="text" name="Zipcode" value="" id="zipcode"/>
        </p>
         <p>
        	<label for="username" id="labelusername">Username:</label>
            <input type="text" name="Username" value="" id="username"/>
        </p>
         <p>
        	<label for="password" id="labelpassword">Password:</label>
            <input type="text" name="Password" value="" id="password"/>
        </p>
         <p>
        	<label for="passcomf" id="labelpasscomf">Password comfirmation:</label>
            <input type="text" name="Password comfirmation" value="" id="passcomf"/>
        </p>
         <p>
        	<label for="agreement" id="labelagreement">User Agreement</label>
            <select name="User Agreement" id="agreement">
            	<option></option>
                <option>Yes, I agree!</option>
                <option>No, I do not agree!</option>
                </select>
        </p>
		<p><input type="submit" value="Register &rarr;" onclick="return passcheck(); return true;"/></p>
        </form>
</body>
</html>

Hello,

I have a coding project that I am working on, and I have gotten stumped. Basically win the page loads I want to show random numbers in two textboxes or labels, I would prefer labels. What this is going to be used for is...it is suppose to be for a math learning tool for first, second and third graders. Also another question is that I am suppose to give them digits based upon their grade level. So for first grade 1+1=2 second grade 2 digits, third 3 digits but can have a four digit answer. Plus it can't have negative numbers, nor have remainders for division. Also I don't want to use buttons if at all possible I want the numbers to load automatically.

I know this is a loaded question and I have worked tons on it, for me its trying to get the last few things to work together that's giving me trouble. If you would like to see sections of my code please ask cause it is tons as of right now. Thanks for your help.

I have a form that has a pretty complicated combo box - a user starts typing text, it queries a database for matches, and displays the results to the user.

The user can then select the match they desire and it has a value id, which I am currently sending to a hidden field in the form.

So, for example: user starts typing in a movie name, Seven - it returns Seven and user selects it. The form submits the id of the movie seven (say 12) to a hidden field.

Where I am stumped: Once a user selects a movie title, I have another drop down select box that is to display the available formats of the movie by querying my database based on the product id (12) and returning the available formats in the list:

DVD
BLUERAY
VHS

I am pretty good at programming, but I cannot figure this out - how to make the select box fire and return results once the value for the textbox has been captured.

Can anyone help me?

I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with.

I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this:

Code:

<thead><tr class="Answers">

			<th class='c1 BorderColor' width="25%" class='c1'> &nbsp; </th>
		<th class='c2 BorderColor' class='c2 yAxisBorder' > &nbsp; </th>
		<th class='c3 BorderColor' class='c3 yAxisBorder' > &nbsp; </th>
	
	
										
		<th width="25%" class='Selection BorderColor c4   ' id='header~QID19~1~4' >

			<label>Disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c5   ' id='header~QID19~2~5' >
			<label>Neither agree nor disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c6 last  ' id='header~QID19~3~6' >
			<label>Agree</label>

		</th>
	
	
</tr></thead><tr class='ChoiceRow   '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3'  ></td></tr><tr class='ChoiceRow ReadableAlt  '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3'  ></td></tr><tr class='ChoiceRow  bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3'  ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div>

I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads.

What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered.

I used the following JS code:

Code:

var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');

function getLabels()
  {
    for (x=0; x<spans.length; x++)
  {
    if (spans[x].className == "LabelWrapper")
    {
      labelspans.push(spans[x]);
    }
  }
    for (y=0; y<labelspans.length; y++)
  {
   labels.push(labelspans[y].firstChild);
   radioname.push(labelspans[y].firstChild.htmlFor);
  }
}
  
function getRadios()
{   
  //will put all radio groups into the "radiolist" array
  for (z=0; z<radioname.length; z++)
   {
     radiolist.push(document.getElementsByName(radioname[z]));
     //will add Event Listener to each radio button, and add each one to the "radios" array
     for (i=0; i<radiolist[z].length; i++)
       {
        chkradio = radiolist[z][i];
        chkradio.setAttribute("count",Number(z));
        chkradio.addEventListener("click", function(){changeLabel()}, false);
        radios.push(chkradio);
       }
  }
}

function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly          
   {
    for (w=0; w<radios.length; w++)   
      {
       if (radios[w].checked)
           {
            a = radios[w].getAttribute("count");
            labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
           }
       }
    }
getLabels();  
getRadios();

This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster?

Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative?

Hi all,

I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County).
I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database.

This piece of code is working well . . . .
Code:

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}

</script>

<form name="theForm" method="get">

<!-- County SELECTION BASED ON city VALUE -->

<?php

?>

<select name="County" onChange="autoSubmit();">
<option value=''</option>

<?php

//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>

What follows is my form where the javascript is not working - edited quite a bit to save on space!

Code:

<head>
 
<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit(); 
}

</script>

</head>

<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">     
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />    
<label for="Business_name">Business Name</label>    
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"     
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="StreetAddress">Address</label>    
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="Town">Town</label>    <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br /> 

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<form name = "subform" method="get"> 

<select name="County" onChange="autoSubmit();"> 
<option value=''</option>

<?php

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />    
<br/>    
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>   
</form>
</body>
</html>

It's probably obvious to you guys!!

Thanks in advance for your help.

I have been searching for a long time but have been unsuccessful on how to develop a drop down menu but have the menu items show in a list above the main nav. Not below. I really like the way this functions:

http://www.sohtanaka.com/web-design/examples/toggle/

But I would like the item in the list to appear above the main nav so it animates up not down. Can anyone help me on how to alter this js code to perform this task?

Here is the jQuery file link:

http://code.jquery.com/jquery-latest.js

I tried going through this js file but it very complex. Can anyone tell me what I need to change to have the animation roll up instead of down? Any help would be most appreciated.

Hello everyone!

So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). I'm hoping someone can tell me why it is happening and how to fix it!

Code:

// JavaScript Document

var posX;
var posY;
var element;

function drag(event) {
	element = document.getElementById("square");
	posX = event.clientX;
	posY = event.clientY;
	element.addEventListener("mousemove", move, false);
}

function move(event) {
	
	if (typeof(document.getElementById("square").mouseup) == "undefined")
		element.addEventListener("mouseup", drop, false);
	//Prevents redundantly adding the same event handler repeatedly
	
	element.style.left = event.clientX - posX + "px";
	element.style.top = event.clientY - posY + "px";
}

function drop() {
	element.removeEventListener("mousemove", move, false);
	element.removeEventListener("mouseup", drop, false);
}

the html is a simple (position is set to relative):

<p id="square" onmousedown="drag(event)">meep</p>

Lastly, and most importantly, thank you all for your time =]

EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library.

As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page.

For Example:

Input- 512

Output - Austin, TX

The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks!

Hi,

I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked.

Any help would be appreciated!

Hello there, CodingForums.com!

I'm a newbie to Javascript, HTML, XHTML, CSS-- and oh god, everything, so please bear with me! I have come to understand that to get any better, I'll need support. I hope you guys (and gals) can assist!

Here is my issue: I'm currently trying to develop a first-draft calculator that will allow me to calculate some values for work and the way I want it requires me to do it with a pair of drop-downs.

Take a look at it he

http://www.projectvoid.co.uk/

I would like to select the first drop-down, on the left-hand side (Current Lighting Products -> Type of Lamp) and for the right-hand side to copy it's selected value (Energy Efficient Products -> Type of Lamp).

Furthermore, it shouldn't interfere with the fact that I'm also using those values with my dependent drop-down, below (Wattage).

The only piece of code I've found that might help is this:

Code:

function setSelect(name1, name2) 
{

var select1 = document.forms.formname.elements[name1];
var select2 = document.forms.formname.elements[name2];

select1.selectedIndex = select2.selectedIndex;

}

I am also unsure how to utilize it.

I look forward to your aid! Thank you in advance.

Hi all,

Thanks for reading. I'm having an issue trying to accomplish the following -

I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after.

This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly?

Code:

<script language="javascript">

fields = 1;

function addMore() {

if (fields = 1) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";

fields = 2;

} else if (fields = 2) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;

} else {

document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;

}

}

</script>

Here is the code in my HTML -

Code:

<input type="text" name="field1" size="25" /> <span>Field 1.</span>
<div id="addedMore"></div>
<p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p>

Thank you very much.