Learn VBA & Macros in 1 Week!

JavaScript - Onclick Event Handlers

Full Excel VBA Course - Beginner to Expert

Onclick Event Handlers	View Content

hi,
i need to be able to take the values from two text boxes and change the location of a sprite on my canvas, i've searched the internet and it doesnt really explain how to do it for me. here is my code:

x: <input type="text" name="x" id="x"/><br />
y: <input type="text" name:"y" id="y"/><br />
<input type="submit" value="Submit" onClick="ChangeCo()" /><br />

function ChangeCo()
{
}

and i need the function to take the x and y values from the text boxes and change the values of my variables:

var block_x;
var block_y;

block_x = 290;
block_y = 70;

Thankyou in advance

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Help With Getting Onclick Event Handlers Out Of Html

Js Event Handlers

Need Help With Event Handlers Outside Of Html

Arrays And Event Handlers

Help With Declaring Event Handlers

Javascript Event Handlers

Event Handlers For Html Table

Native Event Handlers For Uploading / Downloading Files

Onclick Event - Js And Asp.net

How Do I Clear An Onclick Event?

Onclick Event With Two Functions

Onclick Event In Javascript

Not Recognizing Onclick Event

Onclick Event For A Tooltip

How Can I Add An Onclick(event) Listener To This

Tab Gallery Onclick Event

Problem With Onclick Event In Menu.

Javascript Onclick Event Listener

Combine Two Functions For A Onclick Event

Learn VBA & Macros for Excel in 1 Week!

Help With Getting Onclick Event Handlers Out Of Html

Similar Tutorials

I'm trying to figure out a way to put this in all js code with the onclick event handlers and the parameters. I have 3 links that switch the style of my page. Right now I have them working with inline event handlers. Here are my code snippets below.

HTML:

Code:

<head>
    <link rel="stylesheet" href="style1.css" type="text/css" title="style1"/>
    <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
    <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
</head>
		<div class="styleLinks">
		<a href="#" id="style1" onclick="setStyleSheets('style1'); return false;">Style 1</a>
		<a href="#" id="style2" onclick="setStyleSheets('style2'); return false;">Style 2</a>
		<a href="#" id="style3" onclick="setStyleSheets('style3'); return false;">Style 3</a>
		</div>

JS:

Code:

function setStyleSheets(title) {
	//set styles and set cookie
	var i; 
	var attribute;
	var today = new Date();
	var expDate = new Date(today.getTime() + 7*24*60*60*1000);
	var styleSelected = "";
	if (title=="style2"){
		styleSelected = "style2";
	}
	else if (title=="style3"){
		styleSelected = "style3";
	}
	for(i=0; (attribute = document.getElementsByTagName("link")[i]); i++) {
		if(attribute.getAttribute("rel").indexOf("style") != -1 && attribute.getAttribute("title")) {
			attribute.disabled = true;
			if(attribute.getAttribute("title") == title) attribute.disabled = false;
			SetCookie ('style', styleSelected, expDate, "/");
		}
	}
}

Js Event Handlers

Similar Tutorials

good day:

I'm using an ajax script that receives a value into an input box and thus performs a function. I need to invoke the function immediately after the input box has a value. Currently the box has to lose focus in order for the function to work.

What is the correct event handler for this to work?

I have this now PHP Code:
onkeyup="showResult2(this.value)"

which is obviously not what I need.

This is the ajax

PHP Code:
<script type="text/javascript">
function showResult2(strs)
{
if (strs.length==0)
  {
  document.getElementById("livesearch2").innerHTML="";
  document.getElementById("livesearch2").style.border="0px";
  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("livesearch2").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch2").style.border="1px solid #A5ACB2";
    }
  }
xmlhttp.open("GET","getOilChangeDate.php?q="+strs,true);
xmlhttp.send();
}
</script>

Any thoughts on this!
Mossa

Need Help With Event Handlers Outside Of Html

Similar Tutorials

I have tried many conventional methods trying to get my javascript to work without using inline event handlers and for some reason the way my teacher shows us how to do it is not working for me. Any help would be much appreciated. Here is were I left off. The top part of this code is were I was trying to get the event handler to work.

