JavaScript - Debugging - What Am I Missing?

first of all, hello all

i found this forum while running out of ideas and being extremely desperate to fixing a probably small javascript error in a script. the script is supposed to open a small form window that allows the user to input an email address and update it to proceed. the form item is initially unchecked, but as the user clicks it and enter his email address, it updates the value of the email address and the box becomes "checkable". the problem is that with both IE and firefox, the box doesn't close again, doesn't get checkable and basically doesn't work. in the firefox debugging console, I found the following error:

Quote:
Error: document.getElementById(input_array[i]) is null
Source File: sell_item.php
Line: 1106
does anyone have an idea what could be wrong?

the part responsible in the javascript for this section is:

Code:

<script language="javascript">
	function pg_popup_open(id)
	{
		if (document.getElementById(id).style.display == 'block')
		{
			document.getElementById(id).style.display = 'none';			
		}
		else
		{
			document.getElementById(id).style.display = 'block';
		}
		return false;
	}	
	
	function pg_update_settings(id, input_array)
	{
		xmlHttp=GetXmlHttpObject();
		
		if (xmlHttp==null)
		{
			alert ("Browser does not support HTTP Request");
			return;
		}

		var url    = '' + 'ajax_files/direct_payment_box.php';
		var action    = url + '?id=' + id + '&user_id=' + 100001;

		var chk_disabled = false;
		for ( var i in input_array )
		{
    		action += '&' + input_array[i] + '=' + document.getElementById(input_array[i]).value;
    		
    		if (document.getElementById(input_array[i]).value == '')
    		{
    			chk_disabled = true;
    		}
		}		
		
		xmlHttp.onreadystatechange = function() { 
			if (xmlHttp.readyState == 4)
			{
				var response = xmlHttp.responseText;
			}
		};
		xmlHttp.open("GET", action, true);
		xmlHttp.send(null);		
		
		document.getElementById('checkbox_' + id).disabled = chk_disabled;
		if (chk_disabled == true)
		{
			document.getElementById('checkbox_' + id).checked = false;
		}
		document.getElementById(id).style.display = 'none';
		return false;
	}
</script>

and the html code that is supposed to pop up the box is:

Code:

<input type="checkbox" name="payment_gateway[]" id="checkbox_pg_paypal" value="1"  disabled>
<span class="contentfont"><a href="javascript:;" onclick="pg_popup_open('pg_paypal');">PayPal</a></span>
<script language="javascript"> var array_pg_paypal = new Array(); array_pg_paypal[0] = 'pg_paypal_email';</script>
<div class="smallfont"><b>PayPal Email Address</b><br>
<input type="text" name="pg_paypal_email" id="pg_paypal_email" value="" /></div>
<div align="right"><input type="button" value="Proceed" onclick="pg_update_settings('pg_paypal', array_pg_paypal);" /></div>

i understand this is asking a lot, but if someone has a spare second that is a javascript guru, i promise i will name my first born after you!! lol

I am trying to debug this with FireBug

Code:

function chapter12_nodeOne() {
    
    //create an element
    var element = document.createElement('input');
    //set some attributes
    element.setAttribute('type', 'button');
    element.setAttribute('value', 'submit');
    //appendd the element into a DIV
    document.getElementById('myDiv').appendChild(element);
    //uses EventUtil to attach an event listener
  (1)  EventUtil.addHandler(element, 'click', function() { alert('added event handler') });
}

var EventUtil = {
    (2)addHandler: function(element, type, handler) {
        //check if the element and the browser support DOM Level 2 event attachment
        //if the user is not browsing with IE
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }
        //if user is browsing with IE
        else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        }
        //if user is using a browser that only supports DOM Level 0 event attachment 
        else {
            element["on" + type] = handler;
        }
    },
    
    removeHandler: function(element, type, handler) {
        //check if the element and the browser support DOM Level 2 event attachment
        //if the user is not browsing with IE
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        }
        //if user is browsing with IE
        else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        }
        //if user is using a browser that only supports DOM Level 0 event attachment 
        else {
            element["on" + type] = null;
        }
    },
    
    preventDefault: function(event)
    {
        if(event.preventDefault)
        {
            event.preventDefault();
        }
        else
        {
            event.returnValue = false;
        }
    }
};

