JavaScript - How Clear Dropdown Values When Div Is Hidden

i'm trying to "post" the selected checkboxes (name and value) into a mysql database;
i've search "docter google" for some answers and read that the "easiest" way to do this is to collect the checkboxes and put the values and names in to an hidden textfield ( function setvalue() ) and collect this textfield in a new page with php; but this doesn't work.
it seems that the variable naamtest is empty (when i load a word into this var arv it does work)

can someone find my error?

Code:

<script type="text/javascript">
function shift(which)
{

var counter = 0;  // counter for checked checkboxes     
var i       = 0;  // loop variable     
var veck     = "";// final url variable 
var beginsaldo = 79;
var namen_array = "";
var va_array = "";
var namen = "";
var valu = "";
var input_obj = document.getElementsByTagName('input');      // get a collection of objects with the specified 'input' TAGNAME     
for (i=0; i < input_obj.length; i++){            // loop through all collected objects    
if (input_obj[i].type == 'checkbox' && input_obj[i].checked == true){             // if input object is checkbox and checkbox is checked then ...      
counter++;			// ... increase counter 
var valcheck = input_obj[i].value;		// waarde van de geselecteerde checkbox in variable steken
test = Number(valcheck);		// absolute rekenwaarde van variable maken
beginsaldo -=   test; //beginsaldo verminderen met de checkbox value   

if (counter > 0){
var naam = input_obj[i].name + '  ';
var val = input_obj[i].value + '  ';
namen = namen +  naam; 
valu = valu +  val; 
namen_array	= 	namen.split("  ");
va_array	= 	valu.split("  ");
var naamtest = namen_array;

}}}  
if (counter > 10){
alert ("u mag maar 10 renners selecteren");

var tr = which.parentNode;
    while ( tr.tagName.toUpperCase() != "TR" )
    {
        tr = tr.parentNode;
        if ( tr == null ) return; // something went very wrong!
    }
    var tds = tr.getElementsByTagName("td");
        tds[0].getElementsByTagName("input")[0].checked = false;
}

else if (beginsaldo < 0){
alert ("uw saldo is te laag om dit uit te voeren");

var tr = which.parentNode;
    while ( tr.tagName.toUpperCase() != "TR" )
    {
        tr = tr.parentNode;
        if ( tr == null ) return; // something went very wrong!
    }
    var tds = tr.getElementsByTagName("td");
        tds[0].getElementsByTagName("input")[0].checked = false;
}

else{

    var tr = which.parentNode;
    while ( tr.tagName.toUpperCase() != "TR" )
    {
        tr = tr.parentNode;
        if ( tr == null ) return; // something went very wrong!
    }
    var tds = tr.getElementsByTagName("td");
    if ( tds[0].getElementsByTagName("input")[0] == which )
    {
        tds[2].innerHTML = tds[0].innerHTML;
        tds[0].innerHTML = "&nbsp;";
        tds[3].innerHTML = tds[1].innerHTML;
        tds[1].innerHTML = "&nbsp;";
        tds[2].getElementsByTagName("input")[0].checked = true;
    } else {
        // this code is optional!!
        tds[0].innerHTML = tds[2].innerHTML;
        tds[2].innerHTML = "&nbsp;";
        tds[1].innerHTML = tds[3].innerHTML;
        tds[3].innerHTML = "&nbsp;";
        tds[0].getElementsByTagName("input")[0].checked = false;
    }

function setValue()
{

var arv = naamtest.join();
// This line converts js array to String 
document.f2.arv.value=arv;
// This sets the string to the hidden form field. 
}}}
</script>

Hi there!

I have two iframes, within each iframe are four drop down list boxes.
On my main page I have one text input box and one text area input box.

Aim:
1. Retrieve all the values.
2. Place them into a hidden form.
3. Submit the hidden form data to a Google Docs Spreadsheet.

