JavaScript - Button Not Updating After Click...with Javascript/ajax
I have these buttons that I need to have switch accounts on and off. They work, but for some reason the words on the buttons are not changing from Activate to Deactivate...
It seems as though the button is not updating itself after success of the function. First post on here so I apologize if I am doing this wrong. Problem code in jsbin--> http://jsbin.com/okifa3/ Code: $(function() { var activateOwner = function(u) { var dataString = 'oid=' + u + "&a=1"; $.ajax({ type: "GET", url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php", data: dataString, success: function() { $('#spanowneractivation' + u).css('display', 'none'); $('#message1' + u).html("Activated!").hide().fadeIn(1500, function() { $('#message1' + u); }); $('#spanownernamelink' + u).css('display', 'inline'); $('#' + u).val('Deactivate'); $('#spanownernametext' + u).css('display', 'none'); $('#' + u).removeClass('btnActivate'); $('#' + u).addClass('btnDectivate'); setTimeout(function() { $('#message1' + u).css('display', 'none'); $('#spanowneractivation' + u).hide().fadeIn(1500); }, 2000 ); } }); return false; }; var deactivateOwner = function(u) { var dataString = 'oid=' + u + "&a=0"; $.ajax({ type: "GET", url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php", data: dataString, success: function() { $('#spanowneractivation' + u).css('display', 'none'); $('#message1' + u).html("Deactivated!").hide().fadeIn(1500, function() { $('#message1' + u); }); $('#spanownernamelink' + u).css('display', 'none'); $('#spanownernametext' + u).css('display', 'inline'); $('#' + u).val = 'Activate'; $('#' + u).removeClass('btnDeactivate'); $('#' + u).addClass('btnActivate'); setTimeout(function() { $('#message1' + u).css('display', 'none'); $('#spanowneractivation' + u).hide().fadeIn(1500); }, 2000 ); } }); return false; }; $(".toggleOwnerButton").click(function() { if($(this).val() == 'Activate') { activateOwner($(this).attr("id")); } else { deactivateOwner($(this).attr("id")); } }); }); Similar TutorialsI want to show an hourglass instead of a mouse pointer on click of a button. I'm having both client and server side validations on the button click event. I have written the code for hourglass in the javascript function along with the validations. Now, on click of the button the hourglass gets displayed after 3-4 seconds and not immediately. According to me, the hourglass is getting displayed after the javascript function(client side validation) is executed and before server side validation begins. Is there any way to display the hourglass without delays ? Kindly let me know if there is any fix for eliminating this delay. I hope my question is clear. Please let me know if i'm wrong somewhere as i'm new to javascript programming. Thanks in advance. zizou. Hello all I am new here but this place looked great and like one of the only places where I could find the answer to my question. I have created a page which pulls search results from various sites using PHP. It displays each result in a row in a table upon running. I wanted to add a button saying "More information" at which point, a div would appear and load the associated link for that search result within an iframe within the newly appeared div. I've been able to get a div appear and disappear on button click but, I couldn't get it to dynamically load an iframe on click with the associated search results link. Any suggestions are greatly appreciated. Also let me know if you need more information before assisting. Thanks! Hi all ... Any help's appreciated ... The challenge is that I have three - three page sliders ... each one is actually being called on a list item external to the easySlider function ...(#sliderNav ul li a#s1, #s2, #s3) When I navigate from one slide show to the next ... I need to send a callback to rewind each slideshow to the first page and reflect the current change to the numeric 'a' attr ... I don't quite know how to properly structure a callback function to update the current list item index from within the click event ... Any suggestions would KINDLY be appreciated cause I think I'm a bit over my JavaScript - JQuery skills threshold with this ... Thanks in advance and if you are way too busy to assist I completely understand ... Here's the code I have for my slideshow controller .. Code: $(function() { // Slider Init Functions .... $("#slideShow").easySlider({ controlsShow:true, speed:100, numeric:true, numericId:'controls', className:"sone", firstId:'p1' }); $('.stwo, .sthree').hide(); $('.sone').show(); $('#slideShowTwo').easySlider({ controlsShow:true, speed:100, numeric:true, numericId:'controlsTwo', className:'stwo', firstId:'p4' }); $('#slideShowThree').easySlider({ controlsShow:true, speed:100, numeric:true, numericId:'controlsThree', className:'sthree', firstId:'p7' }); // Slider Nav Calls ... $('#s1').click(function() { $('.sone').show(); $('.stwo, .sthree').hide(); }); $('#s2').click(function() { $('.stwo').show(); $('.sone, .sthree').hide(); }); $('#s3').click(function() { $('.sthree').show(); $('.sone, .stwo').hide(); }); }); And the code for the easySlider .... Code: (function($) { $.fn.easySlider = function(options){ // default configuration properties var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', controlsShow: true, controlsBefo '', controlsAfter: '', controlsFade: true, firstId: 'firstBtn', firstText: 'First', firstShow: false, lastId: 'lastBtn', lastText: 'Last', lastShow: false, vertical: false, speed: 800, auto: false, pause: 2000, continuous: false, numeric: false, numericId: 'controls', className:'' }; var options = $.extend(defaults, options); this.each(function() { var obj = $(this); var s = $("li", obj).length; var w = $("li", obj).width(); var h = $("li", obj).height(); var clickable = true; obj.width(w); obj.height(h); obj.css("overflow","hidden"); var ts = s-1; var t = 0; $("ul", obj).css('width',s*w); if(options.continuous){ $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px")); $("ul", obj).append($("ul li:nth-child(2)", obj).clone()); $("ul", obj).css('width',(s+1)*w); }; if(!options.vertical) $("li", obj).css('float','left'); if(options.controlsShow){ var html = options.controlsBefore; if(options.numeric){ html += '<ol id="'+ options.numericId +'" class="' + options.className + '"></ol>'; } else { if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>'; html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>'; html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'; if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>'; }; html += options.controlsAfter; $(obj).after(html); }; if(options.numeric){ for(var i=0;i<s;i++){ $(document.createElement("li")) .attr('id',options.numericId + (i+1)) .attr('class',options.className) .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>') .appendTo($("#" + options.numericId)) .click(function(){ animate($("a",$(this)).attr('rel'),true); }); }; } else { $("a","#"+options.nextId).click(function(){ animate("next",true); }); $("a","#"+options.prevId).click(function(){ animate("prev",true); }); $("a","#"+options.firstId).click(function(){ animate("first",true); }); $("a","#"+options.lastId).click(function(){ animate("last",true); }); }; function setCurrent(i){ i = parseInt(i)+1; $("li", "#" + options.numericId).removeClass("current"); $("li#" + options.numericId + i).addClass("current"); }; function adjust(){ if(t>ts) t=0; if(t<0) t=ts; if(!options.vertical) { $("ul",obj).css("margin-left",(t*w*-1)); } else { $("ul",obj).css("margin-left",(t*h*-1)); } clickable = true; if(options.numeric) setCurrent (t); }; function animate(dir,clicked){ if (clickable){ clickable = false; var ot = t; t = parseInt(t); switch(dir){ case "next": t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1; break; case "prev": t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1; break; case "first": t = 0; break; case "last": t = ts; break; default: t = dir; break; }; var diff = Math.abs(ot-t); var speed = diff*options.speed; if(!options.vertical) { p = (t*w*-1); $("ul",obj).animate( { marginLeft: p }, { queue:false, duration:speed, complete:adjust } ); } else { p = (t*h*-1); $("ul",obj).animate( { marginTop: p }, { queue:false, duration:speed, complete:adjust } ); }; if(!options.continuous && options.controlsFade){ if(t==ts){ $("a","#"+options.nextId).hide(); $("a","#"+options.lastId).hide(); } else { $("a","#"+options.nextId).show(); $("a","#"+options.lastId).show(); }; if(t==0){ $("a","#"+options.prevId).hide(); $("a","#"+options.firstId).hide(); } else { $("a","#"+options.prevId).show(); $("a","#"+options.firstId).show(); }; }; if(clicked) clearTimeout(timeout); if(options.auto && dir=="next" && !clicked){; timeout = setTimeout(function(){ animate("next",false); },diff*options.speed+options.pause); }; }; }; // init var timeout; if(options.auto){; timeout = setTimeout(function(){ animate("next",false); },options.pause); }; if(options.numeric) setCurrent(0); if(!options.continuous && options.controlsFade){ $("a","#"+options.prevId).hide(); $("a","#"+options.firstId).hide(); }; }); }; })(jQuery); The HTML Code: <div id="sliderNav"> <ul> <li><a href="#p1" id="s1">One</a></li> <li><a href="#p4" id="s2">Two</a></li> <li><a href="#p7" id="s3">Three</a></li> </ul> </div> <div id="slideShow" class="sone"> <ul> <li id="p1"><!--<li>Slide One</li>--> <div class="h2">This is The Main Page</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p2"> <div class="h2">This is Page Two</div> Here's the second portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p3"> <div class="h2">This is Page Three</div> Here's the third portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> </ul> </div><!-- </div id="slideShow">--> <div id="slideShowTwo" class="stwo"> <ul> <li id="p4"><!--<li>Slide Two</li>--> <div class="h2">This is Slideshow 2 Page One</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p5"> <div class="h2">This is Slideshow 2 Page Two</div> Here's the second portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p6"> <div class="h2">This is Slideshow 2 Page Three</div> Here's the third portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</li> </ul> </div><!-- </div id="slideShowTwo">--> <div id="slideShowThree" class="sthree"> <ul> <li id="p7"><!--<li>Slide Three</li>--> <div class="h2">This is Slideshow 3 Page One</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p8"> <div class="h2">This is Slideshow 3 Page Two</div> Here's the second portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> <li id="p9"> <div class="h2">This is Slideshow 3 Page Three</div> Here's the third portion of the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin. </li> </ul> </div><!-- </div id="slideShowThree">--> </body> Hi guys, I've had a little trouble with this and haven't been able to find answers on google. I'm trying to set up a new window that contains a button. Then, if the user clicks the button, the window would display new information accordingly. I have written a simple test that won't seem to work: Code: <html> <head> <script language="Javascript" type="text/javascript"> var count = 0; function Window() { MyWindow = window.open('', 'myWin', 'height=250,width=250') MyWindow.document.write('<html>') MyWindow.document.write('<head>') MyWindow.document.write('<\/head>') MyWindow.document.write('<body>') MyWindow.document.write('<FORM method="post" name="aname">') MyWindow.document.write('<INPUT type="button" onclick="newfunc()" name="test" value="Click Me"\/>') MyWindow.document.write('<\/FORM>') MyWindow.document.write('<\/body>') MyWindow.document.write('<\/html>') MyWindow.focus() } function newfunc() { count++ MyWindow.document.write(count) } </script> </head> <body> <FORM method="post" name="me"> <INPUT name="opendis" value="Open Window" type="button" onclick="Window()"/> </body> </html> I am probably doing something very wrong. Is there a way for this to work? Thanks! Hello, I am working on a tool for hardware quoting, I'm currently trying to add a button for adding line items to the quote. Here is what I currently have: The HTML: Code: <html> ... <input type="button" id="sbutt" onclick="buttinc()" value="Click Me" /> <div id="txtarea"></div> ... </html> The script: Code: vbutt = 0 function buttinc() { var buttona = document.getElementById("txtarea"); if (vbutt<100) { buttona.innerHTML="<div id='newdiv" + vbutt + "'></div><br />"; var buttb = document.getElementById("newdiv"+vbutt); buttb.innerHTML = "some text" + vbutt + "close tags and stuff"; vbutt = vbutt + 1; } } Now, it is sort of working the way I expect. When the button is clicked, it creates the new div, starts the id at 0, and increments the div id each time the button is pressed afterwards. It also displays the text (buttb.innerHTML) in the new div. However, it only increments the id of the same div, it doesn't create a new div under the first one. What I am hoping for is: click 1 : <div id="newdiv0">0</div> click 2 : <div id="newdiv1">1</div> click 3 : <div id="newdiv2">2</div> etc What it is doing: click 1 : <div id="newdiv0">0</div> click 2 : <div id="newdiv1">1</div> (newdiv0 disappears) click 3 : <div id="newdiv2">2</div> (newdiv1 disappears) What am I missing? Any help is appreciated. Hey I want to enforce a click on the facebook share button, please help me out here. I was thinking something like this: Code: javascript:window.location="http://www.facebook.com/connect/prompt_feed.php?locale=en_US&message=hi"; javascript:function selectFirst() { publish.focus(); publish.click();} selectFirst(); Something wrong with that code? What code would work? Is it not possible? Thanks a lot, Sarah hye.. i'm trying to calculate value of balance by substract cash to total. But nothing happen. here is my code: Code: <script type="text/javascript"> function substract(){ { document.calculate.Cash.value = ZA; document.calculate.Total.value = Z1; balance(); } function balance(){ AAA = document.calculate.Balance; AAA.value = (ZA-Z1).toFixed(2); } </script> </head> <body style="background-color: #99FF99"> <?php // if there are any errors, display them if ($error != 'Unable to update') { echo '<div style="padding:12px; border:1px solid purple; color:red; font-weight: bold; text-align: center; font-size: medium; ">'.$error.'</div>'; } ?> <form action="" method="post" name="calculate" style="width: 1320px; "> <div class="style1"> <input type="hidden" name="CustID" value="<?php echo $CustID; ?>"> <input type="hidden" name="Total" value="<?php echo $Total; ?>"> <input type="hidden" name="TableID" value="<?php echo $TableID; ?>"> <div class="style5" style="width: 820px; height: 148px; margin-left: auto; margin-right: auto;"> <p class="style9"> </p> <p class="style17"><span class="style19">CUSTOMER </span> <strong> <span class="style19">ID:</span></strong> <strong> <?php echo $CustID; ?> </strong></p> <table style="width: 35%; height: 185px; margin-left: auto; margin-right: auto;" class="style15"> <tr> <td class="style11" style="width: 111px; height: 30px;"><strong>Table ID : </strong></td> <td style="height: 30px; width: 169px;" class="style18"><strong><?php echo $TableID; ?></strong></td> </tr> <tr> <td class="style1" style="width: 111px; height: 20px;"></td> <td style="height: 20px; width: 169px;" class="style1"></td> </tr> <tr> <td class="style16" style="width: 111px; height: 30px;"><strong>Total : </strong></td> <td style="height: 30px; width: 169px;" class="style18"><strong> RM<?php echo $Total; ?> </strong></td> </tr> <tr> <td class="style1" style="width: 111px; height: 20px;"></td> <td style="height: 20px; width: 169px;" class="style1"></td> </tr> <tr> <td class="style16" style="width: 111px; height: 30px;"><strong>Cash : </strong></td> <td style="height: 30px; width: 169px;" class="style1"> <strong> <span class="style20">RM</span> <input type="text" name="Cash" id="Cash" class="style17" style="width: 120px"></strong></td> </tr> <tr> <td class="style1" style="width: 111px; height: 20px;"></td> <td style="height: 20px; width: 169px;" class="style1"></td> </tr> <tr> <td class="style16" style="width: 111px; "><strong>Balance : </strong></td> <td style="width: 169px;" class="style1"><strong> <span class="style20">RM</span> <input type="text" name="Balance" id="Balance" value="0.00" class="style17" style="width: 120px"></strong></td> </tr> </table> <p class="style5"><strong> <input class="style3" name="calculate" type="button" onclick="substract()" value="Calculate"> <input class="style3" name="submit" type="submit" value="Done"></strong> </div> </div> </form> Hi. 1) I would like to click the Download button on this site, then wait lets say 60 sec & click free download button. http://uploading.com/files/S4WYPP73/...r_ENG.rar.html I remember that somehow it is possible to create the Request URL & then input it into IE & the server will think I hit the button. But how can I make the URL? And how is it called? posting URL request? I will be using firefox or I can make HTML file & execute it in IE for every file. PHP Code: <form action="http://uploading.com/files/get/S4WYPP73/" method="post" id="downloadform"> <input type="hidden" name="action" value="second_page" /> <input type="hidden" name="file_id" value="4663720" /> PHP Code: function do_step_1() { do_request('files', 'get', {file_id: 4663720, action: 'step_1'}, function(wait_time){ if(wait_time > 0) start_timer(wait_time); else if(wait_time <= 0) download(); }); } function do_step_2() { do_request('files', 'get', {file_id: 4663720, action: 'step_2'}); } PHP Code: function download() { $('#waitblock').html('Free Download'); $('#waitblock').click(function(){ do_step_2(); }); } I would like for the script to say "Ok here is the button on this page *clicks* (or submit)" I have tried this with out help, I'm not really sure what to do. I've tried learning what I can on my own, I've tried using the search tool. Here is the part of the code I am trying to use to make my click button. Code: <div id="interactiveBox"> <div class="divpad3"> <form name="buyform" method="POST" action="/marketplace/userstore/2690240/buy/?id=567595175&step=submit" ENCTYPE="application/x-www-form-urlencoded"> <strong>Buy It Now</strong> <strong>Password</strong> <input type="password" class="marketplaceInputField" name="password"> <input type="hidden" name="nonce" value="860307364.1283901229.441212630"> <button type="submit" class="cta-button-sm"><span>Buy Now</span></button> <br /><br /> </form> Here is what I have tried and failed.. This code will be used in combination with greasemonkey Code: <script>function clickOnLoad() { document.buyform.submit.value = "true"; } body onload="clickOnLoad()"</script> I have a website using this pageslide function http://srobbin.com/blog/jquery-pageslide/ Basically the page you see in the example is acting as a side menu bar and when you click the links on that page, it performs the sliding action and a new page slides into the screen. I'm wondering if there is any way to get the back button to slide it back to the main page, rather than having to click a link to go back? Hi guys, At the moment i have this code which disable the middle button in Safari and Chrome.. Code: $('body').mousedown(function(e){ if(e.button==1) return false } ); How can I disable it in Firefox and IE?.. i think IE middle button ==4 but its not working for me. Thanks in advance! Hi there. I want to alert the user that he or she has not clicked on any of the radio buttons in each group. How do I do so? Code: <!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> <title>Untitled Page</title> <script type="text/javascript"> function validateRadio(obj,correct){ var result = 0 for(var i=0; i<obj.length; i++){ if(obj[i].checked==true && obj[i].value==correct) result = 1 } if(!result && obj.value == correct) result = 1 return result; } </script> </head> <body> <form onsubmit=" var err = '' if(!validateRadio(this.a,3 || 1)) { err+='\nFirst radio is wrong'; } if(!validateRadio(this.b,2 || 1)) { err+='\nSecond radio is wrong'; } if(err.length) { alert('Problem:'+err); return false; } else { alert('Good Job -- Submitting'); return true; }" action="#"> Choose "3" <input type="radio" name="a" value="1" /> 1 <input type="radio" name="a" value="3" /> 3 <p>Choose "2" <input type="radio" name="b" value="1" /> 1 <input type="radio" name="b" value="2" /> 2 </p><p><input type="submit" value="Submit" /> </p></form> </body> </html> Please advise. Hello I am new to javascript (4 months), I would like to add an hour to the current time each time a button is clicked. I have this code: ------------------------------------------------------------------ var hourstbutton=document.getElementById("button3"); hoursbutton.onclick=function() { var divlink=document.getElementById("math3"); var newtime2=new Date(); var currenthours2=newtime2.getHours()+1; var currentmins2=newtime2.getMinutes(); var currentsecns2=newtime2.getSeconds(); var ampm2= (currenthours2>=12) ? "P.M." : "A.M."; if (currenthours2>=13) { currenthours2-=12; } if(currenthours2<1){ currenthours2=12; } if(currentmins2<10){ currentmins2= "0" + currentmins2; } if(currentsecns2<10){ currentsecns2="0" + currentsecns2; } divlink.innerHTML=currenthours2+":"+currentmins2+":"+currentsecns2+ " "+ampm2; ------------------------------------------------------------------------ How do I tie the number of button clicks into the number of times this code is executed? Any help is appreciated thanks. How can I do this? I'm new to JavaScript. I tried messing with While but it just caused lag as it kept looping infinitely. The problem I think is that I have a variable that changes every time I click the button. The function changes the variable. So it successfully changes the variable once to my likings, then when I click the button (thus running the function) it does nothing. Here's an example I created to show you Quote: <html> <head> <script type="text/javascript"> var x = 50; var y = Math.floor(Math.random()*5); function test() { var a = x+y document.getElementById("testing").innerHTML=a; } </head> <body> <p id="testing"></p> <input type="button" value="asdf" onclick="test()" /> </body> </html> So in this case, I need to click the button multiple times in which each time it should add y to x. It only works once and then goes kaput. Thanks! hi to all, sorry for this question. First I have to say this that I'm very noob in javascript. My question is how to show the value of my radio button when click. I have this code: Code: <tr><td width="10px"></td><td width="60%">Neatness</td> <td width="40%"> <input name="neat" type="radio" class="hover-star" value="1" title="Poor"/> <input name="neat" type="radio" class="hover-star" value="2" title="Fair"/> <input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/> <input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/> </td></tr> say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know hot to do this in jquery. I dont get why that doesn't work... it has me baffled 0.o Code: <html> <div id="divId">Button clicked 0 times</div> <input type="button" value="click me" onclick="divClick()" /> <script type="text/javascript"> var i = 0; function divClick() { var colorNum1 = Math.floor(Math.random()*255); var colorNum2 = Math.floor(Math.random()*255); var colorNum3 = Math.floor(Math.random()*255); var color = "rbg(" + colorNum1 + "," + colorNum2 + "," + colorNum3 + ")"; i++; var divId = document.getElementById("divId"); divId.style.backgroundColor = color; divId.innerHTML = "Button clicked " + i + " times"; } </script> </html> figured it out finally i had rbg instead of rgb >< I am trying to follow this article on doing a POST request with AJAX and PHP and it works fine, but as soon as I switch from the default submit button to an image I get an error. I would really appreciate any assistance on why switching the submit button to an image would affect it. Thanks http://www.hiteshagrawal.com/ajax/form-post-in-php-using-ajax/comment-page-1 When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete. I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size. I have grabbed the event (which references the form, is that right?) and I have something like this: Code: <button type="submit" name="name_can_vary">Search</button> event.name_can_vary.style.visibility = 'hidden'; //(obviously this isn't complete code but no doubt explains what I am talking about) ..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image. Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on). Thanks for any help. I have a script which creates an element of iframe. I have a button which refreshes the iframe link. I need to do something to change a variable in the iframe src on every click of the button. I'll explain the real issue. I have a list of games I have with random name like, boomer.swf, kingdom.swf, balloon.swf and so on. So I somehow made this, Code: var r_text = new Array (); r_text[0] = "boomer"; r_text[1] = "kingdom"; r_text[2] = "balloon"; var i = Math.floor(3*Math.random()) var gamedrome = { game: ""+r_text[i]+""}; Now I have a .js file which creates iframe element Code: function embed_game(params, options) { var data = []; for(var i in params) { data.push(i + "=" + encodeURIComponent(params[i])); } data = data.join("&"); var frame = document.createElement("iframe"); frame.src = "http://website.com/embed/game.html?"+ data; frame.style.width="100%"; frame.style.height="100%"; frame.style.border = "0"; frame.frameBorder = "0"; frame.id="newroom"; .... and another small script to refresh the inner iframe and not the page to change game. Code: <script type="text/javascript"> function Reload () { var f = document.getElementById('newroom'); f.src = f.src; } </script> It all works fine until the game is loaded, but the problem is that if once the game is loaded in site, the iframe source is already set and my button keeps loading the same game. I need to randomize it on every click. Please help me out. I want to change the color of the gridview when a button which has the value of the row index of the gridview is clicked ...this button is not inside the gridview but some where else on the form but it can send the gridview rowindex to the function so need a function to change the color of the row or bring it to focus in someway... |