JavaScript - Radio Button And Local Storage Issue
I have set's of radio buttons that have on click functions, and when i restore the form data i would like the onclick functions to re-calculate. Is there a simply way such as if this.checked = true run onclick function that i can apply to every radio with onload???
Reply With Quote 01-10-2015, 01:51 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts You cannot auto-click for security reasons. But you can use local storage to keep the status of the radio buttonds and reinstate them on page reload. You can then run a script to do whatever is required. Similar TutorialsI run Windows 7 and IE9, and I believe IE9 supports HTML5 Local Storage. But when I run this offline (locally) in IE9 Code: <script type="text/javascript"> function testSupport() { if (localStorage) {return "Local Storage: Supported"} else { return "Local Storage: NOT supported"; } } alert ( testSupport() ); </script> I get "LocalStorage: NOT supported". Chrome returns "Local Storage: Supported" My DOCTYPE is <!DOCTYPE html> Other tests also fail in IE. Example: Code: localStorage.setItem("name", "Hello World!"); alert(localStorage.getItem("name")); Above works in Chrome. Any advice, please? Have I not configured IE9 properly? I am working on a web app for the iPad and I am storing all my content in cookies. I am wondering how easy it is to transfer it to Local Storage. I'll post all the scripts that set cookies below: Code: jQuery.cookie = function (a, b, c) { if (typeof b !== "undefined") { c = c || {}; if (b === null) { b = ""; c.expires = -1; } var d = ""; if (c.expires && (typeof c.expires === "number" || c.expires.toGMTString)) { var e; if (typeof c.expires === "number") { e = new Date(); e.setTime(e.getTime() + c.expires * 24 * 60 * 60 * 100000); } else { e = c.expires; } d = "; expires=" + e.toUTCString(); } var f = c.path ? "; path=" + c.path : ""; var g = c.domain ? "; domain=" + c.domain : ""; var h = c.secure ? "; secure" : ""; document.cookie = [a, "=", encodeURIComponent(b), d, f, g, h].join(""); } else { var i = null; if (document.cookie && document.cookie !== "") { var j = document.cookie.split(";"); for (var k = 0; k < j.length; k++) { var l = jQuery.trim(j[k]); if (l.substring(0, a.length + 1) === a + "=") { i = decodeURIComponent(l.substring(a.length + 1)); break; } } } return i; } }; $(window).unload(function () { $(".remember").each(function () { $.cookie(this.id, this.value, { expires: 365 }); }); $(".draggable").each(function () { var a = $(this); $.cookie(this.id, a.css("top") + "_" + a.css("left"), { expires: 365 }); $.cookie("disp" + this.id, a.css("display"), { expires: 365 }); }); }); $(function () { var a, b, c; setInterval(checkOrientAndLocation, 1000); $(".remember").each(function () { var a = $.cookie(this.id); if (a) { this.value = a; } }); $(".draggable").each(function () { var a = $.cookie(this.id); if (a) { a = a.split("_"); $(this).css({ position: "absolute", top: a[0], left: a[1] }); } var b = $.cookie("disp" + this.id); if (b) { this.style.display = b; } }).touch({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: false, scale: false }); }); function toggle_visibility(a) { var item = $("#" + a); item.fadeToggle(); $.cookie("disp" + a, item.css("display")); } var _target = null, _dragx = null, _dragy = null, _rotate = null, _resort = null; var _dragging = false, _sizing = false, _animate = false; var _rotating = 0, _width = 0, _height = 0, _left = 0, _top = 0, _xspeed = 0, _yspeed = 0; var _zindex = 1000; jQuery.fn.touch = function (a) { a = jQuery.extend({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: false, scale: false }, a); var b = []; b = $.extend({}, $.fn.touch.defaults, a); this.each(function () { this.opts = b; this.ontouchstart = touchstart; this.ontouchend = touchend; this.ontouchmove = touchmove; this.ongesturestart = gesturestart; this.ongesturechange = gesturechange; this.ongestureend = gestureend; }); }; var currentRotation = null; function setOrientation() { switch (window.orientation) { case 0: orient = "portrait"; break; case 90: orient = "landscape"; break; case -90: orient = "landscape"; break; } currentRotation = window.orientation; document.body.setAttribute("orient", orient); setTimeout(scrollTo, 0, 0, 1); } function checkOrientAndLocation() { if (currentRotation !== window.orientation) { setOrientation(); } } function gestureend(a) { _sizing = false; _rotating = (_rotating + a.rotation) % 360; } function gesturechange(a) { if (_sizing) { _width = this.opts.scale ? Math.min(parseInt(_sizing[0], 8) * a.scale, 300) : _sizing[0]; _height = this.opts.scale ? Math.min(parseInt(_sizing[1], 10) * a.scale, 300) : _sizing[1]; _rotate = this.opts.rotate ? "rotate(" + (_rotating + a.rotation) % 360 + "deg)" : "0deg"; $("#" + this.id).css({ width: _width + "px", height: _height + "px", webkitTransform: _rotate }); $("#" + this.id + " b").text(""); $("#" + this.id).css({ backgroundColor: "" }); } } function gesturestart(a) { _sizing = [$("#" + this.id).css("width"), $("#" + this.id).css("height")]; } function touchend(a) { $(a.changedTouches).each(function () { if (!a.targetTouches.length) { _dragging = false; if (_animate) { _left = $("#" + _target).css("left") === "auto" ? this.pageX : parseInt($("#" + _target).css("left"), 10); _top = $("#" + _target).css("top") === "auto" ? this.pageY : parseInt($("#" + _target).css("top"), 10); var b = _dragx ? _left + _xspeed + "px" : _left + "px"; var c = _dragy ? _top + _yspeed + "px" : _top + "px"; if (_dragx || _dragy) { $("#" + _target).animate({ left: b, top: c }, "fast"); } } } }); $("#" + _target + " b").text(""); $("#" + _target).css({ backgroundColor: "" }); } function touchmove(a) { if (_dragging && !_sizing && _animate) { var b = isNaN(parseInt($("#" + _target).css("left"), 10)) ? 0 : parseInt($("#" + _target).css("left"), 10); var c = isNaN(parseInt($("#" + _target).css("top"), 10)) ? 0 : parseInt($("#" + _target).css("top"), 10); } $(a.changedTouches).each(function () { a.preventDefault(); _left = this.pageX - parseInt($("#" + _target).css("width"), 10) / 2; _top = this.pageY - parseInt($("#" + _target).css("height"), 10) / 2; if (_dragging && !_sizing) { if (_animate) { _xspeed = Math.round((_xspeed + Math.round(_left - b)) / 1.5); _yspeed = Math.round((_yspeed + Math.round(_top - c)) / 1.5); } if (_dragx || _dragy) { $("#" + _target).css({ position: "absolute" }); } if (_dragx) { $("#" + _target).css({ left: _left + "px" }); } if (_dragy) { $("#" + _target).css({ top: _top + "px" }); } if (_dragx || _dragy) { $.cookie(_target, ($("#" + _target).css("top") || "") + "_" + ($("#" + _target).css("left") || "")); } $("#" + _target).css({ backgroundColor: "" }); $("#" + _target + " b").text(""); } }); } function touchstart(a) { _target = this.id; _dragx = this.opts.dragx; _dragy = this.opts.dragy; _resort = this.opts.resort; _animate = this.opts.animate; _xspeed = 0; _yspeed = 0; $(a.changedTouches).each(function () { var b = $("#" + _target).css("left") === "auto" ? this.pageX : parseInt($("#" + _target).css("left"), 10); var c = $("#" + _target).css("top") === "auto" ? this.pageY : parseInt($("#" + _target).css("top"), 10); if (!_dragging && !_sizing) { _left = a.pageX - b; _top = a.pageY - c; _dragging = [_left, _top]; if (_resort) { _zindex = $("#" + _target).css("z-index") === _zindex ? _zindex : _zindex + 1; $("#" + _target).css({ zIndex: _zindex }); } } }); } function killAllCookies() { $(window).unbind("unload"); var a = document.cookie.split(";"), b = a.length - 1; for (b; b > -1; --b) { $.cookie(a[b].split("=")[0], "", { expires: -1 }); setTimeout("location.reload(true);", 1); } } I realize this is a big thing to ask, so if anyone has some free time and possibly wants to help me, I would be extremely thankful. Hi all, I have some code that attempts to save a user's preference settings. It first tries to use "localStorage", and if that fails (only old versions of MSIE), then a cookie is used instead. I tried several different tests, such as: Code: if (localStorage) { alert('True'); } else { alert('False'); } and....... if (typeof localStorage).... and....... if (typeof localStorage == 'object').... but none of these are reliable. For example, if I intentionally misspell "localStorage" by instead using "localStor" (simulating a browser that doesn't understand the object name), the code simply does not run. What I ultimately want is this: Code: if (user_wants_to_save_settings && localStorage) { save_to_local_storage; } else if (user_wants_to_save_settings) { save_to_cookie; } ...unfortunately, that doesn't work. Anyone have ideas? I've been staring at this too long and am probably missing the obvious.... Thanks! -- Roger Please help with some javascript for client side storage in html5 mobile safari. Here we wish to use local storage [persistent]. The page index.html has a list of links to question pages e.g. question1.html. When question1.html is answered correctly the page goes to answer1.html. From here, the page moves back to index.html by pressing a button. The button has 2 actions: goto index.html place a key/value pair in local storage - e.g. localStorage.setItem("name", "answer1"); On reloading, the index.html page then asks the local storage if the key/value pair ("name" "answer1") is stored. If yes, a new graphic appears next to the link. If no, the old graphic remains. Thank you for any help. is "localStorage" a native variable to javascript? On lin 36 & 37 is there anything else involved in getting that local storage to store? Those lines are local storage right? Is it really that easy? I was just reading this HUGE post and immediately stressed me out. I'm used to working off small examples and diving in bit by bit. It was the first article on google so I trusted it to be the most appropriate for introductions. (which means not reading more than 500 words before I get some sample code) In addition, can Google Chrome & FireFox extensions change page elements? The reason I think it can do this is because google chrome says this Which (to me) implies that the extension has access to page data. If that is the case. How are localStorage variables not mixing? How can I access that page data? I don't care about browser history, I just want to change page elements. Is this possible? If this is the case. Is there a way I can have the extension close itself or not open at all? Sometimes I just want the "extension" to provide a simple function. That's all. Thanks! I had Silverbird and the tutorialzine example extension. They were both different size. Odd thing is that I never saw a size specification in the style.css in the tutorialzine example. How can I specify the size of the popup extension? I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery I have garlic.js automatically local storing my radio button value but the onclick function does not run when the page reloads. Is there a way to work around this ??
Reply With Quote 01-15-2015, 11:17 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts And we are supposed to guess what "garlic.js" is doing? Or what it is? And do you really mean that the onclick event handler does not work? Or do you mean that the radio buttons are set to a different state but the click() for the chosen button is not executed? That is, it is not the onclick that is missing, it is the click ?? I don't exactly know how to word my issue. Basically, I need it so that if a user selects 'option1' in the group 'group1' when they go to 'group2' is only gives them a certain selection to choose from. If they choose 'option2' in 'group1' they will get a different set to choose from. My main dilemma is it must do this without them having to submit. All, I have the following code: Code: <form action="" name="myform" method="post"> <input type="hidden" id="picimages" name="picimages" value="<?php echo $resultsetstory['bigger_id']; ?>" /> <p> <label> <input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetstory['picture_id']; ?>" /> <?php if($resultsetstory['title']<>""){ echo $resultsetstory['title']; }else{ echo "Image 1"; } ?> </label> <br /> <label> <input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetpic2['picture_id']; ?>" /> <?php if($resultsetpic2['title']<>""){ echo $resultsetpic2['title']; }else{ echo "Image 2"; } ?> </label> <br /> <input name="submit" type="button" value="Vote!" onclick="javascript:voteupdate(this.myform);"/> </p> </form> When I submit this, it goes to this function: Code: function voteupdate(obj) { var poststr = "picimage=" + document.getElementById("picimage").value + "&bigger_id=" + encodeURI( document.getElementById("bigger_id").value ); alert(poststr); makePOSTRequest('voteresults.php', poststr); } However I can't get the value of the radio group for the one that is selected. Can someone see what is wrong? Thanks. All: I need some help with a radio button code. It seems simple but I am really new at JavaScript so I need help. I have created a JavaScript code that has three radio buttons (High, Medium, and Low). When you click on high two text boxes appear so that an email address can be added. What I need help with is making the text boxes disappear if someone accidentally click high and then went back to low or medium. Currently the High button stays clicked and the text boxes still show. Any help would be great. Thanks, Stephen Code: <script type="text/javascript"> function showHide(el){ obj = document.getElementById(el).style; (obj.display == 'none')? obj.display = 'block' : obj.display = 'none'; } </script> <form id="form1" name="form1" method="post" action=""> <label> <input type="Checkbox" name="High" value="High" onclick="showHide('group1')" /> High </label> <label> <input type="Checkbox" name="Medium" value="Button" /> Mediun </label> <label> <input type="Checkbox" name="Medium" value="Button" /> Low </label> <p id="group1" style="display: none;"> <label> <b>friend1  </b><input type="Text" name="textGroup1" value="@gmail.com" /> <br/> </label> <br /> <label> <b>friend2  </b><input type="text" name="textGroup1" value="@gmail.com" /> </label> </p> </form> I have the following code which I want to make a selection and the value should reflect in the text box and the text box should take on that value for future calculations. Code: <!-- Row 13, Col 1 Order Value --> <tr><td colspan="2" align="right">Delivery Options: <input type="radio" name="sapo" value="35" onclick="deliveryCost('35')" /> R35 - SA Post Office <input type="radio" name="sapo" value="80" onclick="deliveryCost('80')" /> R80 - Speed Services <input type="radio" name="sapo" value="150" onclick="deliveryCost('150')" /> R150 - Courier Services </td> <!-- Row 13, Col 2 Order Value Box--> <td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="delivery" size="10" readonly="readonly" /> </td></tr> Hello, I am trying to implement a radio button option so that users can search specific sites such as google, yahoo, or bing from input box. Here's my code. Please help. <script type="text/javascript"> <!-- function goSearch(){ //search according to checked radio button } --> </script> <h1>Search Option</h1><br /> <input type="radio" name="search" id="google"/><a href="http://www.google.com" rel="nofollow" target="_blank"><img src="images/google.jpg" /></a> <input type="radio" name="search" id="yahoo"/><a href="http://www.yahoo.com" rel="nofollow" target="_blank"><img src="images/yahoo.jpg" /> </a> <input type="radio" name="search" id="bing" /><a href="http://www.bing.com" rel="nofollow" target="_blank"><img src="images/bing.jpg" /> </a> <br /><br /> <form method="get" action="goSearch()" rel="nofollow" target="_blank"> <div style="border:1px solid black;padding:4px;width:20em;"> <table border="0" cellpadding="0"> <tr> <td> <input type="text" name="q" size="25" maxlength="255" value="" /> <input type="submit" value="Search" /> </td> </tr> </table> </div> </form> i need to add an alert if the male is not selected in following after clicking on submit button Code: <html><head> </HEAD><BODY> <br><form name="feedback" method=post> Your Gender: <input type="radio" name="gender" value="male" id="male" /> Male <input type="radio" name="gender" value="female" id="female"CHECKED> Female</td> <input type='button' value='Submit' /> </form></BODY></HTML> Wondering how come this doesn't work any ideas? its validating that the radio buttons have been selected. Code: if ( ( form.q1[0].checked == false ) && ( form.q2[1].checked == false) && ( form.q3[2].checked == false )) { alert ( "Please Choose a " ); return false; } hi, how I can execute this operation : for example x=a+b where "a" it can have value 0 or 1 based on the selection of the radio button. when a user select 1 on the radio button x=1+b when user select 0 x=0+b . please help me. hi guys im trying to check whether a radio button is checked when i click it, but the javascript onlick event is not acting cool! when i click an unselected radio button i am informed that the unselected radio button i just clicked is in fact checked, when i should be getting the information the no, the radio button was not checked when i clicked it. any idea how to get the previous state of a radio button onclick? Hi hope someone here can help me with a problem i'm stuck on. Basically I have 3 radio buttons and one of them has to be selected otherwise display a error message but I cant figure it out. Here is my failed attempt: Code: <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript"> function validateForm() { var x=document.forms["form1"]["name"].value; var y=document.form1.difficulty.value; if (x==null || x=="") { alert("First name must be filled out"); return false; } if (y==false) { alert(y); return false; } } </script> </head> <body> <div id="horizon"> <div id="content"> <img src="images/logo.jpg" width="649" height="410"></div> <div id="content2"><form name ="form1" method ="post" action ="game.php" onSubmit="return validateForm()" > Name: <input type ='text' name='name' /> <br /> <Input type = 'Radio' Name ='difficulty' value= '1' />Easy <Input type = 'Radio' Name ='difficulty' value= '2' />Medium <Input type = 'Radio' Name ='difficulty' value= '3' />Hard <br /><Input type = "Submit" Name = "Submit" VALUE = "Submit"> </form></div></div> </body> </html> Thanks in advance I am ignorant in java scripting. I want to use the following java script to create the radiobutton in obiee reporting. This java script will change the regular prompt to radio button,however I do not know how to debug if it is working. Waiting for kind reply. Anil PHP Code: <script type="text/javascript"> function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } var tables = getElementsByClass('DashboardPromptViewTable',null, 'table'); for (var table = 0; table < tables.length; table++){ var stringFunc = ''; var selects = tables[table].getElementsByTagName('select'); if ( selects.length == undefined || selects.length == 0 || selects[0].name === 'Match'){ if (debug === 1) { document.write("No selects found. Continue to next record."+"<BR>");} continue; // This DB Prompt doesn't have any select statements } var spans = getElementsByClass('minibuttonOn',tables[table],'span'); spans[0].style.display="none"; stringFunc = String(spans[0].getElementsByTagName('a')[0].onclick); stringFunc = stringFunc.substr(stringFunc.indexOf('{')+1, stringFunc.length - 2 - stringFunc.indexOf('{')); for (var s =0; s < selects.length; s++){ var new_form = document.createElement('form'); var options = selects[s].getElementsByTagName('option'); new_form.name = selects[s].name+"_radio"; new_form.id = selects[s].id+"_radio"; for (var o=0; o<options.length; o++) { var new_input = document.createElement('input'); new_input.type = 'radio'; new_input.value = options[o].value; new_input.name = selects[s].name+"_radio"; if(selects[s].selectedIndex == o){ new_input.checked = true; } var onClickStringFunc = "var sel = document.getElementById(this.name.substr(0,this.name.length-6));" + "if ( sel == null){"+ "return;"+ "}"+ "var opts = sel.getElementsByTagName('option');"+ "for( var opt = 0; opt < opts.length; opt++){"+ "if( opts[opt].value == this.value){"+ "sel.selectedIndex = opt;"+ "}"+ "}"; new_input.onclick = new Function(onClickStringFunc + stringFunc); var new_text = document.createTextNode(options[o].innerHTML); new_form.appendChild(new_input); new_form.appendChild(new_text); } // end options for loop selects[s].parentNode.insertBefore(new_form,selects[s]); selects[s].style.display="none"; } // end selects for loop } // end table foor loop </script> Hello Friends, i have a small problem and need your help. I have a form with 4 radio buttons, the scenario is, when a user click on a radio button a hidden content will be displayed and the other three radio buttons will be disabled so that at one time a user can only click and view single radio button and the hidden content. Here is my code to show hide the hidden content but i need when the user select one radio button the other radio buttons should disable. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>test</title> <style type="text/css" media="screen"> .hide{ display:none; } </style> </head> <body> <div id="tabs"> <div id="nav"> <p>Show Div 1:<input type="radio" name="tab" value="value1" class="div1" /></p> <p>Show Div 2:<input type="radio" name="tab" value="value2" class="div2" /></p> <p>Show Div 3:<input type="radio" name="tab" value="value3" class="div3" /></p> <p>Show Div 4:<input type="radio" name="tab" value="value4" class="div4" /></p> </div> <div id="div1" class="tab"> <p>this is div 1</p> </div> <div id="div2" class="tab"> <p>this is div 2</p> </div> <div id="div3" class="tab"> <p>this is div 3</p> </div> <div id="div4" class="tab"> <p>this is div 4</p> </div> </div> <script type="text/javascript" charset="utf-8"> (function(){ var tabs =document.getElementById('tabs'); var nav = tabs.getElementsByTagName('input'); /* * Hide all tabs */ function hideTabs(){ var tab = tabs.getElementsByTagName('div'); for(var i=0;i<=nav.length;i++){ if(tab[i].className == 'tab'){ tab[i].className = tab[i].className + ' hide'; } } } /* * Show the clicked tab */ function showTab(tab){ document.getElementById(tab).className = 'tab' } hideTabs(); /* hide tabs on load */ /* * Add click events */ for(var i=0;i<nav.length;i++){ nav[i].onclick = function(){ hideTabs(); showTab(this.className); } } })(); </script> </body> </html> Thank you for your help in advance. Hi, Hit a snag creating code for toggling with radio buttons, alert debugs return undefined for the radio button values. Would someone assist? HTML Code: <input type="radio" name="artist" onclick="toggleForm(this.value)" value="existing" /> <label for="is_new0" class="artist_radio_label">Yes</label> <input type="radio" name="artist" onclick="toggleForm(this.value)" value="new" /> <label for="is_new1" class="artist_radio_label">No</label> From Document Head Code: <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Add a Print</title> <link rel="stylesheet" href="../c/forms.css" type="text/css" /> <script type="text/javascript" src="../j/global.js"></script> <script type="text/javascript" src="../j/add_print.js"></script> </script> </head> add_print.js Code: function toggleForm(artist) { if (!document.getElementById) return false; var existing = document.getElementById("existing_artist"); var newArtist = document.getElementById("new_artist"); existing.style.display = "none"; newArtist.style.display = "none"; if(this.value == existing){ existing.style.display = "block"; }else{ newArtist.style.display = "block"; } } addLoadEvent(toggleForm); global.js - Add Load Event Code: function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(); |