I need to export: (in this order, all are within form tags)
"List1,2,3,4" (drop down lists) from form "initiatorform" within frame "initiatorframe" which is "initiator.html"
"List5,6,7,8" (drop down lists) from form "finisherform" within frame "finisherframe" which is "finisher.html"
"ComboName" (Text input box) and "Description" (text area input) from form "indexform" within "Index.html"

I've been trying different pieces of code for the last few days with no luck. I've been using an alert to test whether the value has been recorded but it won't even pop up at all.

I've been trying to use this example. Is this the correct format for what I'm trying to do?
Code:

<script language="JavaScript" type="text/javascript">
<!--
function whatever(iframeid,iframename){
 mmspobj=document.getElementById(iframeid);
 if (mmspobj.tagName=='IFRAME'){
  mmsiobj=window.frames[iframename].document.getElementId('myfield1ID').value;
alert(mmsiobj);
 }
alert(mmsiobj);
}
//-->
</script>

I'm just trying to retrieve the value atm, once its working I can set the hidden form data.


I'm sorry if this is something simple but I've been teaching myself over the last week while making Google Apps.

Any help would be greatly appreciated.

Hi,

im looking for some help figuring out how to achieve the following:

i have an ecommerce site. on a product a customer can select attributes associated with that product (i.e colour, size, shape etc.). Each attriute is represented by a HTML select, containing the values allowed for that product.

the problem comes when certain colours do not come in certain sizes. Say my product has the following:

colours: red, yellow, blue
size: small, medium, large
shape: square, circle

but there is no stock for red,medium and red,large. I need to dynamically remove medium + large when red is selected so they cannot be chosen from the select.

This could apply for any combination of attributes. Also this is completely dynamic so there could be 2 attributes or 10 attributes, and changing one would need to cascade down the selects.

i have posted the code at the bottom of the post. The js representation of what is selectable is an object, containing other objects, each object representing a variation and wether to show or not.

i know this is a right mouthful to try and explain, its even hard to figure out how to do it! an example of what im trying to achieve is: http://www.bit-cart.com/online-store-front-live-demo/products/Mikes-Test-Product.html. I do have jquery available on my page if it helps.

any ideas would be most appreciated!

thanks

mike

HTML:
Code:

<select name='attribute_12' id='attribute_12' class='attribute-select'>
    <option value='166'>attribute_12 166</option>
    <option value='165'>attribute_12 165</option>
    <option value='171'>attribute_12 171</option>
</select>
			   
<select name='attribute_10' id='attribute_10' class='attribute-select'>
    <option value='108'>attribute_10 108</option>
    <option value='110'>attribute_10 110</option>
    <option value='120'>attribute_10 120</option>
    <option value='148'>attribute_10 148</option>
</select>
					  
<select name='attribute_19' id='attribute_19' class='attribute-select'>
    <option value='201'>attribute_19 201</option>
    <option value='202'>attribute_19 202</option>
    <option value='203'>attribute_19 203</option>
</select>

JS:
Code:

