JavaScript - Change (value) Display On Button
Hi
I'm trying to get button to change word + triangle. This ▼ or ▲ is Hex for triangle. I hard code this <input name="b" value="More▼" page loads, the value shown on button is "More and a triangle" (as I would like) but when I then do document.getElementById("moreBtn").value="Less▲" the button displays "Less▲"; (ie no triangle) why? Is this possible? very grateful If any body can explain. Low Tech Similar TutorialsHi guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html> <head> <title>Testing...</title> </head> <script type="text/javascript"> imgs=Array("1.png","2.png","3.png","4.png","5.png"); links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu"); var x=0; function change() { document.getElementById("changes").src=imgs[++x]; if (x==4) { x=-1; } } if (!imgs[x+1]) { x=-1; } </script> <body> <div> <iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe> </div> <br /><br /> <div> <a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a> </div> </body> </html> And this is the link to the test page: http://www.virtualbc.ca/sites/test/ i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. can anyone give me a sample code for this situation ? - button A = labeled as Unlocked - when I on mouse over button A the label should turn into "Lock me ?" - and then when I click the button, the label will change to "Locked" How do I change the Button's value onClick? I want it to initially be "Read More" and then change to "Show Less" Code: <script type="text/javascript"> function toggleMe(a){ var e=document.getElementById(a); if(!e)return true; if(e.style.display=="none"){ e.style.display="block" } else{ e.style.display="none" } return true; } </script> <div>Why are we going to stop making investments in companies like this?</div> <span id="obamaenergyapril212011" style="display:none;"> END 12:50 P.M. PDT</span> <input type="button" name="obama" onclick="return toggleMe('obamaenergyapril212011')" value="Read/Hide More" > I have the one javascripts button code and the functions is on "text area" .. but how do I change the function of this button to go to google.com website ..? how to make it.. the javascripts button code : Code: <input type="image" src="tesdt-copy-1.gif" onmouseover="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-2.gif';" onmouseout="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-1.gif';" onclick="CB(document.getElementById('output').value); return false;" </form name="I5" width="38" height="38"> HI, I have a questions here. Can I change firefox/IE's min/max/X button lay out to lower right corner? I have a web app (let us say i have 2 pages input.php and output.php) when user enters data into input.php and click search output.php renders from server. But the user from anywhere on web should be able to close output.php by using lower right X button. (by default FF/IE has top right X button, may top left in case of MAC), in otherwords I need to change the output.php page NOT on a user machine but on server, so that each user get same lay out when access the page. Is it possible?? pls help me.. Thanks in advance... I'm trying to use an onclick function in a radio button to change the value of a hidden input in another form. What I want to happen is, when the user changes the value of the radio button (0 or 1), the value of the input named 'repeat' is set to 0 or 1 accordingly. The goal being that when I submit the form with input name='repeat' it will send the number indicated by the radio button. (Due to the structure of my page the radio button and the hidden input need to be two separate forms, but I don't think that should be a problem.) The code below isn't working -- the alert("changerepeat called") never even appears. It seems like the problem is that the onclick isn't even activating at all. Any ideas? Code: <script type="text/javascript"> function changerepeat(theval) { alert("changerepeat called"); document.forms[0].elements[0].value = theval; } function tellme() { alert("repeat = "+document.forms[0].elements[0].value); } </script> <form> <input type='hidden' name='repeat' value=''> <input type='button' value='tellme' onclick='tellme()'> </form> <form> <input type='radio' name='changerepeat' onclick='changerepeat(\'0\')'> 0 <input type='radio' name='changerepeat' onclick='changerepeat(\'1\')'> 1 </form> Thanks very much for reading! I want to change radio button values dependent on the selected item in a drop down list. The radio buttons have default values but I need them to be changed when the selection has been made in the drop down list and before the submit button has been pressed so the changed values will be written to the database. Example : Drop down item : National Radio 1 value : Director Radio 2 value : National PA Drop down item : Regional Radio 1 value : Regional Manager Radio 2 value : Regional PA Drop down item : Local Radio 1 value : Store Manager Radio 2 value : Assistant Store Manager Any help will be appreciated. Hey guys, I Should have the textbox value as my radio button value. For example, if I type "5" in the textbox, then the radio button value would change to "5". by the way I have three radio buttons and one textbox and if I select one of those and type something in the text box the value would replace to radio button which is selected and all this have to happen before the page submitted or in the process of submitting. I hope I could find answers here (It's so important for me to solve this problem, For see the form please go to this page, Its above the news frame where you can see three radio buttons and one textbox named shipment tracking ...). thanks so much!!!
I'm trying to make a page where you can change a page's layout through 2 separate CSS's via a button. i want to button to change text when it toggles the layouts as well. i have no clue how to do this with an entire CSS file, but here is something i made to change the background. could i use this logic to change the CSS of a page? HTML <in Code: <input type="button" value="change layout" onclick="toggle()" /> JavaScript Code: var flag = 0; function toggle(){ if(flag==0){ document.getElementById("container").style.backgroundImage="blah.jpg"; flag=1; } else if(flag==1){ document.getElementById("container").style.backgroundImage="blah2.jpg"; flag=0; } } Hi, I am effectively using this script to grab elements based on a select from the db: http://www.w3schools.com/PHP/php_ajax_database.asp My question is, how can I, instead of changing what's present on the page, change the display value to "none", so the elements that are being gathered can be re-submitted to the form? Thanks Code: <script type="text/javascript"> function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } </script> this is really starting to irritate me, and I can't figure it out. Here is the Javascript: Code: function shipUPS(str){ var divShip=document.getElementById("deliv2"); if(str=="ups"){ if (divShip.style.display=="none") { divShip.style.display = '';} } else { if (divShip.style.display!="none") { divShip.style.display = "none";} } } CSS: Code: #deliv2 { display: none; } and the HTML: Code: <div id="deliv1">Deliver To: <select name="DelivToCust" tabindex="10" onchange="shipUPS(this.value)"> <option value="cust">Customer</option> <option value="sr">Sales Rep</option> <option value="pick">Pick-Up</option> <option value="ups">Ship UPS</option> <option value="Other">Other</option> </select> </div> <div id="deliv2">Bill for Shipping? </div> as written, it doesn't work. If I change the CSS to: Code: #deliv2 { display: ; } It works beautifully! however I want the DIV hidden from the start. could someone please help me figure this out? Thank you! Pleas how can i change div bg color with active chcecked radio button <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="1" /> Active performer</div> <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="2" /> Poster</div> <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="3" /> Only attender</div> - if checked, change color from #fff to #ccc For checkboxes i find this <span id="cDate1" style="background-color:#FFF"><input type="checkbox" name="check" id="date1" onclick="document.getElementById('cDate1').style.backgroundColor=this.checked?'#ccc':'#FFF';" /> 13.10.2010</span> Thnx for help in advance I have three divs, Step 1, Step 2, Step 3. I'm trying to get it so when a person clicks the Facebook Like, the style changes to none and Step 2 is revealed and when the Facebook Share is clicked, the Step 3 is revealed. But when I like the first thing, it doesn't change to Step 2. Any thoughts? Code: <div id="Step1"><table border="0" width="630" height="174" background="images/step1-2.jpg"><tr><td valign="top" align="left" style="padding-left: 215px; padding-top: 80px"><br /> <iframe src="http://www.facebook.com/plugins/like.php?href=LINKHERE&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35" scrolling="no" action="like" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe> <br /> </tr></td></table></div><div id="Step2" ><table border="0" style="display: none" width="630" height="174" background="images/step2-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 82px"><br /> <a name="fb_share" type="button" share_url="LINKHERE"></a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"> </script> <br /> </tr></td></table></div><div id="Step3" style="display: none"><table border="0" width="630" height="174" background="images/step3-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 72px"><br /> <center><a href="LINKHERE">Download Here</a> </center></tr></td></table></div><br /> <script type="text/javascript"> window.fbAsyncInit = function() { FB.init({appId: 'ID HERE', status: true, cookie: true, xfbml: true}); FB.Event.subscribe('edge.create', function() { document.getElementById('Step1').style.display = 'none'; document.getElementById('Step2').style.display = 'block'; document.getElementById('Step3').style.display = 'none'; setTimeout('document.getElementById(\'Step1\').style.display = \'none\';document.getElementById(\'Step2\').style.display = \'none\';document.getElementById(\'Step3\').style.display = \'block\';', 7000); }); }; (function() { var e = document.createElement("script"); e.type = 'text/javascript'; e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js"; e.async = true; document.getElementById("fb-root").appendChild(e); }()); </script> Hey Guys, I have this really important question (I'm really stuck! I'm a baby coder ). I have four radio button and four textbox, each one of these textboxes has its own value which is provided from a database, now each one of these textboxes is related to a radio button and what happen is if I select radio button number one then the value of textbox number one is going to change by which is fine but when I'm going to select the other radio buttons (which is obvious that radio button number one is no longer selected) but textbox number one keeps the changed value and don't going back to its default value. let me give you my example (which I working on it right now), I have four textbox and four radio buttons, now my first textbox has a value="1" I select the first radio button and the first textbox value turned to value="2" now I select the second radio button and the second text value change from 1 to 2 just like the first text box (what happened is that the first radio button is deselected but the first textbox value didn’t turn back to its first value which was value="1" and keep the changed value which is value="2" (that happens to all text boxes and radio buttons as well) This is my stupid code: (please help me out here, I'm going to cry, Btw you can completely change the code if you want it’s not important I just need to restore these textbox to their first value if their related radio buttons is no longer selected. one more thing I manage to find a way to do that but I find out it is not stable (onblur) if I click somewhere else in the page (rather than the radio buttons) then the changed value return to default one which is SUCKS! I checked the other event handlers but didn’t work! <script type="text/javascript"> function firstaddit(){ if(document.getElementById("Rate1").value=="1") { document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)+1%>" }} </script> <script type="text/javascript"> function secondaddit(){ if(document.getElementById("Rate2").value=="2") { document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)+1%>" }} </script> <script type="text/javascript"> function thirdaddit(){ if(document.getElementById("Rate3").value=="3") { document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)+1%>" }} </script> <script type="text/javascript"> function fourthaddit(){ if(document.getElementById("Rate4").value=="4") { document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)+1%>" }} </script> <script type="text/javascript"> function ReturnFirstAddit(){ if(document.getElementById("Rate1").value=="1") { document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)%>" }} </script> <script type="text/javascript"> function ReturnSecondAddit(){ if(document.getElementById("Rate2").value=="2") { document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)%>" }} </script> <script type="text/javascript"> function ReturnThirdAddit(){ if(document.getElementById("Rate3").value=="3") { document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)%>" }} </script> <script type="text/javascript"> function ReturnFourthAddit(){ if(document.getElementById("Rate4").value=="4") { document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)%>" }} </script> Choice 1: <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()"> <br/><br/> Choice 2: <input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()"> <br/><br/> Choice 3: <input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()"> <br/><br/> Choice 4: <input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice1").Value)%> <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice2").Value)%> <input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice3").Value)%> <input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice4").Value)%> <input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()"> <br/><br/> Hi Complete novice with Java so need some help please! I want to put a button on a website that when clicked changes the background. The button needs to be an image. For example, click on the image and it makes the background image1 and then click again to switch to background image2. The image/button that is being clicked will be 2 images (one says "turn lights on" then when clicked shows other image "turn lights off") I have managed to pick up bits of code from the net that change the background and got another code that makes 2 images a toggle button. The button changes the background on the first click but no back again on the second click. I guess it needs an if/else statement but not sure. Thanks for any help!!!! 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... I am new to JavaScript and I am having a difficult time finding what I thought would be easy to find (so please forgive me if this has been posted somewhere else...) I have 4 text strings that when a user runs his/her mouseOver, I'd like to display a corresponding picture in a display area. I thought that would be easy enough. However, it gets a bit complicated for me since I am also using CSS to position the display area. For some reason all I can find out there are examples using HTML tables for display image positioning. I don't want to use tables. I'm not sure if this will make a difference but my style sheet is external. Also, the text does not link/go to another page. I REALLY hope that made sense. Someone please help me! Hello everyone Background I have an electronics site on which I have a code generator. Im an stuck on how to acheive something. I will simplify what I want to do, so I can then adapt it to my code. I have a paragraph of text on the web page, on which I want to change some words with in the paragraph depending on 2 radio buttons. Example (radio buttons & short paragraph): (Radio Button) Apples (checked) (Radio Button) Bananas "Welcome to jakes fruit shop. You have selected apples today" (apples being the word that would change if the banana radio button is checked) Here is the code generator if your interested. http://www.jakeselectronics.net/conf...erator877A.php What I actually want to do is put other 'fixed' text in the input text area (near botton of page) with only the config line changing. And If I can be shown how to do the short example above, i think I will be able to edit my generator and get it to do what i want it to do. I have this javascript on top of my HTML codes, that enables the "Free Trial" button if the Checkbox=On. but since I am not a programmer, I need a good mind to help me edit this What I need is to Edit this so that, If focus on Voucher Code field and have at least 6 bytes entered, and also the CheckBox=ON, I want the "Trial" button to change to "Confirm". <script language="Javascript" type="text/javascript"> function enable(){ if (document.agreement_form.agreed.checked==''){ document.agreement_form.submit_button.disabled=true }else{ document.agreement_form.submit_button.disabled=false } } </script> <div style="float:right;width:200px;margin-left:15px;padding-left:15px;margin-top:15px;border-left:2px dotted #99CC00"> <span style="font-weight:bold;font-family:Tahoma;font-size:10pt;">Voucher Code:</span><br/> <form style="font-family:Tahoma;font-size:8pt;" method="GET" action="$authaction" name="agreement_form"> <input name="tok" value="$tok" type="hidden"/> <input name="redir" value="$redir" type="hidden"/> <input size="12" name="voucher" type="password"/> <button type="SUBMIT" disabled="disabled" name="submit_button"><strong> Free Trial </strong></button> <p> </p> <input name="agreed" onchange="enable()" type="checkbox"/> Signed & agreed to all terms and conditions. </form> |