JavaScript - Enter Key To Trigger Custom Button
Hello,
I need your help. I basically need, when the enter button is pressed on the keyboard to trigger a button. Currently, my code works but it just refreshes the page and does not actually trigger the desired button: Code: //HERES MY CUSTOM BUTTON: <BUTTON TYPE="submit" onMouseOver="goLite(this.name)" onMouseOut="goDim(this.name)" onclick="javascript:v7_search()" CLASS="btn_std" NAME="btn_search" > ? Search </BUTTON> Here's the code to make the enter button work: Code: <form name="frmIMTS" onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btn_search').click();}};" > Any help with this is greatly appreciated. Cheers, J Similar TutorialsI am quite unexperienced in javascript (my only related experience is work with actionscript), so this problem is likely extremely simple. I am trying to alter a bit of code from a Firefox Jetpack extension (ClicktoFlash, if that helps) to suit my needs, and am having some trouble executing a time based event. The pertinent section of the extension's code is as follows: Code: placeHolder.click(function(eventObject){ $(this).replaceWith(jQuery.data( placeHolder, "myEmbed") ); }); The bit of code executed within the function is what I wish to maintain, but I want the code to instead be executed within a certain timeframe. My makeshift attempt to alter the code read like this: Code: var currentTime = new Date(); var hour = currentTime.getHours(); if((hour >= 2) && (hour < 7)){ $(this).replaceWith(jQuery.data( placeHolder, "myEmbed") ); }; This didn't work quite like I had hoped (though I think the code itself is solid), and I think under the circumstances I might need to replicate the placeHolder.click() segment while 7>hour>=2 for the code to execute properly; however, I am having quite a bit of trouble trying to do this. In short, is it possible to trigger a button press without the mouse ever clicking the button, or is there a glaringly apparent easier solution that I'm missing? Thanks in advance. I have some code that will check a users screen resolution and open a new window with a particular version of my website in, I have several sites for different page sizes. But when this code runs in Safari the pop-up is blocked so I would like the image on my page to be a button that runs the code to open the 'correct' window (based on the screen res) and as a button is launching the new window Safari should be okay about it. Unless I am doing something wrong? http://www.meta.projectmio.com/pop.html But how do I modify the code to do this, I'm hopeless? Thanks. Code: <fieldset class="submit" style="padding-left: 200px;"> <?php if ($site_exist >= 1){ echo "<input type=\"submit\" name=\"submit\" value=\"Update\">"; } else { echo "<input type=\"submit\" name=\"submit\" value=\"Submit\">";} ?> <!-- This is the button I am having trouble with. --> <input type="button" name="delete" value="Delete" onClick="return confirmSubmit()"> </fieldset> </form> <script type="text/javascript"><!-- function confirmSubmit(){ var agree=confirm("Are you want to delete this site from our index?"); if (agree) return true ; else return false ; } // --> </script> Not entirely sure which forum this should go in, since the problem could probably be fixed with HTML, PHP or Javascript. Anyway, I have the confirmation window working. What I need is for the button to post a variable (siteDelete = 'true') when it is pressed. I would prefer to do that part without javascript, but I want the data to be posted after and only after the confirmation window returns true. I can do that with a submit button, but I'm not sure what code to use and where to use it when using a non-submit button. I have a basic code for geocoding. I use this code for learning. There is only ONE button on the screen My Questions: 1. How can I set focus on this button so it will be activated when I click Enter ? 2. is it possible to initialize the textbox with the clipboard contents when the hta is loaded ? 3. Is it possible to simulate a click on the button each time the hta is loaded ? Here is the code Many thanks !!! Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Gonen title</title> <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAkpclZCcw0Dd8N7urilPb8RTwi2g_12bF65p4zEDwX2jt7cD0dhQvH8snORVwA2VqfU-YMqHbC23bgg" type="text/javascript"></script> <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAkpclZCcw0Dd8N7urilPb8RTwi2g_12bF65p4zEDwX2jt7cD0dhQvH8snORVwA2VqfU-YMqHbC23bgg" type="text/javascript"></script> <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script> <style type="text/css"> @import url("http://www.google.com/uds/css/gsearch.css"); @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");</style> <script type="text/javascript"> //<![CDATA[ var map; var geocoder; function load() { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(38.134557,-95.800781), 3); geocoder = new GClientGeocoder(); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GScaleControl()) ; // bind a search control to the map, suppress result list } // addAddressToMap() is called when the geocoder returns an // answer. It adds a marker to the map with an open info window // showing the nicely formatted version of the address and the country code. function addAddressToMap(response) { map.clearOverlays(); if (!response || response.Status.code != 200) { alert("Address cannot be geocoded"); } else { place = response.Placemark[0]; point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); marker = new GMarker(point); map.addOverlay(marker); // place coordinates on clipboard var input = String(place.Point.coordinates) window.clipboardData.setData('Text',input); // will close the window window.close(); marker.openInfoWindowHtml(place.address + '<br />' + '<b>Coordinates:</b> ' + place.Point.coordinates); } } // showLocation() is called when you click on the Search button // in the form. It geocodes the address entered into the form // and adds a marker to the map at that location. function showLocation() { // value from input box // var address = document.forms[0].q.value; // value from clipboard var address = window.clipboardData.getData ("Text") geocoder.getLocations(address, addAddressToMap); } // findLocation() is used to enter the sample addresses into the form. function findLocation(address) { document.forms[0].q.value = address; showLocation(); } //]]> GSearch.setOnLoadCallback(load); </script> <script type="text/javascript"> function getposOffset(overlay, offsettype){ var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop; var parentEl=overlay.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function overlay(curobj, subobjstr, opt_position){ if (document.getElementById){ var subobj=document.getElementById(subobjstr) subobj.style.display=(subobj.style.display!="block")? "block" : "none" var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0) subobj.style.left=xpos+"px" subobj.style.top=ypos+"px" return false } else return true } function overlayclose(subobj){ document.getElementById(subobj).style.display="none" } </script> </head> <body onload="load()" onunload="GUnload()"> <table> <tr> </tr> </table> <br /> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <form action="#" onsubmit="showLocation(); return false;" name="geoForm"> <b>Click:</b> <input type="text" name="q" value="" size="0" /> <input type="submit" name="find" value="Get from Clipboard and Map It" /> <br /> </form> <div id="map" style="width: 100%; height: 480px"></div> <hr size=1 align=left width=90% color=#000000 style='border: dotted;'> </form> </body> </html> Hi I have a form setup so that when you enter something in a text field and click a button it checks to see if the value entered in the text field is the "correct" letter and if its right it changes the CSS property of a div container to be shown which then has a link to a the next question. So I don't really have a submit button because my form isn't setup to work with one. This is fine by me but the only problem is when you enter a letter and click enter it acts as a submit and the submit does nothing, which is what it's suppose to do. So what I'm asking is how can I get that button to respond to an enter instead of the default submit taking over the enter key? Hey: I have several "submit" buttons on a form. I want users to be able to hit the "enter" key to submit the form. The page used to "post" the information checks for specifically what form button was pushed to submit the form before executing the appropriate code. I am automatically submitting the page when the enter key is hit, but it is defaulting to the first option of executed code in the post page. Example - I have an "update" button and a "delete" button on the form. On the post page, I first check to see if the delete button was hit. When I press enter on the form, it simply answers yes to the first question (did they click the delete button), and the code is executed. I really wanted to emulate that the update button was hit. So -- is there a way to hit the enter button, and in the js code, mandate that it was the "update" button that was clicked? Thanks. hey there, I have a problem when trying to set a different color for each button on my 4 blocks, matching the proper color. Here is my page http://holidays.area-italia.com I ve copy/paste the default art-button in the template.css file adding a " -red" suffix. I also made a new image with the red colors to match the active/hovered/pressed. Here is the code: Code: /* begin Button-red */ .art-button-wrapper-red a.art-button-red, .art-button-wrapper-red a.art-button-red:link, .art-button-wrapper-red input.art-button-red, .art-button-wrapper-red button.art-button-red { text-decoration: none; font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif; font-size: 13px; position:relative; top:0; display: inline-block; vertical-align: middle; white-space: nowrap; text-align: center; color: #FFFFFF !important; width: auto; outline: none; border: none; background: none; line-height: 37px; height: 37px; margin: 0 !important; padding: 0 26px !important; overflow: visible; cursor: pointer; } .art-button-red img, .art-button-wrapper-red img { margin: 0; vertical-align: middle; } .art-button-wrapper-red { vertical-align: middle; display: inline-block; position: relative; height: 37px; overflow: hidden; white-space: nowrap; width: auto; margin: 0; padding: 0; z-index: 0; } .firefox2-red .art-button-wrapper-red { display: block; float: left; } input, select, textarea { vertical-align: middle; font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif; font-size: 13px; } .art-block-red select { width:96%; } .art-button-wrapper-red.hover .art-button-red, .art-button-wrapper-red.hover a.art-button-red:link, .art-button-red:hover { color: #FFFFFF !important; text-decoration: none !important; } .art-button-wrapper-red.active .art-button-red, .art-button-wrapper-red.active a.art-button-red:link { color: #FCFCFD !important; } .art-button-wrapper-red .art-button-l-red, .art-button-wrapper-red .art-button-r-red { display: block; position: absolute; height: 121px; margin: 0; padding: 0; background-image: url('images/buttonr.png'); (I made a new image with the red colors) } .art-button-wrapper-red .art-button-l-red { left: 0; right: 14px; } .art-button-wrapper-red .art-button-r-red { width: 417px; right: 0; clip: rect(auto, auto, auto, 403px); } .art-button-wrapper-red.hover .art-button-l-red, .art-button-wrapper-red.hover .art-button-r-red { top: -42px; } .art-button-wrapper-red.active .art-button-l-red, .art-button-wrapper-red.active .art-button-r-red { top: -84px; } .art-button-wrapper-red input { float: none !important; } /* end Button-red */ Then I copy/paste the default code button in the index.php adding the "-red" suffix, into my red block: Code: <center> <span class="art-button-wrapper-red"> <span class="art-button-l-red"> </span> <span class="art-button-r-red"> </span> <a class="readon art-button-red" href="javascript:void(0)">More</a> </span> </center> Doing all the mentioned above doesnt work, it always shows the default button. I know there is a javascript which rules it but i dont know how to edit/add the function. Here is my part of the script.js related to the button: Code: /* begin Button */ function artButtonSetup(className) { jQuery.each(jQuery("a." + className + ", button." + className + ", input." + className), function(i, val) { var b = jQuery(val); if (!b.parent().hasClass('art-button-wrapper')) { if (!b.hasClass('art-button')) b.addClass('art-button'); jQuery("<span class='art-button-wrapper'><span class='art-button-l'> </span><span class='art-button-r'> </span></span>").insertBefore(b).append(b); if (b.hasClass('active')) b.parent().addClass('active'); } b.mouseover(function() { jQuery(this).parent().addClass("hover"); }); b.mouseout(function() { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().removeClass('active'); }); b.mousedown(function() { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().addClass('active'); }); b.mouseup(function() { var b = jQuery(this); if (!b.hasClass('active')) b.parent().removeClass('active'); }); }); } jQuery(function() { artButtonSetup("art-button"); }); /* end Button */ Anyone who can help out please? Many thanks. My problem is the following. I have an editable <div>: <div class='edit' id='divContent' name='divContent' ContentEditable>some text</div> If I press 'enter' two lines are skipped. I know that if I press 'shift+enter' only one line will be skipped. If I check the unformatted code of the contenteditable div, 'enter' gives me <p> and 'shift+enter' gives me <br>, which makes sense because <p> is formatted differently than <br>. So I want to change 'enter' into 'shift+enter' I have already found something to capture and kill 'return' function killReturn() { key = event.keyCode; if (key == 13) return false; } But now for some means to replace the killed 'enter' with 'shift+enter'? Thanks a lot in advance for any advise! Hi All, Wondering if someone could help me out. i am developing a simple javascript calculator at the problem is this: When I use the input type = button or submit, then the calculator works fine BUT I need to use a custom button and now the calculator just shows the results for a split second and then disappears and the form reloads I have made the button line in bold. All help appreciated!! Many thanks Here is my code: <html> <head> <script language="JavaScript"> function Framesize(BikeSizer) { var a = parseFloat(BikeSizer.Insleg.value); b = (a * 0.572); c = Math.round(b); BikeSizer.FramesizeCM.value = c; d = (a * 0.226); e = Math.round(d); BikeSizer.FramesizeInch.value = e; } </script> </head> <body> <Form name="BikeSizer"> <!--The visuals for the graphic--> <table cellpadding="0" cellspacing="0" align="center" border="0" width="370"> <tr> <td align="center" valign="top"><img src="images/Calculator_bg_top.gif" border="0"></td> </tr> </table> <table cellpadding="0" border="0" cellspacing="0" align="center" width="370" style="background:url(images/Calculator_bg_mid.gif) repeat-y top center; font-family:Verdana, Arial, Tahoma;"> <tr> <td colspan="2" valign="middle" align="left"> <div style="padding:2px 5px 5px 12px;"> <font style="font-weight: bold; color:#cc6600; font-size:14px">Berechnung der richtigen Rahmenhöhe</font> <br /><a href="#" style="font-size:10px">Wie messe ich die Schrittlänge richtig?</a></div> </td> </tr> <tr> <td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Fahrradart:</div></td> <td><select name="Biketype" style="font-size:11px;"> <option>Mountainbike</option> <option>Trekking-, Reise- oder Cityrad</option> <option>Rennrad</option> </select></td> </tr> <tr> <td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Schritthöe:</div></td> <td><input name="Insleg"></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td> </td> <td><div style="padding:6px 0 8px 0;"> <input type="image" NAME="calc" VALUE="Calculate" src="images/berechnen_btn.gif" onClick=Framesize(BikeSizer)> </div></td> </tr> <tr> <td align="left" valign="top"><div style="font-size:13px; padding:0px 0 7px 12px;"><strong>Rahmenhöe:</strong></div></td> <td align="left" valign="top" style="font-size:13px;"><input name = "FramesizeCM"> <strong>CM</strong> <br /><br /><input name = "FramesizeInch"> <strong>Zoll</strong> </td> </tr> </table> <table cellpadding="0" cellspacing="0" align="center" border="0" width="370"> <tr> <td align="center" valign="top"><img src="images/Calculator_bg_end.gif" border="0"></td> </tr> </table> </FORM> I have a basic function: function Notice() { var selectedCountry = CheckoutForm.elements["shipping-country"].selectedIndex; if (selectedCountry != 'United States') { alert('You are outside the US'); } } I have a select control with id "shipping-country": <select name="shippingCountry" id="shipping-country" > <option value="AF">Afghanistan</option> <option value="AL">Albania</option> ... </select> How can I trigger my function on selection change if I don't have access to html code or the server side code that generated the select control? typically I would just add onchange="Notice();" , but this option is out of the out of the question for the above reason. Any help would be appreciated. Hey everyone, I'm a NOOB, yeah, its hard at the beginning but you have to start somewhere right? Anyway I'm currently building a website that incorporates JavaScript, ActionScript, and the usual CSS and XHTML, but I've run into a bit of a snag. Our wishes for this grass roots web page was to add Ariel Flesler's ScrollTo jQuery plugin to our navigation, to dynamically slide our entire pages from left to right, right to left, upon the users choice. But, our navigation buttons, on our homepage in particular, are within a SWF file. Now is it possible to trigger the ScrollTo effect from buttons within a SWF? If not, can you provide a alternate solution to this dilemma? Thank you all, and I'm happy to be a new student of this community. <area shape="rect" coords="7,24,154,40" href="javascript:triggerCheckout()"> <area shape="rect" coords="7,24,154,40" href="javascript:triggerCheckout();"> <area shape="rect" coords="7,24,154,40" onClick="triggerCheckout()"> <area shape="rect" coords="7,24,154,40" onClick="triggerCheckout();"> None of these works. Why not? How can i link this hotspot area with a javascript function? Hi. I'm working on a usability issue on a website. I have a jquery accordion slider, each slide has a link to a category. Now what happens is that when I go to the category page by clicking on a slider, when the page loads, the sliders always opens the first slide. For example, if I click on the third slide, I would like that slide to be open when the page loads. This is similar to the :current I believe. I think to solve what I need I must trigger a click on the third slide that third slide page opens. I know I need a reference for a condition, so I have ID'd my body through this php code were it gets the page name from the url into variable $page and then into do body's ID: PHP Code: <?php $page = $_SERVER['REQUEST_URI']; $page = str_replace("/","",$page); $page = str_replace(".php","",$page); $page = str_replace("?s=","",$page); $page = $page ? $page : 'default' ?> <body id="<?php echo $page ?>"> Now I've been trying through Javascript to get the variable from php and trigger a click on the slide of the category it is opening: PHP Code: <script type="text/javascript"> var bodyid = "<? $page ?>"; if (bodyid == "energy") { $("document").ready(function() { setTimeout(function() { $("ul#accordion li:second-child).trigger('click'); },10); }); } </script> This is not working and I don't really know what's wrong and how to solve or search for help. Does anyone understand what I'm trying to do here? Thank you. Tonight is one of those nights - which seem to be coming more often - where I just can't seem to do anything right. Here is the menu I'm using embedded in HTML: Code: <td width="40%" align="center"><font color="#000099"><b> <select id="Aircraft"> <option value="0">N148LH</option> <option value="1">N149LH</option> <option value="2">N150LH</option> <option value="3">N151LH</option> <option value="4">N152LH</option> <option value="5">N153LH</option> <option value="6">N155LH</option> <option value="7">N156LH</option> <option value="8">N157LH</option> <option value="9">N159LH</option> <option value="10">N162LH</option> <option value="11">N163LH</option> </select></b></font></td> Now I want to use that code to trigger default values for my Empty Weights. This is what I have and isn't working: Code: var selectmenu=document.getElementById("Aircraft") if (Aircraft=0) { df.ew.value = 1569.41; df.ew_mom.value = 135909.2; } if (Aircraft=1) { df.ew.value = 1570.11; df.ew_mom.value = 135929.76; } Any help is appreciated. If anyone is interested the page this is on is here. Hello, I have this onchange event that occurs after user selection of a dropdown menu. When a user makes a selection it queries the database and delivers some data. The value of the dropdown is stored in a database, but the problem is when the page is refreshed the delivered data disapears, only reappearing if you change the dropdown. How can I make the onchange event run when the page loads so that if there is already a selection, the database data will always be there, only to change if the user changes the selection? Here is the JS: Code: <script type="text/javascript"> function showCustomer(str) {var xmlhttp; 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","getcustomer.asp?q="+str,true); xmlhttp.send();} </script> And the onchange line: Code: <SELECT Name=""customers"" id=""customers"" onchange=""showCustomer(this.value)""> Etc... Please ignore the double sets of quotes. First, I will state that I am totally inexperienced in JavaScript. I have a web site application written in VB.net and asp. The main page uses JavaScript to load a popup page that performs multiple tasks. The main page accepts a variety of incoming messages, only SOME of which need to be passed to this popup page for processing. I found an ugly way to pass the message to the popup by placing it in a Session variable. Now I need to cause it to be handled. I see two possibilities, and I do not have a clue how to implement either. Either one would be great: 1. In the main page, trigger a subroutine in the popup, using JavaScript. OR 2. In the popup, establish a trigger any time that Session variable changes. Thanks in advance for any help on this. I have a video on a page, which on a pc or mac, will play inside a standard flash player. On the iphone, I have setup javascript to detect iphone / ipod, and replace the flash player with an embedded m4v file: Code: if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { $('div#vid').empty(''); $('div#vid').html('<div ontouchstart="incrementHitcount()"><embed src="http://www.gridcity.co.nz/uploaded/images/'+cid+'_bg.jpg" href="http://www.gridcity.co.nz/uploaded/videos/'+cid+'.m4v" type="video/x-m4v" rel="nofollow" target="myself" width="'+vidwidth+'" height="'+vidheight+'" scale="1" id="iphone"></embed><div>'); } So far so good. I also want to trigger a simple onclick which makes an ajax call a remote PHP file. I have tried ontouchstart instead (see above code) but still no luck. If I add the onclick to a static image rather than an embed instance, it works fine. But with the embedded video, it's as if the video blocks the onclick event for javascript to pickup. Does anyone know a way around this? I just wrote an essay to discover it had logged me out and I lost everything. Grrrrrrr. Here goes again, simplified this time. I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over. The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic. My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it? I've tried all morning with no success so far! Thanks, Nick, I'm copy pasting this post this time round, I don't trust this website now I have this which runs on keyup in a textbox but i dont want it to run if the pressed key is enter, how would i go about that? Code: function getList() { var xmlhttp; 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) { showDiv('#', 'result'); document.getElementById("result").innerHTML=xmlhttp.responseText; } } var user = document.getElementById('friendsSearch').value; xmlhttp.open("GET","../friendSearch.php?username="+user,true); xmlhttp.send(); } |