<script type="application/javascript">
var variants = { 
   "304" : {"attrs":[171,108,201], "show":0}, 
   "305" : {"attrs":[171,108,202], "show":1}, 
   "306" : {"attrs":[171,108,203], "show":0}, 
   "307" : {"attrs":[171,120,201], "show":1}, 
   "308" : {"attrs":[171,120,202], "show":0}, 
   "309" : {"attrs":[171,120,203], "show":1}, 
   "310" : {"attrs":[171,148,201], "show":0}, 
   "311" : {"attrs":[171,148,202], "show":1}, 
   "312" : {"attrs":[171,148,203], "show":0}, 
   "313" : {"attrs":[171,110,201], "show":1}, 
   "314" : {"attrs":[171,110,202], "show":0}, 
   "315" : {"attrs":[171,110,203], "show":1}, 
   "316" : {"attrs":[166,108,201], "show":0}, 
   "317" : {"attrs":[166,108,202], "show":1}, 
   "318" : {"attrs":[166,108,203], "show":0}, 
   "319" : {"attrs":[166,120,201], "show":1}, 
   "320" : {"attrs":[166,120,202], "show":0}, 
   "321" : {"attrs":[166,120,203], "show":1}, 
   "322" : {"attrs":[166,148,201], "show":0}, 
   "323" : {"attrs":[166,148,202], "show":1}, 
   "324" : {"attrs":[166,148,203], "show":0}, 
   "325" : {"attrs":[166,110,201], "show":1}, 
   "326" : {"attrs":[166,110,202], "show":0}, 
   "327" : {"attrs":[166,110,203], "show":1}, 
   "328" : {"attrs":[165,108,201], "show":0}, 
   "329" : {"attrs":[165,108,202], "show":1}, 
   "330" : {"attrs":[165,108,203], "show":0}, 
   "331" : {"attrs":[165,120,201], "show":1}, 
   "332" : {"attrs":[165,120,202], "show":0}, 
   "333" : {"attrs":[165,120,203], "show":1}, 
   "334" : {"attrs":[165,148,201], "show":0}, 
   "335" : {"attrs":[165,148,202], "show":1}, 
   "336" : {"attrs":[165,148,203], "show":0}, 
   "337" : {"attrs":[165,110,201], "show":1}, 
   "338" : {"attrs":[165,110,202], "show":0}, 
   "339" : {"attrs":[165,110,203], "show":1}
}
</script>

I have two dropdown menus.

1st -> Drop Down Menu (name="optionDrop") has 5 values which are "ABC", "ABCD", "ABCDE", "True or False" and "Yes or No".
2nd -> Drop Down Menu (name="numberDrop") has 5 values which are "","1", "2", "3" and "4".

Now this is what I want to achieve:
If user select "ABC" from "optionDrop", then only display options "", "1" and "2" If user select "ABCD" from "optionDrop", then only display options "", "1", "2" and "3" If user select "ABCDE" from "optionDrop", then only display options "", "1", "2", "3" and "4" If user select "True or False" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part) If user select "Yes or No" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part)
Does anyone know how this can be done and implemented in the javascript code I have?

Below is Javascript Code:

Code:

 function getDropDown() {
         var optionDrop = document.getElementsByName("optionDrop");
        var na = document.getElementById("na");
        var numberDrop = document.getElementsByName("numberDrop");
        var answerA = document.getElementById("answerA");
        var answerB = document.getElementById("answerB");
        var answerC = document.getElementById("answerC");
        var answerD = document.getElementById("answerD");
        var answerE = document.getElementById("answerE");
        var answerTrue = document.getElementById("answerTrue");
        var answerFalse = document.getElementById("answerFalse");
        var answerYes = document.getElementById("answerYes");
        var answerNo = document.getElementById("answerNo");
        
    if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
					numberDrop[0].style.display = "block";
					na.style.display = "none";
		
    }else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){			
	    			numberDrop[0].style.display = "none";
	    			na.style.display = "block";            
            
            }
            }

Htrml code:

Code:

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
    <td>Question:</td> 
    <td rowspan="3">
        <textarea rows="5" cols="40" name="questionText"></textarea>
    </td>
    <td>Option Type:</td> 
    <td>
        <select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
    </td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>

I have a search form and added the "Clear All" Button functionality...but it clears the last part of the search form display preferences....how do I only clear the checkboxes at the top of the form only and not at the bottom of the form between the <DIV> tags?

I have attached a copy of the JSP page.

Hi,

I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now.

The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again?

I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution:

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>

<title>HTML Template</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

function store(element) {

// store values

	var cl = element;
	
	var text_list = new Array();
			
	var value_list = new Array();
	
	var length = cl.length;
	
	for (var foo=0; foo<length; foo++) {
	
		text_list[foo] = cl.options[foo].text;
		
		value_list[foo] = cl.options[foo].value;
		
		alert("text array " + foo + " " + text_list[foo]);
		
		alert("value array " + foo + " " + value_list[foo]);
		
	}
	
	populate(cl, text_list, value_list);

}

