JavaScript - Show Default Text When Checked
Hi,
my code below shows 2 radio buttons, when you click on one, it shows the content from a div, I would like to show the content of the checked radio button by default, at teh moment, they don't show any content until they are clicked! Code: <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name$='group1']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#"+test).show(); }); }); </script> </head> <body> <input type="radio" name="group1" value="AvailableMon" checked>Available <input type="radio" name="group1" value="Unavailable">Unavailable <style type="text/css"> .desc { display: none; } </style> <div id="AvailableMon" class="desc">Available</div> <div id="Unavailable" class="desc">Unavailable</div> </body> </html> Similar TutorialsHi I am very new to Javascript and I was wondering if anyone could help. This is my jQuery code: Code: $(document).ready(function(){ if("input.cf_flt:checked") { $(".filterbox").show() } else { $(".filterbox").hide() } $(".filtertoggle").click(function() { $(this).next(".filterbox").slideToggle(500); }); }); HTML (sorry, quite a lot) Code: <h3 class="filtertoggle">Filter These Results <span>Click Here</span></h3> <div class="filterbox"> <form name="cf_form" action="index.php" method="get" class="cf_form topfilter"> <div class="cf_flt_wrapper"> <div class="cf_flt_header" id="cfhead_0"> Grape </div> <div class="cf_wrapper_inner" id="cf_wrapper_inner_0"> <ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_17[0]=50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61&option=com_customfilters&view=products';" type="checkbox" name="custom_f_17[]"class="cf_flt" id="flt_50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61" value="50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61" /><label class="" for="flt_50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61"><a href="/eden/index.php?custom_f_17[0]=50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61&option=com_customfilters&view=products" class="cf_option ">Procanico, Verdello, Grechetto, Malvasia Toscana</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_17[0]=53616e67696f76657365&option=com_customfilters&view=products';" type="checkbox" name="custom_f_17[]"class="cf_flt" id="flt_53616e67696f76657365" value="53616e67696f76657365" /><label class="" for="flt_53616e67696f76657365"><a href="/eden/index.php?custom_f_17[0]=53616e67696f76657365&option=com_customfilters&view=products" class="cf_option ">Sangiovese</a></label></li></ul> </div> </div> <div class="cf_flt_wrapper"> <div class="cf_flt_header" id="cfhead_1"> Bottle Size </div> <div class="cf_wrapper_inner" id="cf_wrapper_inner_1"> <ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_18[0]=3735636c&option=com_customfilters&view=products';" type="checkbox" name="custom_f_18[]"class="cf_flt" id="flt_3735636c" value="3735636c" /><label class="" for="flt_3735636c"><a href="/eden/index.php?custom_f_18[0]=3735636c&option=com_customfilters&view=products" class="cf_option ">75cl</a></label></li></ul> </div> </div> <div class="cf_flt_wrapper"> <div class="cf_flt_header" id="cfhead_2"> ABV </div> <div class="cf_wrapper_inner" id="cf_wrapper_inner_2"> <ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_16[0]=31322e3525&option=com_customfilters&view=products';" type="checkbox" name="custom_f_16[]"class="cf_flt" id="flt_31322e3525" value="31322e3525" /><label class="" for="flt_31322e3525"><a href="/eden/index.php?custom_f_16[0]=31322e3525&option=com_customfilters&view=products" class="cf_option ">12.5%</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_16[0]=313325&option=com_customfilters&view=products';" type="checkbox" name="custom_f_16[]"class="cf_flt" id="flt_313325" value="313325" /><label class="" for="flt_313325"><a href="/eden/index.php?custom_f_16[0]=313325&option=com_customfilters&view=products" class="cf_option ">13%</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_16[0]=31332e3525&option=com_customfilters&view=products';" type="checkbox" name="custom_f_16[]"class="cf_flt" id="flt_31332e3525" value="31332e3525" /><label class="" for="flt_31332e3525"><a href="/eden/index.php?custom_f_16[0]=31332e3525&option=com_customfilters&view=products" class="cf_option ">13.5%</a></label></li></ul> </div> </div> <div class="cf_flt_wrapper"> <div class="cf_flt_header" id="cfhead_3"> Vintage </div> <div class="cf_wrapper_inner" id="cf_wrapper_inner_3"> <ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_15[0]=32303038&option=com_customfilters&view=products';" type="checkbox" name="custom_f_15[]"class="cf_flt" id="flt_32303038" value="32303038" /><label class="" for="flt_32303038"><a href="/eden/index.php?custom_f_15[0]=32303038&option=com_customfilters&view=products" class="cf_option ">2008</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_15[0]=32303130&option=com_customfilters&view=products';" type="checkbox" name="custom_f_15[]"class="cf_flt" id="flt_32303130" value="32303130" /><label class="" for="flt_32303130"><a href="/eden/index.php?custom_f_15[0]=32303130&option=com_customfilters&view=products" class="cf_option ">2010</a></label></li></ul> </div> </div> <input type="hidden" name="option" value="com_customfilters" /> <input type="hidden" name="view" value="products" /> </form> </div> Basically if the checkbox with a class of cf_flt is checked then I want the div '.filterbox' to show. if the checkbox is unchecked then I want it to hide. As well as this I have a toggle button called '.filtertoggle' which toggles the '.filterbox' At the moment the '.filterbox' shows regardless of whether or not the checkbox is checked. The toggle button works correctly. If you know how to fix this then I would be very grateful. Thank you. I've not really an idea how to do this. I know how to do it in PHP, but I need it dynamic <input type="checkbox" name="facebook" value="1" /> if($_POST['facebook'] == 1) echo "<input type='text' name='facebook_url' />"; Could someone tell me how I should do this. Thanks. display text depending dropdown Hey! I am creating a new function for my website which will make it very nice I believe. But since I am no good at javascript I have got quite stuck here but I don't think it's that hard afterall. Actually I'm not completely sure if javascript is needed but please lead me in the right direction here, I'm lost. What I want to make is depending what checkboxes the visitor choose and then click "Search" he will get a certain result which is categoried under these checkboxes. I don't know what else to say but I hope you get an idea of what I mean, if not please ask and I'll try explain it better. Thankful for your help How do I show the default icon for pdf, doc, etc... else show the image? Code: Show the default icon for pdf, doc, etc... else show image. Default icon: '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' + The image: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' + Attempted javascript onError but only certain browsers support that or it's my code. Code: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' + Any ideas? what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings? I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default.. can u suggest alternative logic and its code to implement the same?? Is there a way to change the text from OK to CLOSE on an alert box ?
Newbie here. I could not find the syntax how to set initial value he Code: var indat = window.clipboardData.getData ("Text"); . . . . . <input type="text" name="q" value="xxxxxx" size="40" /> I would like the value to be the indat var value I saw lot of samples with value="xxxxx" (hard coded value) but could not find sample for var value thanks for help !! I need to clear the default value from a textarea when a user clicks on the textarea and then replace it if the user clicks away from the textarea without modifying it. I have managed to accomplish this with the textfields in my forms but I am struggling to get the textarea element to mimic this behavior. Here is the script I am using: Code: addEvent(window, 'load', init, false); function init() { var formInputs = document.getElementsByTagName('input'); for (var i = 0; i < formInputs.length; i++) { var theInput = formInputs[i]; if (theInput.type == 'text' && theInput.className.match(/\binput\b/)) { /* Add event handlers */ addEvent(theInput, 'focus', inputText, false); addEvent(theInput, 'blur', replaceDefaultText, false); /* Save the current value */ if (theInput.value != '') { theInput.defaultText = theInput.value; } } } } function inputText(e) { var target = window.event ? window.event.srcElement : e ? e.target : null; if (!target) return; if (target.value == target.defaultText) { target.value = ''; } } function replaceDefaultText(e) { var target = window.event ? window.event.srcElement : e ? e.target : null; if (!target) return; if (target.value == '' && target.defaultText) { target.value = target.defaultText; } } HTML: [HTML] <form action="#"> <fieldset> <legend></legend> <input type="text" value="Your Name" id="name" class="input" /> <label for="name">Name Required</label><br/> <input type="text" value="Your Email" id="email" class="input"/> <label for="email">E-mail Required</label><br/> <input type="text" value="Your Website" id="website" class="input"/> <label for="website">Website</label> <textarea rows="15" cols="71">Your Message Goes Here.</textarea> <input type="submit" value="Submit Comment" class="button" /> </fieldset> </form> [/HTML] I am really just trying to get this form to behave the way all other forms on the internet work- where text clears when a user clicks on a form element and replaces itself if the user doesn't enter new text. I have it working on the text field but no the textarea. Help! Hi, I'd like to use the jQuery validation plugin as seen on the following example: http://docs.jquery.com/Plugins/validation#Example But it doesn't work properly if I use inline/in-filed labels. Any help is appreciated! Rain Lover Hi need a bit of expert help with some thing i am trying to achive but cant find any code on line. all i want to do is to have a list of items in a div box on the left of the screen and when i click on one of them it shows a div box with the related text on the right side of screen in the second div box and hides any previouse showing divs on the right. Thanks Ralph I am looking for a way to show more or less text. I want to show 600 characters by default and if show more is clicked it will show 600 more characters and then if clicked again shows 600 more untill there are no more characters. I also would like a show less button to collapse the text back to its default 600 characters. I have pages with 5000+ words and this would make reading much easier and make it look nicer. Right now I am using this to show the first 600 chars and when show more is clicked it expands all the way. Code: $(document).ready(function() { var showChar = 600; var ellipsestext = "..."; var moretext = "View more"; var lesstext = "View less"; $('.more').each(function() { var content = $(this).html(); if(content.length > showChar) { var c = content.substr(0, showChar); var h = content.substr(showChar-1, content.length - showChar); var html = c + '<span class="moreelipses">'+ellipsestext+'</span> <span class="morecontent"><span>' + h + ' </span><a rel="nofollow" href="" class="morelink">'+moretext+'</a></span>'; $(this).html(html); } }); $(".morelink").click(function(){ if($(this).hasClass("less")) { $(this).removeClass("less"); $(this).html(moretext); } else { $(this).addClass("less"); $(this).html(lesstext); } $(this).parent().prev().toggle(); $(this).prev().toggle(); return false; }); }); I am looking for any code or this code to be altered to show 600 characters by default and 600 more when show more is clicked and so on. I don't care how it is done, whether it be javascript or jquery or anything I would just like it to work and I have very little knowledge of java and if anyone could help me I would really appreciate it. thanks. hi, the yahoo function below is for dragging a box around teh screen Code: (function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, dd1, dd2, dd3; YAHOO.example.DDRegion = function(id, sGroup, config) { this.cont = config.cont; YAHOO.example.DDRegion.superclass.constructor.apply(this, arguments); }; YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, { cont: null, init: function() { //Call the parent's init method YAHOO.example.DDRegion.superclass.init.apply(this, arguments); this.initConstraints(); Event.on(window, 'resize', function() { this.initConstraints(); }, this, true); }, initConstraints: function() { //Get the top, right, bottom and left positions var region = Dom.getRegion(this.cont); //Get the element we are working on var el = this.getEl(); //Get the xy position of it var xy = Dom.getXY(el); //Get the width and height var width = parseInt(Dom.getStyle(el, 'width'), 10); var height = parseInt(Dom.getStyle(el, 'height'), 10); //Set left to x minus left var left = xy[0] - region.left; //Set right to right minus x minus width var right = region.right - xy[0] - width; //Set top to y minus top var top = xy[1] - region.top; //Set bottom to bottom minus y minus height var bottom = region.bottom - xy[1] - height; //Set the constraints based on the above calculations this.setXConstraint(left, right); this.setYConstraint(top, bottom); } }); I would like to show the final TOP and LEFT results in textboxes onMouseUP?! thanks in advance! Hi Im looking for a way to show hide text box on select option change PHP Code: <select name="letter_type" id="lt"> <option value="Registered">Registered</option> <option selected="selected" value="Unregistered">Unregistered</option></select> <input name="textfield7" id="regty" type="text" accesskey="1" tabindex="1" size="20" /> i wana show that text box if user select "Registered" from select option. any help would be great sorry for language errors. Thanks Hello! I am using this script for showing who is on the air. I would like to know if anyone has an idea how to make this show a picture file instead of text for who is on air. The script is great in that the gmt offset works. I would just rather have it show an image instead of text. Code: <span id = "dj" style="font-size:12px; font-weight:bold; font-family: Tahoma; color: #6600FF;"></span> <script type = "text/javascript"> function display() { var show = "No show scheduled at present"; var GMToffset = -5; // Your current GMT offset, whether Standard or Daylight var now = new Date(); var dy = now.getDay(); // day of week 0-6 now.setHours(GMToffset + now.getHours() + now.getTimezoneOffset() / 60); var hh = now.getHours(); var mn = now.getMinutes(); hh = hh + (mn/60); // minutes expressed as fractions of an hour // The GMT offset ensures that every visitor, regardless of their timezone, will see the schedule // that is appropriate for the site owner's local time. // Tip - for testing purposes you can put here //dy = 5; //hh = 9.25; // or whatever to check that the right show appears at that day/time. if (dy >=1 && dy <=5) { // days in Javascript are 0 Sunday - 6 Saturday if (hh >=0 && hh <3) {show = "Matt Knight at Night"} if (hh >=3 && hh <9) {show = "Non-Stop Music"} if (hh >=9 && hh <17) {show = "The Matt Knight Show"} if (hh >=17 && hh <18) {show = "Saving the 70's with Mike Walker"} if (hh >=18 && hh <20) {show = "Non-Stop Music"} if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"} if (hh >=21 && hh <24) {show = "Matt Knight at Night"} } if (dy >= 2 && dy <=5) { if (hh >=0 && hh <3) {show = "Matt Knight at Night"} if (hh >=3 && hh <9) {show = "Non-Stop Music"} if (hh >=9 && hh <18) {show = "The Matt Knight Show"} if (hh >=18 && hh <19) {show = "Non-Stop Music"} if (hh >=19 && hh <20) {show = "Non-Stop Music"} if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"} if (hh >=21 && hh <24) {show = "Hank and Jim Show"} } if (dy >= 3 && dy <=5) { if (hh >=0 && hh <3) {show = "Hank and Jim Show"} if (hh >=3 && hh <9) {show = "Non-Stop Music"} if (hh >=9 && hh <18) {show = "The Matt Knight Show"} if (hh >=18 && hh <19) {show = "Non-Stop Music"} if (hh >=19 && hh <20) {show = "Non-Stop Music"} if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"} if (hh >=21 && hh <24) {show = "The Pete Sayek Show"} } if (dy >= 4 && dy <=5) { if (hh >=0 && hh <1) {show = "The Pete Sayek Show"} if (hh >=1 && hh <9) {show = "Non-Stop Music"} if (hh >=9 && hh <15) {show = "The Matt Knight Show"} if (hh >=15 && hh <18) {show = "Stafford's World - Mark Stafford"} if (hh >=18 && hh <19) {show = "Non-Stop Music"} if (hh >=19 && hh <20) {show = "Non-Stop Music"} if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"} if (hh >=21 && hh <24) {show = "Matt Knight at Night"} } if (dy == 5) { if (hh >=0 && hh <3) {show = "Matt Knight at Night"} if (hh >=3 && hh <9) {show = "Non-Stop Music"} if (hh >=9 && hh <15) {show = "The Matt Knight Show"} if (hh >=15 && hh <18) {show = "Beachey Live from the U.K."} if (hh >=18 && hh <19) {show = "Catt Live from California"} if (hh >=19 && hh <20) {show = "Catt Live from California"} if (hh >=20 && hh <21) {show = "Catt Live from California"} if (hh >=21 && hh <23) {show = "Psychedelic Detached Garage - George Cannon"} if (hh >=23 && hh <24) {show = "Matt Knight at Night"} } if (dy == 6) { // Saturday Note the two = signs to mean equals if (hh >=0 && hh <10) {show = "Non-Stop Music"} if (hh >= 10 && hh <13) {show = "Stafford's World - Mark Stafford"} if (hh >=13 && hh <13.30) {show = "Cheeze Pleeze - Snarfdude and Dafodil"} if (hh >=13.30 && hh <20) {show = "Non-Stop Music"} if (hh >=20 && hh <23) {show = "Flashback with Matt Knight"} if (hh >=23 && hh <24) {show = "Imagination Theater"} } //End of Saturday Shows if (dy == 0) { //Sunday Shows if (hh >= 0 && hh <10) {show = "Non-Stop Music"} if (hh >=10 && hh <11) {show = "Motown Memories with Tom Fallon"} if (hh >=11 && hh <22) {show = "Non-Stop Music"} if (hh >=22 && hh <23) {show = "Imagination Theater"} if (hh >=23 && hh <24) {show = "Non-Stop Music"} } // End of Sunday Shows var a = "" + show + " \u00A0 \u00A0 \u00A0 \u00A0 "; // spaces must be separted by Unicode spaces to prevent collapse document.getElementById("dj").innerHTML = a; setTimeout("display()", 60000); // update every 60 seconds } </script> Hi, Can somebody help me with the coding. I have a long list of events and I want somebody to be able to select one of those events & there will be a text box that shows the address pertaining to the event selected. Exactly how this website did he http://svacpa.com/live-webinars-and-...-registration/ Please advise! Thanks -------------- Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MySite Registration</title> </head> <body> <div style="width: 900px"> <p>Registration</P <form method="post" action="http://mysite.com" name="Registration"> <label id="Label1">First Name</label><input name="FirstName" type="text" /><br /><br /> <label id="Label1">Last Name</label><input name="LastName" type="text" /><br /><br /> <label id="Label2">Title</label><input name="Title" type="text" /><br /><br /> <label id="Label3">Company</label><input name="Company" type="text" /><br /><br /> <label id="Label5">Email</label><input name="Email" type="text" /><br /><br /> <label id="Label4">Phone</label><input name="Phone" type="text" /><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Breakfast</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Dinner</label><br /><br /> <br /> <input name="Submit1" type="submit" value="Register Now" class="submit" /> <input type="hidden" name="redirect" value="http://www.mysite.com/regsuccess.html"/> <input type="hidden" name="recipient" value="me@mysite.com"/> <input type="hidden" name="required" value="FirstName, LastName, Email, Phone"/> <input type="hidden" name="missing_field_redirect" value="http://mysite.com/regerror.html"/> </form> </div> </body> </html> Hello, I have this search box form with 2 select boxes : Code: <form action="search.php" method="get"> <select name="RingType"> <option value="Nose">Nose</option> <option value="Toe">Toe</option> <option value="Belly">Belly</option> </select> <select name="NecklaceType"> <option value="gold">Gold</option> <option value="diamond">diamond</option> <option value="pearl">pearl</option> </select> <input type="text" size="60" name="keywords" /> <input class="submit" type="submit" value="Search" /> </form> For example, when a visitor selects "Belly" RingType, I want "Belly Ring" to appear in the search box. and when the visitor selects "pearl" NecklaceType, I want "pearl necklace" to appear in the search box. if the visitor first selects "Belly" RingType, and then selects "pearl" NecklaceType, I want "Belly Ring pearl necklace" to appear in the search box. After making his selections in the search box, if he types something in the search box, it should add to what is already there in the search box. Or, if he first types something in the search box for example, "jewelry" and then selects "pearl" in the necklacetype select box, the search box should show : "jewelry pearl necklace" Can you please show how to do this ? Thanks a lot. I can I take a code like this: Code: <script language="javascript"> function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "show"; } else { ele.style.display = "block"; text.innerHTML = "hide"; } } </script> <a href="javascript:toggle();" id="displayText">Show/Hide</a> <div id="toggleText" style="display: none;">This is Hidden Text</div> But make it so you see "Show" before you click, then change the text to "Hide" once you click the link? Hi, I have been here before and was responded to quickly with professional results, and you guys have managed to bring me back! Anyway, I am horrible at coding, and I need to know how to write this, basically when the page loads a random number is generated <script type="text/javascript"> window.onload=function() { var random = Math.rand() * (6 + 1); Then later in the page if (random = 1) { document.write("1") //I'm not sure if thats the code to show simple text, but I'm pretty sure it is, correct me if I'm wrong } if (random = 2) { document.write("2") } if (random = 3) { document.write("3") } and so on so forth. I will be changing the numbers in the script to my accord and use of the script, so please use the //notes to mark where and what things is, with a brief explanation, so I don't have to unscramble the code to find out what it is. Thanks fellow nerds! Hey, I've got the following problem: I want to edit this code: <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.pp"><img src="http://blog.bastian.info/wp-content/uploads/2010/02/facebook-glossy-logo.jpg"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> So that after they click the button that triggers the facebook share, 7 seconds after they click it, some text appear and the picture they click disappears. Cheers |