JavaScript - Clear Input Box Issue

I have an ajax dependent drop down set up for location fields and am having trouble figuring out how to clear the dependent selects if the parent select is changed to blank.

I set up a function to clearFields:
Code:

<script>
function clearFields() {
 document.getElementById('cb_state').value = "";
}
</script>

And then set the parent to clearFields onchange:
Code:

onchange='ajaxFunction();clearFields();'

This doesn't clear the field, but even if it did it would clear the field on change regardless of what's selected, what I need is for the function to fire only if the blank option is selected.

How do I need to go about this?

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 have a registration form with the following input field:
textbox -name
textbox -surname
textbox -phone
listbox - country
listbox - state

Am populating my country & state listbox from my database, state depends on the country.
However when i select my country&state the page refreshes & all my other values i.e name, surname, phone & others disappears i have to retype all again, any suggestion?
thanks

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 problem with adding new inputs to a form (if and when required),

Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank.

JS:
Code:

fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}

form:
Code:

<form action="index.php" method="post">
<div id="input">
  <input type="text" name="input[]" size="30" maxlength="15" />
</div>

<!-- button -->
<div id="more">
  <input type="button" onclick="addInput()" name="add" value="More" />
</div>
<!-- // button -->

 <input type="submit" name="submit" value="Submit" />

 </form>

as usual any help is appretiated ..

I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url.
I am also assuming this can be accomplished with javascript.

Any help is greatly appreciated.

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;
	}

}

I've got a checkbox that, when clicked, displays new text inputs. However, when I "uncheck" the box, the fields don't disappear unless I reload the entire page. What code can I add to reset the box to null when it is unchecked?

Here's the function code I have:
Code:

<script>
function showUserReg() {
	document.getElementById("userReg").style.display = "inline";
		}
</script>

And here's the inline code:
Code:

<input type="checkbox" name="additional" value="userRegister" onclick="showUserReg()"/> Yes! Register me now!<br/>

<span id = "userReg" style="display:none">
<table class="nobord" align="center">
<tr>
<td>Choose a username:</td>
<td><input type="text" name="username" size="35"/></td>
</tr>
<tr>
<td>Choose a password:</td>
<td><input type="password" name="password" size="35" maxlength="20"/></td>
</tr>
<tr>
<td>Confirm password:<font color="red">*</font></td>
<td><input type="password" name="password" size="35" maxlength="20"/></td>
</tr>
</table>		
</span>

Thanks for any help.

I have a simple script connect to a radio button. Based on which option, the matching div appears with a text box - and one with a radio button. If they change their mind and click another radio button, it'll switch to the new div, but keep the content in the old. How do I clear that out?

I looked for a snippet, but they're all for clearing default text in a field when you click it. I want something a little different.

Here's what I'm using:

Code:

<script>
$(document).ready(function() {
    $("div.desc").hide();
    $("input[name$='hear']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#" + test).show();
    });
});


</script>

<input type="radio" name="hear" value="dcranch"> DC Ranch Community <br />
<input type="radio" name="hear" value="friend"> From a friend <br />


<div style="display: none;" id="dcranch" class="desc"> <input type="checkbox" value="Yes" name="resident" /> If so, are you a DC Ranch resident? )</div><br />	
<div style="display: none;" id="friend" class="desc"> Name? <input type="text" name="how1" /></div><br />

Hi there,

I was searching for a way to clear the text from my form boxes upon clicking. Well, I was able to find a script for that. However, I also want these boxes to input the original text if a user clicks in and then clicks out without putting any of his own text in.

For example, it says:

Email Address (onclick = nothing), but if you don't input any data and click out of the box, I want it to say Email Address again.

You can see the site at http://officiallymanaged.com/mayhem and if you would like for me to paste the code here, I can.

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

Hey,

I've created a form whereby there are four bars of different chocolates. Each time the user clicks the button with the name of the chocolate on it, a running total is shown. I would like to make a clear button for this and have wrapped the buttons in <formarea> tags and defined a name, however this is still not what I would like. The code for the buttons are as follows (without showing my attempt of the clear button, as this was a total mess):

Code:

</script>
</head>
<body onload="chocPrice()">
<h1>Prices of Chocolate</h1>
<br /><br />
<input type="button" id="btnMars" value="Mars" onclick="chocPrice(0)">
<br/>
<input type="button" id="btnSnickers" value="Snickers" onclick="chocPrice(1)">
<br/>
<input type="button" id="btnBounty" value="Bounty" onclick="chocPrice(2)">
<br/>
<input type="button" id="btnYorkie" value="Yorkie" onclick= "chocPrice(3)">
<br/>
<input type="text" id="Val" value="">
<br/>
<p>Total: </p><p id="Total">0</p>	
</body>
</html>

Many Thanks

Hi, basically it's a simple postcode validator.

It checks to see whether the postcode is in UK format, then tells you if it isn't with an alert box, then I want it to clear the field. The input field's ID is postcode.

Code:

function testPostCode () {
	var myPostCode = document.getElementById('postcode').value;
	if (checkPostCode (myPostCode)) {
    document.getElementById('postcode').value = checkPostCode (myPostCode)
	} 
	else {alert ("Please enter your Postcode correctly, this includes:\n \n * Correct Spacing - AA1 1AA \n * Correct amount of letters and numbers. \n \n Sorry if this causes any inconvenience, but it is to your benefit.")};
	document.postcode.value="";
	}

Anyone able to help me?

I am fairly new to javascript and am attempting to create a function that will clear one checkbox when another is checked. I have multiple forms with dynamically generated names on the page.
Here is what I have:

<script type="text/javascript">
function undo_Complete(myForm)
{
var formName = myForm.name;
if(document.formName.getElementsByName("Needs_Change").checked==true)
{
document.formName.getElementsByName("Complete").checked=false;
}
}
</script>

The two checkbox fields involved:
<input name="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox">
<input name="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete(this.form)">

Could someone please tell me what I am doing wrong?

Thank you!
Lisa