Code:

  
		  function setClock() {
			document.getElementById('custname').focus();
			digitalClock();
		  }
		  var digital;
			
		  function stop(){
			clearTimeout(digital);
		  }

		  function digitalClock(){
			var newDate = new Date();
			var hour, minute;
			var second;
			var time = " ";
			hour = newDate.getHours();
			minute = newDate.getMinutes();
			second = newDate.getSeconds();
			if (hour <= 9) hour = "0" + hour;
			if (minute <= 9) minute = "0" + minute;
			if (second <= 9) second = "0" + second;
			time += hour + ":" + minute + ":" + second;
			document.getElementById('dClock').value = time;
			digital = setTimeout("digitalClock()", 1000);
		  }
		  
		  var validated=true;
		  
		  function validateForm(f) {
				
			validated=isEmpty(f.custname, "customer name");  
			if (!validated) {
				return validated;
			}

			validated=isEmpty(f.phone, "phone");  
			if (!validated) {
				return validated;
			}

			validated=isEmpty(f.email, "email");  
			if (!validated) {
				return validated;
			}
			
			validated=isEmpty(f.address, "address");  
			if (!validated) {
				return validated;
			}
			
			validated=isEmpty(f.city, "city");  
			if (!validated) {
				return validated;
			}
			
			validated=isSelect(f.state);  
			if (!validated) {
				return validated;
			}
			
			validated=isEmpty(f.zip, "zip");  
			if (!validated) {
				return validated;
			}
			
			validated=isNumber(f.qty);  
			if (!validated) {
				return validated;
			}
			
			validated=checkRadio(f.pizza);
			if (!validated) {
				return validated;
			}

			return validated;
		  }
		  
		  var radPizza = 0;
		  
		  function checkRadio(radiobuttons) {
			var i=0;
			while (i<=4 && !radiobuttons[i].checked) {
				if (i==4) {
				alert("Please choose a Pizza.");
				return false;
				}
				i++;
			}
			return true;
		  }
		  
		  function isEmpty(textbox, textString) {
			//match null or blank space
			if (textbox.value.match(/^\s*$/) || textbox.value.match(/^null$/)) {
				alert("Data is not valid for " + textString);
				textbox.style.backgroundColor = "#f4f8b4";
				textbox.focus();
				return false;     
			}
			else {
				textbox.style.backgroundColor = "white";
			}
			if (textString=="customer name") {
				//does not match name format
				if (!textbox.value.match(/^[\w\.\']{2,}([\s][\w\.\']{2,})+$/)) {
					alert("Data is not valid for " + textString);
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			if (textString=="email") {
				//does not match email format
				if (!textbox.value.match(/^[a-zA-Z]{1}[a-zA-Z0-9]+(\.|\_)?[a-zA-Z]+@[a-zA-Z]{1}[a-zA-Z0-9]{0,62}\.(com|net|org)$/)) {
					alert("Data is not valid for " + textString);
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			if (textString=="address") {
				//does not match address format
				if (!textbox.value.match(/^[a-zA-Z0-9\s,'-]*$/)) {
					alert("Data is not valid for " + textString);
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			if (textString=="city") {
				//does not match city format
				if (!textbox.value.match(/^[A-Za-z. ]+$/)) {
					alert("Data is not valid for " + textString);
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			if (textString=="phone") {
				//does not match phone format
				if (!textbox.value.match(/^\(?(\d{3})\)?[-](\d{3})[-](\d{4})$/) || textbox.value.match(/^xxx-xxx-xxxx$/)) {
					alert("Please enter a correct phone number.");
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			if (textString=="zip") {
				//does not match zip format or starting format
				if (!textbox.value.match(/^(?!0{5})(\d{5})(?!-?0{4})(-?\d{4})?$/) || textbox.value.match(/^xxxxx or xxxxx-xxxx$/)) {
					alert("Please enter a correct zip number.");
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			return true;  
		  }
		  
		  function isSelect(selected) {
			if (selected.value=="Select State") {
				alert("Please select a state.");
				selected.style.backgroundColor = "#f4f8b4";
				selected.focus();
				return false;
			}
			else {
				selected.style.backgroundColor = "white";
			}
			return true;
		  }
		  
		  function isNumber(textbox) {
			//match negative number and not equal to a number
			if (textbox.value.match(/^-\d*\.{0,1}\d+$/) || !textbox.value.match(/^((\d+(\.\d *)?)|((\d*\.)?\d+))$/)) {
				alert("Drinks value cannot be negative and has to be a number.");
				textbox.style.backgroundColor = "#f4f8b4";
				textbox.focus();
				textbox.value=0;
				return false;     
			}
			return true;   
		  }
		  
		  function calcPizza() {

			var rad = document.getElementsByName('pizza');				
			for (var i=0; i<rad.length;i++) {
				if (rad[i].checked) {
					radPizza = parseFloat(rad[i].value);
				}
			}	
			
			if (document.getElementById('cheese').checked) {
				var extraCheese = parseFloat(document.getElementById('cheese').value);
			}
			else {
				extraCheese = 0;
			}

		    if (document.getElementById('mushrooms').checked) {
				var addShrooms = parseFloat(document.getElementById('mushrooms').value);
			}
			else {
				addShrooms = 0;
			}
			
			if (document.getElementById('anchovies').checked) {
				var addAnchovies = parseFloat(document.getElementById('anchovies').value);
			}
			else {
			  addAnchovies = 0;
			}
			
			if (document.getElementById('wings').checked) {
				var addWings = parseFloat(document.getElementById('wings').value);
			}
			else {
			  addWings = 0;
			}
			
			if (document.getElementById('dessert').checked) {
				var addDessert = parseFloat(document.getElementById('dessert').value);
			}
			else {
				addDessert = 0;
			}
			
			var qtyDrinks = parseFloat(document.getElementById('qty').value * 1.50);
			if (qtyDrinks<0) {
				qtyDrinks=0;
				document.getElementById('qty').value = 0;
				alert("Drinks amount cannot be negative.");
			}
			
			var total = (radPizza + extraCheese + addShrooms + addAnchovies + addWings + addDessert + qtyDrinks);
			document.getElementById('pizzaPrice').value = total.toFixed(2);

		  }

HTML Code :
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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Pizza To Go</title>
	<script type="text/javascript" src="PizzaCookies.js"></script>
    <script type="text/javascript" src="cookieLib.js"></script>
	<link rel="stylesheet" href="style1.css" type="text/css" title="style1"/>
	<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
	<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
	<script type="text/javascript" src="Validation.js"></script>
</head>

<div class="styleLinks">
<a href="#" id="style1" onclick="setStyleSheets('style1'); return false;">Style 1</a>
<a href="#" id="style2" onclick="setStyleSheets('style2'); return false;">Style 2</a>
<a href="#" id="style3" onclick="setStyleSheets('style3'); return false;">Style 3</a>
</div>

<body id="body_main" onload = "setClock(), testCookies();" onunload = "stop()">
  <script type="text/javascript" src="DigiClock.js"></script>
  <h1>Pizza To Go</h1>
  <form name="pizzaList" id="form1" onsubmit="return validateForm(this)" onreset="return resetForm()" action="#" method="get" >
	<label for="dClock">Digital Clock:</label><input type="text" name="dClock" id="dClock" />
	<fieldset id="customer"><legend>Customer Info</legend>
        <label for="custname">Customer Name: </label><input type="text" name="custname" id="custname" value="" size = "50" maxlength = "48" /><br/>
        <label for="phone">Phone: </label><input type="text" name="phone" id="phone" value="xxx-xxx-xxxx" size = "14" maxlength = "12" /><br/>
        <label for="email">Email: </label><input type="text" name="email" id="email" value="" size = "70" maxlength = "68" /><br/>
		<label for="address">Address: </label><input type="text" name="address" id="address" value="" size = "50" maxlength = "48" /><br/>
		<label for="city">City: </label><input type="text" name="city" id="city" value="" size = "30" maxlength = "28" /><br/>
		<label for="state">State: </label>
		<select name="state" id="state" >
			<option value="Select State">Select State</option>
			<option value="AL">AL</option>
			<option value="AK">AK</option>
			<option value="AZ">AZ</option>
			<option value="AR">AR</option>
			<option value="CA">CA</option>
			<option value="CO">CO</option>
			<option value="CT">CT</option>
			<option value="DE">DE</option>
			<option value="DC">DC</option>
			<option value="FL">FL</option>
			<option value="GA">GA</option>
			<option value="HI">HI</option>
			<option value="ID">ID</option>
			<option value="IL">IL</option>
			<option value="IN">IN</option>
			<option value="IA">IA</option>
			<option value="KS">KS</option>
			<option value="KY">KY</option>
			<option value="LA">LA</option>
			<option value="ME">ME</option>
			<option value="MD">MD</option>
			<option value="MA">MA</option>
			<option value="MI">MI</option>
			<option value="MN">MN</option>
			<option value="MS">MS</option>
			<option value="MO">MO</option>
			<option value="MT">MT</option>
			<option value="NE">NE</option>
			<option value="NV">NV</option>
			<option value="NH">NH</option>
			<option value="NJ">NJ</option>
			<option value="NM">NM</option>
			<option value="NY">NY</option>
			<option value="NC">NC</option>
			<option value="ND">ND</option>
			<option value="OH">OH</option>
			<option value="OK">OK</option>
			<option value="OR">OR</option>
			<option value="PA">PA</option>
			<option value="RI">RI</option>
			<option value="SC">SC</option>
			<option value="SD">SD</option>
			<option value="TN">TN</option>
			<option value="TX">TX</option>
			<option value="UT">UT</option>
			<option value="VT">VT</option>
			<option value="VA">VA</option>
			<option value="WA">WA</option>
			<option value="WV">WV</option>
			<option value="WI">WI</option>
			<option value="WY">WY</option>
		</select>
		<br/>
		<label for="zip">Zip: </label><input type="text" name="zip" id="zip" value="xxxxx or xxxxx-xxxx" size = "14" maxlength = "12" />
    </fieldset>
    <fieldset><legend>Pizza</legend>
        <input type="radio" name="pizza" id="veggie" value="12.95" onclick="calcPizza()"/>Vegetarian ($12.95)<br />
        <input type="radio" name="pizza" id="hawaiian" value="14.95" onclick="calcPizza()"/>Hawaiian ($14.95)<br />
        <input type="radio" name="pizza" id="meatlovers" value="16.95" onclick="calcPizza()"/>Meat Lovers ($16.95)<br />
        <input type="radio" name="pizza" id="works" value="18.95" onclick="calcPizza()"/>The Works ($18.95)<br />
        <input type="radio" name="pizza" id="fourcheese" value="15.95" onclick="calcPizza()"/>Four Cheese ($15.95)
    </fieldset>
    <fieldset><legend>Extras</legend>
        <input type="checkbox" name="cheese" id="cheese" value="2" onclick="calcPizza()"/>Extra cheese ($2.00)
        <input type="checkbox" name="mushrooms" id="mushrooms" value="2.5" onclick="calcPizza()"/>Mushrooms ($2.50)
        <input type="checkbox" name="anchovies" id="anchovies" value="3" onclick="calcPizza()"/>Anchovies ($3.00)
    </fieldset>
    <fieldset><legend>Sides</legend>
        <input type="checkbox" name="wings" id="wings" value="2.75" onclick="calcPizza()"/>Wings ($2.75)
        <input type="checkbox" name="dessert" id="dessert" value="6.95" onclick="calcPizza()"/>Dessert pizza ($6.95)
    </fieldset>
    <fieldset><legend>Drinks ($1.50)</legend>
        <label for="qty">Quantity: </label><input type="text" name="qty" id="qty" size="5" value="0" onkeyup = "calcPizza()"/>
    </fieldset>
    <p><label for="pizzaPrice">Order total: $</label><input type="text" name="pizzaPrice" id="pizzaPrice" value="0" /></p>
    <input type="submit" value="Place Order" /><input type="reset" value="Clear Form" />
  </form>
</body>
</html>

Arrays And Event Handlers

Similar Tutorials

Hi,

I'm having two issues:

First, is there an easier way for my showValue function to display the image file name without running a bunch of if statements? I tried doing something like document.getElementById('imgFile').value = imgArray[n]; but that did not seem to work.

Second, I'm trying to have the image file name change in my textbox when I click any button. I've accomplished this with onblur, but that only works if I click on the textbox. I'd like it to just change automatically.

Thanks for you help!

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Asn4CStartup.htm by Heath Parish</title>
<style type="text/css" >
   h1, h2, h3 {font-family: 'arial black';}
   .controls { font-family: 'arial black'; font-size:10pt;}
</style>
<script type="text/javascript">
   /* <![CDATA[ */
   //  Note: variables declared inside a function
   //            using the var keyword are all local variables. It means that these
   //            variables are only known inside the function. Other functions cannot see
   //            the values.
   //            On the other hand if a variable is declared outside any function, these are global
   //            variables. The values of global variables are available in all other functions.
   //            Other function can change the values of global variables.

   //   Declare a global var n:
   var n=0; // we will use this global variable to keep track of exactly which element of the array
                  // is being displayed now. When the user clicks Next button, we will add 1 to n and
                  // then display the image file in the nth element of the array

   // Declare a global array that will contain the names of image files.
   var imgArray = new Array();

   // The following function will be triggered on the onload event of the page.
   function fillArray()
   {
      // alert ("Hello on load");
      imgArray[0]="Bus1.jpg";
      imgArray[1]="Bus2.jpg";
      imgArray[2]="Fam1.jpg";
      imgArray[3]="Fam2.jpg";
      imgArray[4]="Honey1.jpg";
      imgArray[5]="Honey2.jpg";
      imgArray[6]="Map1.png";
      // for ( i in imgArray)
      // alert (imgArray[i]);

   }

   function showNext()
   // This function will be triggered on click of the Next button
   {  // alert ("Hello showNext");
      // alert(n);
      n = n+1;
      //alert (n);
      if (n > imgArray.length-1)
      {   alert ('You are already on the last image');
          n = n-1;
      }
      else
         document.getElementById('imgPic').src='images/'+imgArray[n];

   } // end showNext()

   function showPrevious()
    // This function will be triggered on click of the Previous button
   {
        // alert("Hello Previous");
        // alert(n);
        n = n-1;
        // alert (n);
        if (n < 0)
        {    alert ('You are already at the first image');
              n = n+1;
        }
       else
           document.getElementById('imgPic').src='images/'+imgArray[n];
 
   }  // end showPrevious()

   function showFirst()
    // This function will be triggered on click of the First button
   {
        // alert("Hello First");
        // alert (n);
        
	if (n == 0)
        {    alert ('You are already at the first image');
        }
       else
           document.getElementById('imgPic').src='images/'+imgArray[0]; n = 0;

   }  // end showFirst()

   function showLast()
    // This function will be triggered on click of the Last button
   {
        // alert("Hello Last");
        // alert(n);
        // alert (n);
        if (n >= 6)
        {    alert ('You are already at the last image');}
       else
           document.getElementById('imgPic').src='images/'+imgArray[6]; n=6;

   }  // end showLast()

   function showValue()
    // This 
   {
        if (n == 0) { document.getElementById('imgFile').value = "Bus1.jpg"}
        else if (n == 1) { document.getElementById('imgFile').value = "Bus2.jpg"}
        else if (n == 2) { document.getElementById('imgFile').value = "Fam1.jpg"}
        else if (n == 3) { document.getElementById('imgFile').value = "Fam2.jpg"}
        else if (n == 4) { document.getElementById('imgFile').value = "Honey1.jpg"}
        else if (n == 5) { document.getElementById('imgFile').value = "Honey2.jpg"}
        else { document.getElementById('imgFile').value = "Map1.png"}

   }  


   /* ]]> */
</script>
</head>

<body onload="fillArray();">
<div>
   <h1> Asn4CStartup.htm by Mesbah Ahmed </h1>
   <h2>Windsurf Image Navigation </h2>
   <h2>Name of the Image file shown below:
   <input class = "controls" readonly="readonly" type="text" id="imgFile" size ="25" onblur="showValue();"/> </h2>

   <img id="imgPic" src = "images/Bus1.jpg" alt="picture" width="500px" height="350px" /> <br/>
   <input type="button" value="Next" class="controls"
               onclick="showNext();"  />
   <input type="button" value="Previous" class="controls"
          onclick="showPrevious();"  />
   <input type="button" value="First" class="controls"
          onclick="showFirst();"  />
   <input type="button" value="Last" class="controls"
          onclick="showLast();"  />
   <p>
        <img src="http://www.w3.org/Icons/valid-xhtml11.png"
	              alt="Valid XHTML 1.1!" height="31px" width="88px" />

	              <img src="http://jigsaw.w3.org/css-validator/images/vcss-blue.png"
		            alt="Valid CSS!" height="31px" width="88px" />
     </p>
</div>
</body>
</html>

Help With Declaring Event Handlers

Similar Tutorials

Today I have been embedding some Google Maps on my website. When I got around to putting in event handlers for markers on the map I ran into some trouble with how to declare them in the way I have the map setup.

The issue is that I have an array, label, and want to indicate a single element from that array to the event handling function. But the declaration of this seems tricky.

The code in question are the two lines like this one in the script below:

GEvent.addListener(marker[i], 'mouseover', function() { map.addOverlay(label[i]); });

Specifically, the problem is with function() { map.addOverlay(label[i]); because I don't want label[i] to be used, but whatever value i has should be substituded in there. But since this is a function being declared and not actually executed the value for i does not get used.

I've been able to get it to work by using eval() to force the actual value of i into the code, like so:

eval('GEvent.addListener(marker[i], \'mouseout\', function() { map.removeOverlay(label['+i+']); });');

but am wondering if there is a better solution?

Here's a section of my script showing the issue in context. You can see that i is incremented with a loop and used as the index of a few arrays.

Code:

for (i = 0; i < buildings.length; i++) {

	icon[i] = new GIcon();

	icon[i].image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
	icon[i].iconSize = new GSize(12, 20);
	icon[i].iconAnchor = new GPoint(6, 20);

	map.addOverlay(marker[i] = new GMarker(new GLatLng(buildings[i][1], buildings[i][2]), {icon:icon[i]}));


	label[i] = new ELabel(new GLatLng(buildings[i][1], buildings[i][2]), '<nobr>'+buildings[i][3]+'<\/nobr>', 'maplabel');

	GEvent.addListener(marker[i], 'mouseover', function() { map.addOverlay(label[i]); });

	GEvent.addListener(marker[i], 'mouseout', function() { map.removeOverlay(label[i]); });
}

Javascript Event Handlers

Similar Tutorials

can someone please explain the code in this link. Just this small bit since i seen it in a few different places.
it starts off with if (!e) ...
please explain wth that means
thank you so much

heres the link - http://www.w3schools.com/js/tryit.as...ent_srcelement

Event Handlers For Html Table

Similar Tutorials

Native Event Handlers For Uploading / Downloading Files

Similar Tutorials

Well just came to notice this lack of tools on javascript to manage uploads or downloads while working on my new project.

I've been trying different ways to get the upload progress, stimated time left, upload speed average, but everything I have done was somehow dirty.

I have spent the last two days trying to get a flash file do this for me, and there is always an issue and you have to get a tricky solution to get something that should be a native javascript support at this age of the web.

What do you think guys, isn't the web mature enought to get a decent upload / download progress functions?

What are big guys doing, youtube, google, flickr?

Onclick Event - Js And Asp.net

Similar Tutorials

Hi,

New to javascript. Doing web page with ASP/VB.NET. Have text boxes for UI on page. Two command buttons - Submit (for db update) and Cancel. I need the Cancel button to prompt the user to verify cancellation. Need OK/Cancel buttons on alert. If user selects Cancel-no action. If user selects OK then I want the text boxes cleared of user text input and focus returned to first text box. I think this may be the code but do not know how to apply it.

function Clear()
{
var res=window.confirm("Please confirm cancellation-text boxes will be cleared");
if(res==true)
{
document.getElementById("StrtDte").value="";
document.getElementById("EndDte").value="";
document.getElementById("txtProjRegHrsAl").value="";
document.getElementById("txtProjOTHrsAl").value="";
document.getElementById("ddlRAS").focus();
}
}

Is this code valid or invalid for the events I need? How do I set it to fire when user clicks the ASP Cancel button?

Thanks,

John

Onclick Event

Similar Tutorials

Hello forum,
My name is juan and recently started html programming. I have a web page with a drop box with the name of states.
Code:

<option value="">Alabama</option>
<option value="">Alaska</option>

I can add a onclick="code here" to the tag so that when the drop box alabama is selected it triggers the onclick event.

Im using Ibox in order to have a image of the state open.

Code:

<a href="images/large/image_1b.jpg"  rel="ibox" title="alabama at 1024x450!"><img 
src="images/small/image_1.jpg" alt=""/></a>

the above is a <a> link tag correct? How do I go bout adding the above code into the onclick event?

How Do I Clear An Onclick Event?

Similar Tutorials

I've got a checkbox that, when clicked, displays new text inputs. However, when I "uncheck" the box, the fields don't disappear unless I reload the entire page. What code can I add to reset the box to null when it is unchecked?

Here's the function code I have:
Code:

<script>
function showUserReg() {
	document.getElementById("userReg").style.display = "inline";
		}
</script>

And here's the inline code:
Code:

<input type="checkbox" name="additional" value="userRegister" onclick="showUserReg()"/> Yes! Register me now!<br/>

<span id = "userReg" style="display:none">
<table class="nobord" align="center">
<tr>
<td>Choose a username:</td>
<td><input type="text" name="username" size="35"/></td>
</tr>
<tr>
<td>Choose a password:</td>
<td><input type="password" name="password" size="35" maxlength="20"/></td>
</tr>
<tr>
<td>Confirm password:<font color="red">*</font></td>
<td><input type="password" name="password" size="35" maxlength="20"/></td>
</tr>
</table>		
</span>

Thanks for any help.

Onclick Event With Two Functions

Similar Tutorials

Hi,

I am trying to get my onclick event to handle both of the function below. I want the event to return false (stop executing) if any of the two functions return false. Here is my code:
Code:

function isNumeric(elem, helperMsg){
            var numericExpression = /[0-9]+/;
            if(!elem.value.match(numericExpression)){
                SaveRecord();
                return true;
            }else{
                alert("You cannot enter numbers in the Comments field.");
                return false;
            }                                   
        }
        
        function lengthRestriction(elem, min, max){
           var x = elem.value;
           if(x.length >= min && x.length <= max){
                SaveRecord();
              
           }else{
                alert("Please enter between " +min+ " and " +max+ " characters in the Issue Number field");
               
           }
        }

Please help me. Thank you.

Onclick Event In Javascript

Similar Tutorials

I assum the following html code:

<div id="id1" onclick="click()">A<div>
<div id="id2" onclick="click()">B<div>

Do you know how to get ID = id2 when I onclick on A?

Not Recognizing Onclick Event

Similar Tutorials

I'm having an issue where a programmatic click event is not behaving the same way the cursor click event is. A cursor click returns the correct object from GetObject(). The programmatic click triggered by a USB device is returning undefined from GetObject(). How can this be resolved?

Edit: It appears that it does not recognize eval(document.getElementById(gButtonList[gButtonId])).onclick(); as an event. Why is this? How can I get it to recognize it?

Edit2: Resolved it myself. See green text below.

TestPage.htm:
Code:

<script language="JavaScript" src="../bin/USBHelperFile.js"></script>
<script language="JavaScript" type="text/JavaScript">

function BuildButtons()
{
    for (var i = 0; i < testArray.length; i++)
    {
        // Create Div  [Buttons created programmatically] 
        var divNode = document.createElement('div');
        divNode.id = 'div' + i;
        divNode.onclick= ClickFunction;
         etc... 
    }
}

function ClickFuntion(nodeButtonNum)
{
    alert(GetObject()); 
     Returns the index for a cursor click. Returns undefined for
    the programmatic click triggered by the USB device 
}


function GetObject()
{
    var node = event.srcElement;
    return node;
}
</script>

USBHelperFile.js:
Code:

 This JS file works with a USB hardware device that can navigate
through divs and click them when they have focus. 

function HelperFunction(keyCommand)
{
    switch (keyCommand)
    {
        case: "click":
             // eval(document.getElementById(gButtonList[gButtonId])).onclick();
             var target = eval(document.getElementById(gButtonList[gButtonId]));
            target.fireEvent("onclick"); 
            break;
    }
}

Onclick Event For A Tooltip

Similar Tutorials

Hi I would like to use javascript to control what tooltip displays when a tab is rolled over depending on which tab was clicked.

Code:

  <li id='1tab_1a' class='selected'><a id='1link_1a'  title="Customer Info Screen"><span >Customer Info</span></a></li>
  <li id='1tab_1b' ><a id='1link_1b'  title="Order Detail"  ><span>Order</span></a></li>
 
 <li id='1tab_1c' ><a id='1link_1c'  title="Phone Detail" ><span>Phone:  7093521232</span></a></li>

For example when the Customer Info tab is selected I would like the tooltips to be like above but when Order is the tab selected I would like the
tooltip to say Customer Info Detail, Order Detail Screen, and Phone Detail. How could I use an onclick event to control what tooltip is being
displayed depending on which tab is selected? I have about 20 sets of customer info and sometimes not everyone contains all of the tabs and I
would also like to be able to add more customers.

How Can I Add An Onclick(event) Listener To This

Similar Tutorials

here the deal ,,I've solved all but this problem in my script
i have my page setup with 1 iframe and the main html
the code below is exactly how the page will show up in the iframe, you can copy and paste the whole thing and save it as a htm file to view if needed..
I need a way to catch the clicks that happen within the iframe but from the main section of the page..heres why!
this is inserted at the top of the page if(top.location==self.location){top.location="RefESI_search.asp";} just above top.document.reset.RefCat.value=

I can get the page to load even with this in the iframes ..but for the purposes of this i left it out so the page would load ok for anyone thats gonna try and help . theres only 2 links in the code.. hopefully whatever will hopefully solve this problem will be able to tell which links were clicked,and i can can point them to the apropriate links.

I've looked thru alot of the threads so i know there are some extremely brite ppl in here that can knock this problem out of the ball park very easily.. you can grab the styles sheet from here https://www.docs.sony.com/reflib/Style_esi.css

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ref_Lib_Results</title>
<link rel="stylesheet" type="text/css" href="home.css"/>
<script language="javascript">
 
  top.document.reset.RefCat.value="Home Receiver";
  top.document.reset.NarrowRef.value="Good";
  top.document.reset.criteria.value="stra";
  top.document.reset.searchscope.value="model";
  top.document.reset.companyscope.value="SONY";
  top.document.reset.company.value="SONY";
  if(""==""){top.reset();}
	function popUp(URL,Name) {
		var day = new Date();
		var id = "page" + Name;
		window.open(URL, id, "toolbar=1,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=600,height=600");
  }
  
	function launchjsmanuals(flag, x, y, z, id) {
		//var myTypeLib = new ActiveXObject("Scriptlet.Typelib");
		//var GUID = new String(myTypeLib.guid).substr(1,8);
		//var endguid = new String(myTypeLib.GUID).substr(25,10);
		if((x.indexOf("CHM")!=-1) || (x.indexOf("chm")!=-1)){
			alert("You will be prompted to download a file\n\nClick Open - Do NOT click Save");
		}
		var whnd = "page" + id; //+ GUID + endguid;
		var URL = '_manualusage.asp?flag='+flag+'&manual=' + x + '&user=' + y + z + '&manualid=' + id;
		if(flag!=""){
		  whnd = window.open(URL,whnd, "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=560,height=600");
		}else{
		  whnd = window.open(URL,"Loader", "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=560,height=600");
		}
  }
  function emailit(id, url,name,type,filesize,model,email,custname,cs3event,user){
	var namestring = name;
	var re = new RegExp('&','gi');
	namestring = namestring.replace(re,'and');
	name = namestring;
    var xurl = "/srvs/common/email.asp?id="+id+"&emailurl="+url+"&title=" + name + "&type="+type+"&model=" + model + "&filesize=" + filesize + "&email=" + email + "&custname=" + custname + "&convid=" +cs3event + "&user=" + user;
    popUp(xurl,id);
  }
  function NarrowSearch(what,value,cat){
    switch(what){
    	case "Category":
    	  parent.document.SearchForm.RefCat.value=value;
    	  parent.document.SearchForm.NarrowRef.value="Good";
    	  parent.document.SearchForm.submit()
    	  break;
    	case "Model":
    	  if("Home Receiver"!=""){
    	    parent.document.SearchForm.RefCat.value="Home Receiver";
    	  }
    	  parent.document.SearchForm.criteria.value=value;
    	  parent.document.SearchForm.searchscope.value="model";
    	  parent.document.SearchForm.NarrowRef.value="Good";
    	  parent.document.SearchForm.submit()
    	  break;
    	case "ONLY":
    	  parent.document.SearchForm.criteria.value=value;
    	  parent.document.SearchForm.searchscope.value="model";
    	  parent.document.SearchForm.RefCat.value=cat;
    	  parent.document.SearchForm.NarrowRef.value="Only";
    	  parent.document.SearchForm.submit()
    	  break;
    	case "ALL":
    	  parent.document.SearchForm.criteria.value=value;
    	  parent.document.SearchForm.RefCat.value=cat;
    	  parent.document.SearchForm.NarrowRef.value="ALL";
    	  parent.document.SearchForm.submit()
    	  break;
    }
  }
</script>
</head>
<body>
<div id="results">
<div style="height: 400px;border-bottom:1px solid black;" 
class="modelblock">
<div style="margin-left:20px; margin-right:15px; margin-top:10px; font-size:10pt">
<span style="float:Right;margin-top:10px;text-align:right">
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<div style="background:silver;color:black;font-size:10px;padding:2px;border:1px solid gray;cursor:pointer" onclick="javascript:NarrowSearch('ALL','stra','Home Receiver')">Display All Models</div>
</td><td>&nbsp;</td><td><div style="width:40px;background:silver;color:black;font-size:10px;padding:2px;border:1px solid gray;cursor:pointer;text-align:center" onclick="javascript:history.go(-1)">Back</div></td></tr></table></span><b>Your search of "<font color=green>stra</font>" matches 66 Models in the Home Receiver category.</b><br><br>Please select the specific model to continue:<table border=0 cellpadding=0 cellspacing=2><tr><td><a class="modellink" onMouseOver="this.className='modellinkhover'" onMouseOut="this.className='modellink'" onclick="javascript:NarrowSearch('ONLY','STRAV1000','Home Receiver')"><b>STRA</b>V1000</a></td><td width=15px></td><td><a class="modellink" onMouseOver="this.className='modellinkhover'" onMouseOut="this.className='modellink'" onclick="javascript:NarrowSearch('ONLY','STRAV1010','Home Receiver')"><b>STRA</b>V1010</a></td><td width=15px></td></tr></table</div></div></div>

<iframe name="Loader" id="Loader" src="blank.htm" style="display:none;height:150px;width:100%;border:1px solid silver"></iframe>
<a onclick="document.getElementById('Loader').style.display='';">*</a>
<script language="javascript">
  //alert(parent.IQ.location.href);

</script>
</body>
</html>

Tab Gallery Onclick Event

Similar Tutorials

I was trying to help someone on another forum and seem to have run into a brick wall.

The main problem that has got me stumped at the moment is that clicking on the images in the 1st tab work fine.
However the subsequent tab selections and clicks do not change the "bigImage" correctly (not at all).
Perhaps some other more experienced forum members can identify what I doing wrong at this time.

I believe it is in my set-up of the onclick events in the "onload=" section, but I not the best at this event stuff yet!
Code:

  var sel, tmp, elem;
  var j=0;
  for (var i=0; i<imgGroupArray.length; ++i) {
    sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
    while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
  }

Here is the full code that 'almost' works:
Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Tab Gallery </title>

<style type="text/css">
li { display:inline; list-style-type:none; border:1px solid blue; margin:3px; }
.imgBlock { display:none; }
</style>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=250787

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgGroupArray = [
    ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'],
    ['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'],
    ['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'],
    ['41.jpg','42.jpg','43.jpg','44.jpg','45.jpg'],
    ['51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'],
    ['61.jpg','62.jpg','63.jpg','64.jpg','65.jpg']  // NOTE: No comma after last entry
];

function tabGroup(which) {
  var sel = document.getElementById('imgGroup').getElementsByTagName('div');
  for (var i=0; i<sel.length; ++i) {
    sel[i].style.display = 'none';
  }
  var tmp = 'imgGroup'+which;  // alert(tmp);
  document.getElementById(tmp).style.display = 'block';
}

function setBigImage(info) {    // alert(info);
  document.getElementById('bigImage').src = info;
}
window.onload = function() {
  var img;
  for (var i=0; i<imgGroupArray.length; ++i) {
    for (var j=0; j<imgGroupArray[i].length; ++j) {
      img = document.createElement('img');
      img.setAttribute('src', baseURL+imgGroupArray[i][j]);
      img.setAttribute('height','100px');
      img.setAttribute('width','75px');
      document.getElementById('imgGroup'+i).appendChild(img);
    }
  }

// Following modified from:
// http://www.codingforums.com/showthread.php?t=102896&highlight=addevent+onclick
  var sel, tmp, elem;
  var j=0;
  for (var i=0; i<imgGroupArray.length; ++i) {
    sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
    while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
  }

  tabGroup(0);
}

</script>

</head>
<body>
<div id="tabMenu">
 <div style="float:left">
  <li onclick="tabGroup(0)">Tab 1</li>
  <li onclick="tabGroup(1)">Tab 2</li>
  <li onclick="tabGroup(2)">Tab 3</li>
  <li onclick="tabGroup(3)">Tab 4</li>
  <li onclick="tabGroup(4)">Tab 5</li>
  <li onclick="tabGroup(5)">Tab 6</li>
 </div><br>
 <div id="imgGroup"
  style="width:300px; height:300px; border:1px solid red; float:left">
  <div id="imgGroup0" class="imgBlock"></div>
  <div id="imgGroup1" class="imgBlock"></div>
  <div id="imgGroup2" class="imgBlock"></div>
  <div id="imgGroup3" class="imgBlock"></div>
  <div id="imgGroup4" class="imgBlock"></div>
  <div id="imgGroup5" class="imgBlock"></div>
 </div>
 <div id="bigImageDiv"
  style="width:250px; height:300px; border:1px solid red; float:left;">
   <img id="bigImage" src="" alt="bigImage here!">
 </div>
 <br style="clear:both">
</div>
</body>
</html>

Problem With Onclick Event In Menu.

Similar Tutorials

i m very new to this thread so i will try to be as clear as possible

i m try to create a website where i n have inserted a menu (this menu template i found online which is free.)
Code:

<div id="menu">
  <ul class="menu">
	  <li><a href="#" class="parent"><span>Home</span></a>
	<li><a href="#"><span>Cities</span></a>
				<div><ul>
					<li><a href="#"><span>Pune</span></a></li>
					<li><a href="#"><span>Mumbai</span></a></li>
					<li><a href="#"><span>Delhi</span></a></li>
					<li><a href="#"><span>Madras</span></a></li>
				</ul></div>
	</li>
			<li><a href="#"><span>Login</span></a></li>
            <li><a href="#"><span>About Us</span></a></li>
			<li class="last"><a href="#"><span>Contact Us</span></a></li>
  </ul>
</div>

what i am trying to do here is when i click on city (one of the menu) it should read the values from database table (the table name is cityCode. this table contains two rows first cityName and second cityCode) n depending on which city is selected it should retrieve the code of that city. also where to save that retried value because i want to use that retried code to extract value from another table.

Javascript Onclick Event Listener

Similar Tutorials

Hi Everyone,

How would i add an avent listener to change the source of an image? I have added the image to a canvas element through javascript using the code below.

Code:

var start = new Image();
start.src = "start.jpg";
ctx.drawImage(start, 50, 50);

Thanks!

Combine Two Functions For A Onclick Event

Similar Tutorials

I am try to make a form that appears to be multi page. I am trying to use a button to hide one div and display another at the same time my script is

head
Code:

<script language=javascript type='text/javascript'> 
function hidediv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){//if they are 'see' divs 
if (document.getElementById) // DOM3 = IE5, NS6 
divs[i].style.visibility="hidden";// show/hide 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'hidden'; 
else // IE 4 
document.all.hideShow.divs[i].visibility = 'hidden'; 
} 
} 
}

function showdiv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){ 
if (document.getElementById) 
divs[i].style.visibility="visible"; 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'visible'; 
else // IE 4 
document.all.hideShow.divs[i].visibility = 'visible'; 
} 
} 
} 
</script>

body
Code:

<form name="PublicOrderPage" action="save_client_information.php"  onsubmit="return validateForm()" method="post">


<div id="div1" style="width:600px; height: auto;background: yellow;">
<table width="600" border="0">
<tr>
<legend><h3 style="padding-left:172.5px;">Required Client Information</h3></legend>
</tr>
   <tr>
    <td style="padding-left:25px;"><b>Name:</b></td>
    <td><input type="text" name="client_name" id="client_name" value="<?php echo $_POST['client_name']; ?>" /></td>
	<td style="padding-left:25px;"><b>Home Phone:</b></td>
    <td><input type="text" name="client_home_phone" id="client_home_phone" value="<?php echo $_POST['client_home_phone']; ?>" /></td>
  </tr>
  </table>
  <br/>
 <table width="270" border="0"> 
	<tr>
		<td style="padding-left: 180px;"><b>Email:</b></td>
		<td><input type="text" name="client_email" id="client_email" value="<?php echo $_POST['client_email']; ?>" /></td>
	</tr>
</table>
<br/>
<table>
	<tr>
		<td style="padding-left:280px;"><input name="save_client_info" type="button" value="Next" onclick="hidediv('1');shwodiv('2');" >  </td>
	</tr>
</table>
</div>




<div id="div2" style="width:600px; height: auto;background: yellow; ">
<table width="600" border="0">
<tr>
<legend><h3 style="padding-left:172.5px;">Required Site Information</h3></legend>
</tr>
   <tr>
    <td style="padding-left:25px;"><b>Site Street:</b></td>
    <td><input type="text" name="site_street" id="site_street" value="<?php echo $_POST['site_street']; ?>" /></td>
	<td style="padding-left:25px;"><b>Site City:</b></td>
    <td><input type="text" name="site_city" id="site_city" value="<?php echo $_POST['site_city']; ?>" /></td>
  </tr>
  </table>
  <br/>
  
  <legend><h3>Inspection Type</h3></legend>
 <table width="270" border="0"> 
	 <table width="602" border="0">
    <tr>
      <td width="252"><input type="checkbox" name="cb_full_home" id="cb_full_home" <?php if ($_POST['cb_full_home']) echo 'checked="checked"'; ?> />
        Full Home</td>
      <td width="150"><input type="checkbox" name="cb_4_point" id="cb_4_point" <?php if ($_POST['cb_4_point']) echo 'checked="checked"'; ?> />
        4 Point</td>
    </tr>
    <tr>
      <td ><input type="checkbox" name="cb_condominium" id="cb_condominium" <?php if ($_POST['cb_condominium']) echo 'checked="checked"'; ?> />
        Condominium</td>
      <td ><input type="checkbox" name="cb_wind_mit" id="cb_wind_mit" <?php if ($_POST['cb_wind_mit']) echo 'checked="checked"'; ?> />
        Wind Mit</td>
    </tr>
    <tr>
      <td ><input type="checkbox" name="cb_roof_cert" id="cb_roof_cert" <?php if ($_POST['cb_roof_cert']) echo 'checked="checked"'; ?> />
        Roof Cert</td>
      <td ><input type="checkbox" name="cb_drywall" id="cb_drywall" <?php if ($_POST['cb_drywall']) echo 'checked="checked"'; ?> />
        Drywall</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cb_reinspect" id="cb_reinspect" <?php if ($_POST['cb_reinspect']) echo 'checked="checked"'; ?> />
        Re-Inspect</td>
      <td><input type="checkbox" name="cb_followup" id="cb_followup" <?php if ($_POST['cb_followup']) echo 'checked="checked"'; ?> />
        Follow-Up</td>

</table>
<img src="CaptchaSecurityImages.php" />
Security Code: 
<input id="security_code" name="security_code" type="text" />
<br />
<input name="save_client_info" type="submit" value="Save" />
</div>
</form>

When the next button is used I would Like to Hide Div1 And Display Div2 so that it looks as if it is a new page.

Any help would be greatly appreciated.