JavaScript - Form Clear/autofill
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. Similar TutorialsI 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 guys, I have a simple calculator on my website which has a few options selectable by radio buttons. When the user adds selections - the total price of their order is automatically calculated and displayed in a <div> for them to see. The client then can deselect options or add according to their budget. The code which deals with this is as follows (just sections of it but you get the point ....) In the <HEAD> Code: <script type = "text/javascript"> var allprices = []; var index = 0; function chkrads(frmName,rbGroupName) { var chosen = ""; var radios = document[frmName].elements[rbGroupName]; for (var i=0; i <radios.length; i++) { if (radios[i].checked) { chosen = radios[i].value; } } if (chosen == 0) {printprice = 0} if (chosen == 1) {printprice = 99} if (chosen == 2) {printprice = 150} if (chosen == 3) {printprice = 250} if (chosen == 21) {printprice = 200} if (chosen == 22) {printprice = 300} if (chosen == 30) {printprice = 50} if (chosen == 41) {printprice = 50} if (chosen == 42) {printprice = 70} if (chosen == 43) {printprice = 90} if (rbGroupName == "size") {index = 0} if (rbGroupName == "colour") {index = 1} if (rbGroupName == "frame") {index = 2} if (rbGroupName == "glass") {index = 3} if (rbGroupName == "hook") {index = 4} if (rbGroupName == "delivery") {index = 5} allprices[index] = printprice; var totalprice = 0; for (var i =0; i <allprices.length; i++) { if (!isNaN(allprices[i])) { totalprice = totalprice + allprices[i]; } } document.getElementById("result").style.display = "block"; document.getElementById("result").innerHTML = totalprice; } </script> Then in the <BODY> Code: <form name= "myform" style="font-size:11px; font-family:Arial, Helvetica, sans-serif;"> <input type = "radio" name = "size" value = "0" onclick = "chkrads('myform', 'size')"> <b>0</b> <input type = "radio" name = "size" value = "1" onclick = "chkrads('myform', 'size')"> <b>1</b> <input type = "radio" name = "size" value = "2" onclick = "chkrads('myform', 'size')"> <b>2</b> <input type = "radio" name = "size" value = "3" onclick = "chkrads('myform', 'size')"> <b>3</b> <br /><br /><br /><br /> <input type = "radio" name = "colour" value = "0" onclick = "chkrads('myform', 'colour')"><b>No</b> <input type = "radio" name = "colour" value = "21" onclick = "chkrads('myform', 'colour')"><b>black</b> <input type = "radio" name = "colour" value = "22" onclick = "chkrads('myform', 'colour')"><b>Multi Colour</b> <br /><br /><br /><br /> <input type = "radio" name = "frame" value = "0" onclick = "chkrads('myform', 'logo')"><b>No</b> <input type = "radio" name = "frame" value = "30" onclick = "chkrads('myform', 'logo')"><b>Yes</b> <br /><br /><br /><br /> <input type = "radio" name = "glass" value = "0" onclick = "chkrads('myform', 'glass')"><b>No</b> <input type = "radio" name = "glass" value = "51" onclick = "chkrads('myform', 'glass')"><b>Yes</b> <br /><br /><br /><br /> <input type = "radio" name = "hook" value = "0" onclick = "chkrads('myform', 'hook')"><b>0</b> <input type = "radio" name = "hook" value = "41" onclick = "chkrads('myform', 'hook')"><b>1</b> <input type = "radio" name = "hook" value = "42" onclick = "chkrads('myform', 'hook')"><b>2</b> <input type = "radio" name = "hook" value = "43" onclick = "chkrads('myform', 'hook')"><b>3</b> <br /><br /><br /><br /> <input type = "radio" name = "delivery" value = "0" onclick = "chkrads('myform', 'delivery')"><b>No</b> <input type = "radio" name = "delivery" value = "61" onclick = "chkrads('myform', 'delivery')"><b>Yes</b> </form> This all calculates the cost and then supplies the answer into this code: Code: <div id="result" style="display:none;"><strong></strong> <span id="totalprice"></span> </div> This all works exactly as I want - my question is this .... I have added an HTML contact form at the bottom of the page which goes off to a Form2Email PHP script. (All working fine) I really want to autofill one of the sections of this form "QUOTED PRICE" with the value calculated by my earlier product calculator. The form looks like so: Code: <form id="ContactForm" method="post" action="FormToEmail.php" class="input2"> <label>Name: <input name="name" type="text" id="name" value="" size="" maxlength="80" class="input"/></label> <br /><br /> <label>QUOTED PRICE: <input name="QUOTED PRICE" type="text" id="QUOTED PRICE" value="" size="" maxlength="80" class="input"/></label> <br /><br /> <label> <input type="submit" class="submit" name="submit" id="submit" value="submit"/> </label> </form> Does anyone know how to achieve this?! It would be a massive help! 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 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 So I'm working on an autofill program for a site. What it does is it takes info from a form thats on MY site then it places that info into a form on another site. So my problem is that it won't to any of that. I know the autofill by itself works because I've tested it. I think that maybe my form doesn't know where in the autofill to place the info... My form: Code: <form name="logindetails" method="post"> <input type="text" name="email" value="Email Address" /> <input type="password" name="combination" value="Combination" /> <input type="submit" value="Submit" onclick="logindetails()"> Autofill script: Code: <script type="text/javascript"> function logindetails() { var values = ["email", "password", "password"]; $("input").each(function(i){ $(this).val(values[i]); }); document.getElementById("recaptcha_response_field" ).focus(); } </script> I am trying to autofill a box by clicking a link (with return false). The function to autofill works with button tag but not in anchor tag - instead of returning false, the click event transitions to the href. Here is the simplified code. Any help is appreciated.Thanks <!DOCTYPE html PUBLIC"-// W3C//DTD Xhtml 1.0 Strict//EN"" http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Untitled Page </title> </head> <script type="text/javascript"> function autofill(frm){ frm.box2.value = 'sample_value'; } </script> <body> <FORM NAME="browse" ACTION="<TMPL_VAR MYURL>/browse_results"> <font size="5"> <b>FIND </b> </font> <hr> <div class="menu" id="find_block"> <ul> <li> <a href="#">DOMAINS </a> <ul> <li> <a href="#1" onclick="alert('Heading Home!'); return false;">1. alert with link </a> </li> <li> <a href="#2" onClick="autofill2(this.form); return false;">2. autofill with link </a> </li> </ul> </li> </ul> <input readOnly name="box2"/> <INPUT TYPE=BUTTON OnClick="autofill(this.form,'2')" VALUE="autofill with button "> </div> <br> <font size="5"> <b>WHERE </b> </font> <hr> </FORM> </body> </html> I've recently downloaded this Firefox plugin: https://addons.mozilla.org/en-US/fir...utofill-forms/ It has a feature called dynamic tags which do the following functions using Javascript: <datetime> new Date().toLocaleString() <useragent> navigator.userAgent <langcode> navigator.language <resolution> screen.width+'x'+screen.height <clipboard> this.getClipboardText() I was wondering if a JavaScript code exists that could get the value of "nation=" for links like the one below [url]http://m.nationstates.net/?nation=NATION_NAME_GOES_HERE Any help would be appreciated and if I'm off my rocker feel free to tell me so I'm using the autofill forms plugin for firefox which can be found he https://addons.mozilla.org/en-US/firefox/addon/4775 I use it to automatically fill various web forms, duh. But I would like certain values to be chosend randomly from a list I create. I contacted the developer and he said the add on probably does not need a new feature because there is a 'dynamic tags' function to fill certain forms with dynamic values (e.g. the current time or date). He has given over the project to another developer and told me I probably would find a solution in a good javascript programming forum. So here I am! Can anyone help me with this? Basically, I just need a javascript code which chooses on item from an array randomly, I guess? I'm not a programmer myself, so any help would be greatly (!) appreciated. Thanks a lot in advance for any further guidance! Note: Here are sample dynamic tags from the plugin: <datetime> new Date().toLocaleString() <useragent> navigator.userAgent <langcode> navigator.language <resolution> screen.width+'x'+screen.height <clipboard> this.getClipboardText() 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. 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 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 } } I am looking for a javascript that when a image is clicked on it clears a textarea
I dont know if this is a coding or browser based issue (FF 3.6) but when i click on a input box i want it to clear its current default value, that works, but when i refresh my browser the default value doesn't come back, here's what i have. Code: function clearMe(theText) { if (theText.value == theText.defaultValue) { theText.value = "" } } <input type="text" name="searchBar" id="searchBar" value="Search Here" onblur="restoreMe(this)" onclick="clearMe(this)" /> Anyone able to help me sort this? 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...? Hey, I currently have an input box which submits my input box value to php script with a bit of JS: Code: <input type="text" class="cssShoutForm" name="sbText" onSubmit="this.disabled=true; shoutIt()"> <input type="button" name="Shout" value="Submit" class="cssShoutButton" onClick="this.disabled=true; shoutIt()"> Now when a use clicks the submit button and submits the text - input box clears which is perfect but if a user hits enter the value stays in the input box which is a pain cos you have to delete it to type in the next line. Why is this? This is my JS: Code: function shoutIt() { document.fShout.admin.value = ""; document.fShout.submit(); setTimeout("document.fShout.sbText.value=''", 1000); setTimeout("document.fShout.Shout.disabled=false", 1000); } How can i get it to also clear on a user hitting enter? <------------------------- -edit- Nevermind <------------------------- Functions: O_o Code: function write_client_data() { clearLine(); var msg = document.getElementById("textbar").value; msg = document.getElementById("hide").value + " says: " + msg; var url = "process.php"; var uri = "msg=" + msg; ajax1.open("GET", url + "?" + uri, true) ajax1.send(null); } function check_log_size() { var myform = document.getElementById("form1"); var input = myform.elements["size"]; var val = input.getAttribute("value"); var url = "size.php"; var uri = "sz=" + val; ajax3.open("GET", url + "?" + uri, true); ajax3.onreadystatechange = function() { if(ajax3.readyState == 4 && ajax3.status == 200) { if(ajax3.responseText == false) { } else if(ajax3.responseText == true) { updateChat(); get_initial_size(); } } } ajax3.send(null); } function get_initial_size() { var url = "init.php"; ajax4.open("GET", url, true); ajax4.onreadystatechange = function() { if(ajax4.readyState == 4 && ajax4.status == 200) { var myform = document.getElementById("form1"); var input = myform.elements["size"]; input.setAttribute("value", ajax4.responseText); } } ajax4.send(null); } function updateChat() { var url = "update.php"; ajax5.open("GET", url, true); ajax5.onreadystatechange = function() { if(ajax5.readyState == 4 && ajax5.status == 200) { var newmsg = ajax5.responseText; var box = document.getElementsByTagName("div").item(1); box.innerHTML += "<p>" + newmsg + "</p>"; scroller(); } } ajax5.send(null); } function scroller() { var container = document.getElementById("chatbox"); var maxTop = container.scrollHeight - container.clientHeight; var aoe = container.scrollHeight - container.clientHeight - 150; if(container.scrollTop < aoe) { //what should I do here? O_o } else container.scrollTop = maxTop; } function clearLine() { var myForm = document.getElementById("form1"); var element = myForm.elements["textbar"]; element.setAttribute("value", ""); } Chat page: Code: <?php include_once('globals.php'); session_start(); if(empty($_SESSION['user'])) { echo 'YOU ARE NOT AUTHORIZED'.'<br /><br />'.'<a href = "login.php" /> Click here To login </a>'.'<br />'."$www"; exit(); } ?> <!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>ChatRoom v1</title> <link rel="stylesheet" type="text/css" href= "css/chat.css" /> <script type="text/javascript" src="js/client.js"></script> <script type="text/javascript"> get_initial_size(); setInterval("check_log_size()", 1000); </script> </head> <body bgcolor="#CCCCFF" > <form action="logout.php" method="post" name="form2" id="form2"> <input name="logout" type="submit" id="logout" value="Logout Now" /> </form> <h1 style="color:#CCCCFF"> POSITION </h1> <h1 style="color:#CCCCFF"> POSITION </h1> <h1 style="margin-left:670px"> Chatroom v1.0 </h1> <div id="pos">.</div> <div id = "chatbox"> </div> <div id = "users"><em>Users Online:</em></div> <div align="center"> <form id="form1" name = "form1" method="post" action="#"> <br /><input name="textbar" id="textbar" type="text" value="" size="60" /> <br /><input type="button" name = "snd" id="snd" value="Send Message" onclick="write_client_data();" /> <input name="size" type="text" id="size" value = "" /> <input type="hidden" id="hide" name="hide" value="<?php echo $_SESSION['user'] ?>" /> </form> </div> </body> </html> Why doesn't my clearLine function work. I tried several different ways to access but it won't clear the textbar. Anyone see anything wrong? ;o 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 /> 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 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? |