I put a breakpoint on the line marked with (1), I am trying to go to line (2) with all the available options FireBug gives, but unfortunately I get the end of chapter12_nodeOne function. Any ideas why?

Hi everybody. I've been trying to figure out how to fix the following error I get in the latest Internet Explorer for marinebio.org:

Message: 'this.submenus[...].getElementsByTagName(...).0' is null or not an object
Line: 547
Char: 3
Code: 0
URI: http://marinebio.org/_n/s/main.js

The code at line 547 in main.js is:

Code:

this.submenus[i].getElementsByTagName("span")[0].onclick = function() {

in the function:

Code:

SDMenu.prototype.init = function() {
	var mainInstance = this;
	for (var i = 0; i < this.submenus.length; i++)
		this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
			mainInstance.toggleMenu(this.parentNode);
		};
	if (this.markCurrent) {
		var links = this.menu.getElementsByTagName("a");
		for (var i = 0; i < links.length; i++)
			if (links[i].href == document.location.href) {
				links[i].className = "current";
				break;
			}
	}
	if (this.remember) {
		var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
		var match = regex.exec(document.cookie);
		if (match) {
			var states = match[1].split("");
			for (var i = 0; i < states.length; i++)
				this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
		}
	}
};

I've been using the Dynamic Drive's Slashdot sliding menu script for at least a year without any problems. All pages validated before the ads were added.

I've pulled nearly all other scripts but it still errors out. Works fine in FF and Chrome. Going to strip the home page to nothing and start building it back but if anyone has any ideas, I'd really appreciate it. Maybe it's time to upgrade the vertical sliding menu script entirely, if anyone can recommend a better one, that would be great too. I know just enough javascript to be dangerous apparently....

This page should work, but it doesn't. My debugging says that I have a invalid character on line 2 and on line 39 it is "object expected".
Here's the page:
<HTML>
<HEAD>
<TITLE>The Golf Page</TITLE>
<STYLE>
BODY {font-family:Arial, Helvetica, sans-serif; font-size: 18pt;
color:blue; background-color:rgb(255,255,128)}
</STYLE>
<SCRIPT SRC="Ball.gif">
var x = new Array(-395, -389, -383, -377, -371, -365, -359, -353, -346,
-340, -334, -328, -322, -316, -310, -304, -297, -291, -285, -279, -273,
-267, -261, -255, -248, -242, -236, -230, -224, -218, -212, -206, -199,
-193, -187, -181, -175, -169, -163, -157, -150, -144, -138, -132, -126,
-120, -114, -108, -101, -95, -93, -91, -88, -86, -83, -81, -78, -76, -73,
-71, -69, -66, -64, -61, -59, -56, -54, -51, -49, -47, -44, -42, -39, -37,
-34, -32, -29, -27, -24, -22, -20, -17, -15, -12, -10, -7, -5, -2, 0);