function populate(element, text, value) {

	// populate options with previously stored values
	
	var cl = element;
	
	var length = cl.length;

	cl.options.length=0;	
	
	for (var bar=0; bar<length; bar++) {
		
		cl.options[bar]= new Option(text[bar], value[bar], false, false);
		
	}
	
}

function crafty_set_country(code) {	

	var cl = document.getElementById('select');
	
	store(cl);
	
	for (var i=0; i<cl.length; i++) {

		if (cl.options[i].value == code) {

			alert(cl.options[i].value + " found");
			
			var value = cl.options[i].value;
			
			var text = cl.options[i].text;
			
			cl.options.length=0;
			
			cl.options[0]=new Option(text, value, true, true);
			
			/*
			for (var j=0; j<cl.length; j++) {
			
				alert("second loop " + cl.options[j].text);
				
				if (cl.options[i].value != code) {
				
					cl.options[j]
				
				}
			
			}
			*/
			
		} else {
		
		alert(cl.options[i].value);
		
		}
		
	}
	
}

//]]>
</script>

</head>
 
<body>

<form>

<select id="select">
  <option value="10">ten</option>
  <option value="20">twenty</option>
  <option value="30">thirty</option>
  <option value="40">fourty</option>
  <option value="50">fifty</option>
  <option value="60">sixty</option>
</select>

<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">

</form>

</body>
</html>

Many thanks!

Martin

hey guys
The first dropdown has some options as :
abc(a)
bcd(a)
cde(b)
def(b)
efg(c)
fgh(c)
The second dropdown has :
a
b
c
On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance.

Hello, I am completely new to HTML/JS/CSS, therefore I know very little.

I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July".

I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected).

If it matters, I am using IE8. Thanks!

Hi gud mng,

I have one problem...

How to process textbox values/ call textbox values in JS through a Java program.
My text box values are dates. I have to process these dates.

Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database.

My files are look like 20100929, 20100930, 20101001

For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml


Code:


Code:

<html>

<table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0"> 
<tr><td id="leftcolumn" width="170" align="left" valign="top"> 
<div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3> 
<a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br />  <br />
<a rel="nofollow" target="_top" href="between.htm" >Between Days</a> 

<link rel="stylesheet" type="text/css" href="epoch_styles.css" />


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

<script type="text/javascript">

var cal1, cal2;      
window.onload = function () 
{
cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1'));
cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2'));
};

/*............*/
function confirmation(f) 
{
	
	var startdate = f.fromdate.value
        var enddate = f.todate.value
        var myday=new Date()

        var yr=myday.getFullYear()
        var mn=myday.getMonth()+1
        var dt=myday.getDate()

        var today=""
        var present, ys, ms, ds, ye,me,de, start, end
           
        if(mn < 10) {  mn = "0" + mn }

        if(dt <10) { dt = "0" + dt } 
 
        today= yr + "/" + mn + "/" + dt
	
        present=yr + "/" + mn + "/" +dt

                     
        if (today < startdate ) 
           {
            alert (" Start date should not be exceed to-day's date " + present )
            startdate.focus()
            return false
           } 
  
        if (today < enddate )
           {
            alert (" End date should not be exceed to-day's date " + present )
            enddate.focus()
            return false
           }

         

         if (today == startdate ) 
           { 
            alert(" You are selected to-days date as Starting day" );
           

            }
   
        var answer = confirm("Do you want to continue ?")        

        if (answer)
           {    if( startdate < enddate)         
		 alert("Dates between " + startdate + " to " + enddate + " are confirmed" )
		else
                  alert("Dates between " + enddate + " to " + startdate + " are confirmed" )     
	   }
	
        else
           {
		alert("Date not confirmed")
                window.location="to_date.htm"; 
           }

        ys= startdate.substring(0,4);
	ms= startdate.substring(5,7);
	ds= startdate.substring(8,10);

        start=ys + "" + ms + "" +ds          
  
        ye= enddate.substring(0,4);
	me= enddate.substring(5,7);
	de= enddate.substring(8,10);
 
        end=ye + "" + me + "" +de

      
}
/*.......................................................*/
</script>

