JavaScript - Can't Clear Textbar Of Input

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.

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.

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

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 />

I have two select lists.

Morning
Code:

<tr valign="top">
        <td align="right">Morning:</td>
        <td><select name="wcsave_09_msession" id="wcsave_09_msession" size="1" onblur="CheckField(this.form,this,'');" onchange="display1(this,'Mastery sesson 1','Concurrent sessons 1-6');">
        <option value="" selected="selected">Choose one</option>
        <option value="Mastery sesson 1">Mastery sesson #1</option>
        <option value="Concurrent sessons 1-6">Concurrent sessons #1-#6</option>
        </select>
        </td>
        </tr>

Afternoon:
Code:

 <tr valign="top">
            <td align="right">Afternoon:</td>
            <td><select name="wcsave_09_asession" id="wcsave_09_asession" size="1" onblur="CheckField(this.form,this,'');" onchange="display2(this,'Mastery sesson 2','Concurrent sessons 7-12');"><!--showDiv(this.value)-->
            <option value="" selected="selected">Choose one</option>
            <option value="Mastery sesson 2">Mastery sesson #2</option>
            <option value="Concurrent sessons 7-12">Concurrent sessons #7-#12</option>
            </select>
            </td>
            </tr>

In each list depending on what option is chosen, a corresponding div will show with select lists.

Morning div:
Code:

<div id="Mastery sesson 1" style="display: none;">
						<table class="special">
              <tr valign="top">
              <td>(9:15 a.m. - 10:15 a.m.)<br /><select name="wcsave_10_session_mmastery" id="wcsave_10_session_mmastery">
              <option value="" selected="selected">Choose one</option>
              <option value="Mastery session #1 - Computer Lab: Searching Essentials"><strong>Mastery session #1</strong> - Computer Lab: Searching Essentials</option>
               </select>
               </td>
               </tr>
              </table>
            </div>
						<div id="Concurrent sessons 1-6" style="display: none;">
              <table class="special">
                <tr valign="top">
                <td>Choose a session for each time slot.<br />
                (9:15 a.m. - 10:15 a.m.)<br /><select name="wcsave_10_session_mconc1" id="wcsave_10_session_mconc1" onchange="toggleSelect();">
                <option value="" selected="selected">Choose one</option>
                <option value="Concurrent session #1 - IRB 101 for Research Nurses">Concurrent session #1 - IRB 101 for Research Nurses</option>
                 <option value="Concurrent session #2 - A Research Poster Contest as a Tool to Learn About Research/EBP">Concurrent session #2 - A Research Poster Contest as a Tool to Learn About Research/EBP</option>
                 <option value="Concurrent session #3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature">Concurrent session #3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature</option>
                 </select>
                 </td>
                 </tr>
                 <tr valign="top">
                <td>(10:30 a.m. - 11:30 a.m.)<br /><select name="wcsave_10_session_mconc2" id="wcsave_10_session_mconc2" onchange="toggleSelect();">
                <option value="" selected="selected">Choose one</option>
                <option value="Concurrent session #4 - IRB 101 for Research Nurses">Concurrent session #4 - Making Sense of Statistics When Reading Research</option>
                 <option value="Concurrent session #5 - Original Research Presentations">Concurrent session #5 - <em>Original Research Presentations</em></option>
                 <option value="Concurrent session #6 - IRB Considerations with Vulnerable Populations">Concurrent session #6 - IRB Considerations with Vulnerable Populations</option>
                 </select>
                 </td>
                 </tr>
               </table>
              </div>

Afternoon div:

Code:

<div id="Mastery sesson 2" style="display: none;">
							<table class="special">
                <tr valign="top">
                <td>(1:45 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_mmastery" id="wcsave_10_session_mmastery">
                <option value="" selected="selected">Choose one</option>
               <option value="Mastery session #2 - Beyond the Basics of Searching!"><strong>Mastery session #2</strong> - Beyond the Basics of Searching!</option>
                 </select>
                 </td>
                 </tr>
                </table>
              </div>
              <div id="Concurrent sessons 7-12" class="hiddenDiv">
                <table class="special">
                  <tr valign="top">
                  <td>Choose a session for each time slot.<br />
                  (1:45 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_aconc1" id="wcsave_10_session_aconc1" onchange="toggleSelect();">
                  <option value="" selected="selected">Choose one</option>
                 <option value="" selected="selected">Choose one</option>
                  <option value="Concurrent session #7 - EBP Protocols">Concurrent session #7 - EBP Protocols</option>
                   <option value="Concurrent session #8 - Writing for Publication">Concurrent session #8 - Writing for Publication</option>
                   <option value="Concurrent session #9 - Original Research Presentations">Concurrent session #9 - Original Research Presentations</option>
                   </select>
                   </td>
                   </tr>
                   <tr valign="top">
                  <td>(3:00 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_aconc2" id="wcsave_10_session_aconc2" onchange="toggleSelect();">
                  <option value="" selected="selected">Choose one</option>
                  <option value="Concurrent session #10 - Writing a Research Question Using PICO">Concurrent session #10 - Writing a Research Question Using PICO</option>
                   <option value="Concurrent session #11 - EBP Project Presentations">Concurrent session #11 - EBP Project Presentations</option>
                   <option value="Concurrent session #12 - The Role of the Research Facilitator">Concurrent session #12 - The Role of the Research Facilitators</option>
                   </select>
                   </td>
                   </tr>
                 </table>
                </div>

Once two options are chosen in the divs, the Afternoon or Morning becomes disabled.
Code:

function toggleSelect() {
	var selBox0 = document.getElementById('wcsave_10_session_mconc1');
	 var selBox1 = document.getElementById('wcsave_10_session_mconc2');
	  var selBox2 = document.getElementById('wcsave_09_msession');
	 var selBox3 = document.getElementById('wcsave_10_session_aconc1');
	 var selBox4 = document.getElementById('wcsave_10_session_aconc2');	
	 var selBox5 = document.getElementById('wcsave_09_asession');

	if ((selBox0.selectedIndex !=0) && (selBox1.selectedIndex !=0)) {selBox5.disabled = true;} else {selBox5.disabled = false;}
	if ((selBox3.selectedIndex !=0) && (selBox4.selectedIndex !=0)) {selBox2.disabled = true;} else {selBox2.disabled = false;}
}

Here is the code to show/hide the divs:
Code:

function display1(obj,id1,id2) {
	var selBox0 = document.getElementById('wcsave_10_session_mconc1');
	 var selBox1 = document.getElementById('wcsave_10_session_mconc2');
	  var selBox2 = document.getElementById('wcsave_09_msession');
	 var selBox3 = document.getElementById('wcsave_10_session_aconc1');
	 var selBox4 = document.getElementById('wcsave_10_session_aconc2');	
	 var selBox5 = document.getElementById('wcsave_09_asession');
var txt = obj.options[obj.selectedIndex].value;

document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {document.getElementById(id1).style.display = 'block';}
if ( txt.match(id2) ) {document.getElementById(id2).style.display = 'block';}
}

function display2(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {document.getElementById(id1).style.display = 'block';}
if ( txt.match(id2) ) {document.getElementById(id2).style.display = 'block';}
}

What I want to do is set the sub div dropdown selectedIndex == 0 when Morning or Afternoon is set to Choose one. In essence clearing the values when the div is hidden so the other fields are no longer disabled.

Any ideas?

Hello,
i Have problem about clear value when ppl input data on text field
Any idea?

Code:

 
<form action="http://www.packagetrackr.com/track/" method="get" name="track" target="_blank">
<div class="form-field-error-message hidden" style="display: none; ">
<div class="CommonEmptyTrackingNumber"></div>
</div>

<div id="track-form-tracking-number-container">
  <div id="track-form-tracking-number-inner-container" class="track-form-control-boxer"><input id="track-form-tracking-number" class="track-form-element " type="text" name="n" value="Type a tracking number" title="Type a tracking number..." onFocus="if(/^Type a tracking number...$/i.test(this.value)){this.value='';}" onBlur="if(this.value==''){this.value='Type a tracking number...';}">
  <input value="Track!" name="submit" type="submit" title="Track your package" class="track-form-submit-button sprite-master">
</div>
</div>
<div id="track-form-jss-carrier-container" class="hidden" style="z-index: 1000; display: none; ">
<div id="track-form-jss-carrier-content">
<label id="jss-carrier-auto" class="track-form-jss-carrier-label jss-carrier-label">
<input id="jss-carrier-auto-value" value="" type="radio" name="c" checked="checked"> <span>Auto Detect Carrier</span>
</label>
</div>
</div>
</form>

Hey guys

Not sure how to get this done, but i have a webpage that opens up and on that page i have 2 frames (TOP frame, and BOTTOM frame). On the top frame, i have a webpage that loads with a users information and multiple check-boxes checked. On the bottom frame, i want to have a form that contains ONE button (lets say CLEAR) that clears all the information from the form on the TOP frame.

Note: I do not have ability to edit the webpage in the TOP frame. The web page is a company website and I am one of the IT people here but not dealing with websites. I was just put in charge of going to over 350 peoples pages and clearing everything on that page manually, so I want to create a script/page that loads the page that i needs, but EITHER clears the form and un-checks all the check-boxes, or a button that i press to do so.

Help please