var y = new Array(-300, -300, -300, -299, -298, -297, -296, -294, -292,
-290, -288, -285, -282, -279, -276, -272, -268, -264, -260, -255, -250,
-245, -240, -234, -228, -222, -216, -209, -202, -195, -188, -180, -172,
-164, -156, -147, -138, -129, -120, -110, -100, -90, -80, -69, -58, -47,
-36, -24, -12, 0, -5, -10, -14, -18, -22, -25, -29, -32, -34, -37, -39,
-41, -43, -45, -46, -47, -48, -48, -48, -48, -48, -48, -47, -46, -45, -43,
-42, -40, -37, -35, -32, -29, -26, -23, -19, -15, -11, -6, 0);
index=0
function moveBall() {
if(index <=[x.length-1]) {
placeIt("Ball", x[index], y[index]);
index++;
setTimeout("moveBall()", 5);
} else {
("showIt()", 5);
setTimeout("showIt('Slogan')", 5);
setTimeout("showIt('Slogan1')", 10);
setTimeout("showIT('Marquee')", 15);
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="moveBall(Ball);">
<DIV ID="Marquee" visibility:hidden font-family: Time New Roman, Times, serif; font-style:italic>
<CENTER>
<MARQUEE BGCOLOR="#BBBBBB">
A beautiful day for GOLF...Sunny...No WINDS...TEMP:68-70
</MARQUEE>
</CENTER>
</DIV>
<SCRIPT SRC="Golf.js"></SCRIPT>
<DIV ID="Title"
STYLE="border-left:1px solid blue; border-right:3px solid blue; border-top:1px solid blue; border-bottom:3px solid blue; padding-left:395;padding-top:260;padding-bottom:0;
background-color:rgb(0,255,0)">
THE G<SPAN ID="Ball" position:relative; left:0; top:0><IMG SRC="Ball.gif" BORDER=0 width="17" height="17"></SPAN>LF PAGE
</DIV>
<DIV ID="Slogan"
STYLE="color:black; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold; position:absolute; left:120; top:100; z-index:2; visibility:hidden">
Your Online Source of Golf Equipment
</DIV>
<DIV ID="Slogan2"
STYLE="color:white; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold; position:absolute; left:121; top:101; z-index:1; visibility:hidden">
Your Online Source of Golf Equipment
</DIV>
</BODY>
</HTML>

The function moveBall and its contents should be checked as well, although it should be correct. But the page won't load properly. The marquee is suposed to be hidden until the function executes, and it is displayed. As far as I know the only errors are in the onLoad and function, everything else is right.
Any help would be appreciated.
Thanks

Hello,
I'm a student web developer. I'm debugging some JavaScript code I just created that simply extracts a table, reorders it and replaces it when the user clicks on a button ('Order results' - top right of the table). (It's a small script).

It's for a PHP based polling application, completely of my own creation, which is under construction (only the JavaScript doesn't work).
You can see all the code if you use Firebug. Go to the following link and vote for something; that will take you to a page the JavaScript is located.
http://www.samuellockyer-development...s/examples.php
(I'm linking because I think the context of the page may help.)

(Notice the type error alert.) (Update: Not anymore.)
(There are NO syntax errors.)

You will find the area of the bug quickly by looking at the comments.
(Marked by !!BUG!!) (Update: Not anymore, look at the posts below to find them now.)

I am very new to JavaScript, but I wrote all the code, so I will be able to answer questions easily.
This is a last resort by the way, I need this to work within about two days and I would be SO grateful for any help!!

You can vote as many times as you like - I can just zero everything before I demo the app.

I've been playing around with a madlibs exercise while trying to learn simple javascript. I have three input boxes and a button display an alert containing the input from the boxes.

Am I right to be assigning variable names to the values from the text boxes and then referencing those variables in my alert?

I'm sorry if this is a dumb question but I've been working on it for hours and can't get past this point.


Inset a name:
<input type="text" id="textbox1" size="10"/>
</br>
Insert a verb :
<input type="text" id="textbox2" size="10"/>
</br>
Insert a place:
<input type="text id="textbox3" size="10"/>


<input type="button" value="CLICK WHEN FINISHED"
onClick="name = document.getElementById('textbox1').value;
verb = document.getElementById('textbox2').value;
place = document.getElementById('textbox3').value;
alert('Mad Lib :' + name + " " + verb + " " + place);" />

[Okay, so I just wrote a simple code to try and figure out how javascript works and I can't even get this to work. What am I missing?]


<html>
<head>
<script type="text/javascript">

var c=a+b;

function displaymessage()
{
alert("The answer is " + c)
}
</script>
</head>

<body>
<form>
<p>Enter the first number
<input type="text" name="a"></p>
<p>Enter the second number
<input type="text" name="b"></p>
<input type="button" value="Enter" onclick="displaymessage()"/>
</form>
</body>
</html>

I have the following work in progress:

PHP Code:
var radiolist = [];
var labellist = [];
var rps;
var tablecells = [];
  
  //function taken from JavaScripter.net which will return a hex value for the color
  function RGBtoHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
   function toHex(N) {
    if (N==null) return "00";
    N=parseInt(N); if (N==0 || isNaN(N)) return "00";
    N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
    return "0123456789ABCDEF".charAt((N-N%16)/16)
      + "0123456789ABCDEF".charAt(N%16);
  }

  
  //this function will add all the radio buttons to an array
  function getRadios(){
    var inputs = document.getElementsByTagName('input');
    for (i=0; i<inputs.length; i++){
      if (inputs[i].type === 'radio'){
        radiolist.push(inputs[i]);
      }
    }
  }
  
  //this function will add all labels of the "LabelWrapper" class to an array
  function getLabels(){
    var inputs = document.getElementsByTagName('span');
    for (i=0; i<inputs.length; i++){
      if (inputs[i].className === 'LabelWrapper'){
        labellist.push(inputs[i]);
      }
    }
  }
 
getRadios();
getLabels();
//alert("There are " + radiolist.length + " radios");
//alert("There are " + labellist.length + " statements");
rps = radiolist.length / labellist.length;
//alert("There are " + rps + " radios per statement")

  //this function will shade cells depending on their class name  
  function identifyCells(){
       var cells = document.getElementsByTagName('td');
       for (i=0; i<cells.length; i++){
         for (j=3; j<(rps+4); j++){
           var tclass = "c" + j;
           if ((cells[i].className === tclass + "   ") || (cells[i].className === tclass + " last  ")){
             xred = Math.round((j-2) * 255/(rps));
             xblue = Math.round((j-2) * 255/(rps) - 50);
             xgreen = Math.round(50 + (rps-j+4) * 255/(rps));
             xcolor = "#" + RGBtoHex(xred,xgreen,xblue);
             cells[i].setAttribute('col',xcolor);
             cells[i].addEventListener('mouseover',highlightCells,false);
             cells[i].addEventListener('mouseout',clearHighlights,false);
             }
           }
         }
       }
    }
  //this function will highlight all preceding cells in the same row
  function highlightCells(){
    var y = this.getAttribute('col');
    var z0 = this.className.split("c"); //split the classname in two so that we can use parseInt function
    var z = parseInt(z0[1]);
    this.style.backgroundColor = y;
    var cellfamily = this.parentNode.childNodes;
    for (i=0; i<cellfamily.length; i++){
      cellname = cellfamily[i].className.split("c");
      cellnum = parseInt(cellname[1]);
      if (cellnum > 3 && cellnum < z){
        cellfamily[i].style.backgroundColor = y;
      }
    }    
  }
  
  function clearHighlights(){
      var z0 = this.className.split("c");
      var z = parseInt(z0[1]);
      this.style.backgroundColor = "transparent";
      var cellfamily = this.parentNode.childNodes;
      for (i=0; i<cellfamily.length; i++){
        cellfamily[i].style.backgroundColor = "transparent";
      }    
  }
      
identifyCells(); 


FireFox is giving me the "missing ) after argument list" at the following line:
function highlightCells(){

I can't figure out why I am getting an error. The code was 'working' before and I was able to get the highlighting on the table cells, but I don't know what I did that caused the issue.

Any help would be greatly appreciated.

I am trying to run this script on my small form and I cannot seem to get very far - the error console keeps saying I am missing a ; before statement and then the green arrows points to the f in var formValid==true; ?? Is anyone able to help here asI can not see why ??? below is my small script....

Thank you

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Error checking</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function checkForm(theform){
var formValid==true;
var elementCount=0;
while(elementCount<theform.elements.length) // returns the total number of form elements within the form
{
if (theform.elements[elementCount].type=="text")//returns the type of the elementCount form element (ie:"textarea")
{
if (theform.elements[elementCount].value=="")
alert("Please complete all form elements")
theform.elements[elementCount].focus();
formValid=false;
break;
}
elementCount++;
}
return formValid;
}
</script>
</head>

<body>

Hi ...

i am trying to run my website but when i am accessing through the link....i am getting missing ) after argument list .it showing the following peace of code in the firebug....

missing ) after argument list
else{$("input[id^=channelPid_]")\n

can anyone help me to resolve this issues..its been three days i am working on it but no clue...

thanks in advance

This code is from a No Redirect Bookmarklet used with Firefox.
The code works great as a bookmarklet but fails when used in a button
code like this:

loadURI("Bookmarklet Code Here");


When I evaluate it using JavaScript Command I get
an error popup window stating
"SyntaxError: missing variable name"

I assume it is caused by this part:

vark,x,t,i,j,p;


How can I eliminate the error?


No Redirect Bookmarklet Code:

javascriptfunction(){var%20k,x,t,i,j,p;%20for(k=0;x=document.links[k];k++){t=x.href.replace(/[%]3A/ig,':').replace(/[%]2f/ig,'/');i=t.lastIndexOf('http');if(i>0){%20t=t.substring(i);%20j=t.indexOf('&');%20if(j>0)t=t.substring(0 ,j);%20p=/https?\:\/\/[^\s]*[^.,;'%22>\s\)\]]/.exec(unescape(t));%20if(p)%20x.href=p[0];%20}%20else%20if%20(x.onmouseover&&x.onmouseout){x.onmouseover();%20if%20(window.status%20&&%20wind ow.status.indexOf('://')!=-1)x.href=window.status;%20x.onmouseout();%20}%20x.onmouseover=null;%20x.onmouseout=null;%20}})();

No Redirect Bookmarklet Code
with Break and Spaces:

javascriptfunction(){
vark,x,t,i,j,p;
for(k=0;
x=document.links[k];
k++){
t=x.href.replace(/[%]3A/ig,':').replace(/[%]2f/ig,'/');
i=t.lastIndexOf('http');
if(i>0){
t=t.substring(i);
j=t.indexOf('&');
if(j>0)t=t.substring(0,j);
p=/https?\:\/\/[^\s]*[^.,;
'%22>\s\)\]]/.exec(unescape(t));
if(p)x.href=p[0];

}
elseif(x.onmouseover&&x.onmouseout){
x.onmouseover();
if(window.status&&window.status.indexOf('://')!=-1)x.href=window.status;
x.onmouseout();

}
x.onmouseover=null;
x.onmouseout=null;

}

}
)();

I would appreciate any help offered. I don't know much about JavaScript
coding including how to indent properly. Where could I find out how to
indent properly?

Hello all -

I am new to JS and figure this is probably an easy fix.

I have a wordpress self-hosted site. I am doing a nav bar with rollovers. I have the script saved as a js file and in the right directory. I have the Code:

<script src="<?php bloginfo('template_directory'); ?>/js/menu.js" type="text/javascript"></script>

in the header.php file just after the body tag. I have the styles where I want them in the CSS file. And lastly I have the html and the appropriate wordpress php call in the right spot.

The css is working fine, which leads me to believe my css and html are spot on. But there is no rollover working. Do I need to put anything besides styling into my css file?

Any help is much appreciated.

Thanks.

Hi folks!

What's wrong with this?

PHP Code:
            var addWpParams = {
                'code' : item.code,
                'name' : item.name,
                'type' : item.type,
                'lat' : item.lat,
                'lng' : item.lng,
                'latLng' : latLng
            };

            addWpParams(addWpParams); 


Returns an error: "missing ] after element list" in firebug

I must be doing something wrong but what?

TIA

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>Make10-1 Oakwood Mortgage</title>
<script type="text/javascript">
<!--Hide from old browsers
 var thisMsg = "  ** See us for your auto loan financing needs!!! **  "
    var beginPos =0
    function scrollingMsg() 
	{
       msgForm.scrollingMsg.value = thisMsg.substring(beginPos,thisMsg.length)+ thisMsg.substring(0,beginPos)
       beginPos=beginPos+1
       if (beginPos > thisMsg.length) 
	   {
          beginPos=0
       }
       window.setTimeout("scrollingMsg()",200)
    }
    
    function Calc(LoanCalc) {
       var salesAmount=parseInt(LoanCalc.SaleAmt.value,10)
       if (isNaN(salesAmount) || (salesAmount <= 0)) {
		  alert("Please enter a valid Sales Amount.")
          LoanCalc.SaleAmt.value=" "
          LoanCalc.SaleAmt.focus()
       }
       else {
            var DownPayment=parseFloat(LoanCalc.DownPmt.value)/100
            if (isNaN(DownPayment) || (DownPayment <= 0) || DownPayment > 100) {
               alert("The Down Payment Rate is not a valid number!")
               LoanCalc.DownPmt.value = ""
               LoanCalc.DownPmt.focus()
            }
            else {
                 var loanRate=parseFloat(LoanCalc.Rate.value)
                 if (isNaN(loanRate) || (loanRate <= 0)) {
                    alert("The interest rate is not a valid number!")
                    LoanCalc.Rate.value = " "
                    LoanCalc.Rate.focus()
                 }
                 else {
                    var loanYears = LoanCalc.Years.value
                    var loanYears = parseInt(loanYears,10)
                    if (isNaN(loanYears) || (loanYears == 0)) {
                       alert("Please select the number of years from the list and click Calculate!")
                       LoanCalc.Years.focus()
                    }
                    else {
						AmtDown = salesAmount * DownPayment
						var loanAmount = salesAmount - AmtDown
						LoanCalc.LoanAmt.value = dollarFormat(loanAmount.toFixed(2))
						var monthlyPmt = monthly(loanAmount, loanRate, loanYears)
						LoanCalc.Payment.value = dollarformat(monthlyPmt.toString())
                   }
              }
           }
       }     
	}

     function monthly(loanAmount,loanRate,loanYears) {
        var interestRate = loanRate/1200
        var Pmts = loanYears * 12
        var Amnt = loanAmount * (interestRate / (1 - (1 / Math.pow(1+interestRate,Pmts))))
	    return Amnt.toFixed(2)
     }

     function dollarFormat(valuein) {
        var formatValue = ""
        var formatDollars = ""
        formatAmt = valuein.split(".",2)     
		var dollars = formatAmt[0]
        var dollarLen = dollars.length
        if (dollarLen > 3) {
           while (dollarLen > 0) {
                 tempDollars = dollars.substring(dollarLen - 3,dollarLen)
                 if (tempDollars.length == 3) {
                    formatDollars = ","+tempDollars+formatDollars
                    dollarLen = dollarLen - 3
                 } else {
                        formatDollars=tempDollars+formatDollars
                        dollarLen = 0
                 }
           }
         if (formatDollars.substring(0,1) == ",")
            dollars = formatDollars.substring(1,formatDollars.length)
         else
            dollars = formatDollars
         }
 		 var cents = formatAmt[1]
         var formatValue="$"+dollars+"."+cents
         return formatValue
     }

     function popUpAd() {
        open("make10-1notice.html","noticeWin","width=520,height=270")
     }
	 
     function lastModified() {
		 dateDisplay.innerHTML="<span style='font-family:Arial, Helvetica, sans-serif; font-size:9px; font-weight:bold'>This document was last modified "+document.lastModified.substring(0,10)+"</span>"
	 }
     
//-->
</script>
<style type="text/css">
<!--
body {
	background-image: url(financial_symbol.jpg);
}
-->
</style>
</head>
<body onload="scrollingMsg(); popUpAd(); lastModified()">
<div align="center">
  <p align="center"><img src="make10-1banner.jpg" width="750" height="120" alt="banner" /></p>
  <form id="msgForm" action="">
	<p style="text-align:center"><input type="text" name="scrollingMsg" size="25" /></p>
  </form>
</div>
<div style="font-family:Arial, Helvetica, sans-serif">
<h3 align="center">Home Loan Payment Calculator</h3>
<form id="LoanCalc" action="">
    <table width="346" align="center" cellspacing="3">
        <tr>
           <td align="right">
              <span style="color:#cc0000">*</span>Sale Price:
           </td>
           <td><input type="text" name="SaleAmt" id="SaleAmt" size="9" /></td>
        </tr>
        <tr>
          <td align="right">
             <span style="color:#cc0000">*</span> Down Payment as a percent
          </td>
          <td><input name="DownPmt" type="text" id="DownPmt" size="4" /> 
          %</td>
        </tr>
        <tr>
           <td align="right">
              <span style="color:#cc0000">*</span> Interest Rate (e.g. 5.9):
		  </td>
           <td><input type="text" name="Rate" id="Rate" size="4" /> %  
		   </td>
        </tr>
<tr>
           <td align="right">
              <span style="color:#cc0000">*</span> Select Number of Years:  
      </td>
           <td><select name="Years" id="Years">
             <option selected="selected">Select Years</option>
             <option value="10">10</option>
             <option value="15">15</option>
             <option value="20">20</option>
             <option value="25">25</option>
             <option value="30">30</option>
             <option value="40">40</option>
           </select></td>
        </tr>
        <tr>
           <td align="right">
             <input name="button" type="button" value="Calculate" onclick="Calc(LoanCalc)" />
	       </td>
           <td>
             <input name="Reset" type="reset" />
		   </td>
        </tr>
        <tr>
          <td align="right">
             <span style="color:#cc0000">*</span> Loan Amount          
          </td>
          <td>
            <input name="LoanAmt" type="text" id="LoanAmt" size="9" />
          </td>
        </tr>
        <tr>
           <td align="right">
              <span style="font-weight:bolder">Monthly Payment</span>: 
           </td>
           <td><input type="text" name="Payment" id="Payment" size="12" /></td>
        </tr>
  </table>
  <p style="color:#cc0000; text-align:center">* Indicates a required field.</p>
</form>
</div>
<div id="dateDisplay" style="margin-left:5%">
</div>
</body>
</html>

hi friends ,


i am on make a dynamic input field creation code ,

my problem is the entered text(value from "add proposition") is washing away , if i press new "add proposition"


my java script is
PHP Code:
  <script language="javascript" type="text/javascript">
   
    function add()
    {   
        k=document.getElementById("num").innerHTML
        k=parseInt(k);
         if(!k)
        {document.getElementById("num").innerHTML=1;
        k=1;} 
        else{
           document.getElementById("num").innerHTML=k+1;
           k++;
        }  
         document.getElementById("cat").innerHTML+="<br />type propositon "+(k)+":<input type=\"text\" name=\"prop"+k+"\">is it answer?  <input type=\"checkbox\" name=\"ans"+k+"\">     ignore this one:<input type=\"checkbox\" name=\"ign"+k+"\">"            
       
    }


</script> 



my html code is
PHP Code:
<form  action="new.php" method="post">
   <fieldset>
<legend>Add Question & answer:</legend>
   
 
 question type:<br />
True or False:<input type="radio" name="radio" value="t">
Objective:<input type="radio" name="radio" value="o">
Other:<input type="radio" name="radio" value="o">
Quesion:<br />
<textarea name="desc" rows="6" cols="35" ></textarea> <br />
<a href="javascript:add()" ><b>add proposition</b></a> 
<div id="cat"></div>
<div id="num" style="display:none;"></div>
<br> 


 <input type="submit" name="submit">
 </fieldset>
</form> 



how i solve this problem ?