<div style="margin-left:100px;">


<body>
<style type="text/css">
#conf
{
margin-left:115px;
} 
</style>


<td align="left" valign="top"> 
<table width="100" border="0" cellpadding="0" cellspacing="0"> 
<td style="padding-top:0px"> 
</table>

<h4>From Date</h4>

<form name= "formbet" id="placeholder" method="post" action="#" >
<input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/>


<td align="left" valign="top"> 
<table width="300" border="0" cellpadding="0" cellspacing="0"> 
<td style="padding-top:20px"> 


<h4>To Date</h4>
<input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br />
<input id="conf" type="button" onclick="confirmation(this.form)" value="Submit">
</form>


</body>
</html>

In my coding, ys, ms, ds represents year starting, month starting, starting day...
ye, me, de represents end...

start,end gives file names in the format of yyyymmdd

now i want to process files from 20100101 to 20100930

means from date is 2010/01/01 and to date is 2010/09/30

if i press submit button the files from 20100101 to 20100930 are processes

here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30

For this how do i call these textbox values (from date text box and todate) to another program (java)

Thanks in advance.

If I've declared some functions which include variables(e.g var k), what is the standard javascript code to clear/wipe the memory of these variables so that I may use the same variable names in later divs?

I know it is a weird question and you'd ask why don't you just use a different variable name.

I have a script that sets a cookie for the user selected stylesheet, however I want to be able to clear the cookie it sets. How can this be accomplished?

Code:

//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm

var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.

//////No need to edit beyond here//////////////

function getCookie(Name) { 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toUTCString()+"; path=/";
}

function deleteCookie(name){
setCookie(name, "moot")
}


function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}

function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}

if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
} 
}

Hello, I am fairly new to javascript and am having trouble clearing a text field. I am making a "vending machine simulator" as an exercise. I have a button that is the coin return, and should clear the balance display. e.g the machine shows a balance of $2 inserted, the coin return button should clear it to 0.

I believe I have done everything correctly but get NaN as the output (a text field named "box1"). I believe it has something to do with how the field is validated. It has number precision set to 2, which I would think would just become 0.00 or something. Anyways, here is my code:

HTML:

Code:

<input class="money" id="coinreturn" type="button" value="return" onClick="coinReturn()" />
<input name="box1" id="box1" onkeypress="return numbersonly(this, event)" maxlength="4" type="text"/>

JavaScript for the coinReturn function:


Code:

function coinReturn()
{
	document.getElementById('box1').value = 0;
}

JavaScript for the "numbers only" validation:

Code:

function numbersonly(myfield, e, dec)
{
	var key;
	var keychar;

	if (window.event)
	{
	   key = window.event.keyCode;
	}
	else if (e)
	{
	   key = e.which;
	}
	else
	{
	   return true;
	}

	keychar = String.fromCharCode(key);

	// control keys
	if ((key==null) || (key==0) || (key==8) || 
		(key==9) || (key==13) || (key==27) )
	{
	   return true;
	}
	// numbers
	else if ((("0123456789.").indexOf(keychar) > -1))
	{
	   return true;
	}

}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<script type="javascript/text">
			<!--
				function clearInputField( input, def )
					input = document.getElementById( input );
					if ( input.value == def ) {
						input.value = '';
					}
				
				}
			-->
		</script>
	</head>
	<body>
		<b>Testing Input</b>
		<input id="input" onclick="JavaScript: clearInputField('input', 'Enter Text');" type="text" size="31" value="Enter Text"  />
	<body>
</html>

This gives me a "Uncaught ReferenceError: clearInputField is not defined" error and I'm not sure why...?

I am looking for a javascript that when a image is clicked on it clears a textarea