JavaScript - Seemingly Easy Html/javascript Onclick Events?

Is it possible to add an onclick event to an iframe or perhaps a DIV that holds an iframe?

In specific I am using the Facebook Open Graph like button:

Code:

<iframe src="http://www.facebook.com/plugins/like.php?layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;href=http://urltoshare.com/" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:21px"></iframe>

What I would like to do is add a simple onclick event to it so that I can run a process when the user clicks on it, at the moment I am just trying alert but cannot get it to work. By setting the iframe within a DIV with height/width specs set would an onclick event work within the DIV?

Hi all,

I hope that someone can help me with this strange problem I have here.

I have some script which changes a button and changes the onclick event.

The strange thing is that although it is changing it. All the events have the same parameter even though my code is giving each button's onclick event it's own unique parameter.

Here's my Code.
Code:

	var AllocPeople = window.opener.document.getElementById('AllocPeople');
	
	if(AllocPeople.value.length > 0)
	{
		var people = AllocPeople.value.split(",");
		var Controls = new Array();
		for(var P in people)
		{
			var id = people[P];
			Controls[P] = document.getElementById('bt_AP_'+id);
			Controls[P].innerHTML = "Deallocate";
			Controls[P].onclick = function() {Remove_Player(id)};
		}
		
	}

Thanking you all in advance.

I am a Javascript newbie. I'm trying to code a page that has thumbnails of smaller images that when each image is clicked a larger image will load above the thumbnails, plus text within a div will change, plus more Javascript behind a shopping cart button will change. I'm not sure if this is even possible and have been searching and experimenting with the code without success.

To view the webpage I'm working on: http://toymakerpress.com/website/Fre.../TestPage.html

If you click on the dog image you can see where I'm headed (I also haven't had any luck loading the shopping cart button with it's unique Javascript code).

Here is my code so far:
The shopping cart button (I would like this code to swap out everytime I load a new image):
Code:

<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&amp;i=A0085&amp;cl=82487&amp;ejc=2" rel="nofollow" target="ej_ejc" class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this);"><img src="../images/addtocart1.gif" border="0" alt="Add to Cart"/></a>

The code I'm working on for each thumbnail image:
Code:

<td><div align="center">
                  <a href="javascript:changeImage('../images/FreePlans/littledog-4Lg.jpg') "javascript:="javascript:"" onClick="load_content('orderform','more content') "><img src="../images/FreePlans/littledog-4.jpg" width="140" height="140" border="0" /></a></div></td>

Thanks!

I'm pretty new to Javascript and just started with some OOP concepts, so this might be an obvious one and I apologize if the question is much longer than it should be...

Basically I am trying to create a reusable class object with several internal functions, that is completely abstracted, meaning the class object itself should never have to reference the global declarations or window object. This class should be aware of itself at any point in the execution of it's own functions, and that is what I'm having trouble with at the moment.

What I'm trying to do is create reusable javascript "Apps" for my HTML web application, where multiple instances can be instantiated and used independently from one another.

My main problem is "this" loses context in the Ajax callback and onclick handlers. I'm not sure how to persist the context of "this", or at least keep a reference to prototype instance itself.

Let's set up a simple class called "App" to demonstrate what I mean...

Code:

var myApp = new App("MyFirstApp");

function App(argName) {
    this.name = argName;
    this.GetDirectory("C:\Program Files");
}

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    Ajax.GetDirectory(argPath, this.GetDirectoryCallback, this.GetDirectoryTimeout, this.GetDirectoryError);
}

App.prototype.GetDirectoryCallback = function(argFilePaths) {
    // "this" equals the "window" object (bad!), meaning this.name should equal a null reference
    // argFilePaths contains a string of file paths (delimited using ;) returned by the server
    var mFilePaths = split(argFilePaths, ";");
    // for each file path, add a div to the document body containing that file path, with an onclick handler
    for (var i in mFilePaths) {
        var mFilePath = mFilePaths[i];
        var mFilePathDiv = document.createElement("div");
        mFilePathDiv.innerHTML = mFilePath;
        mFilePathDiv.setAttribute("onclick", "javascript:this.FilePathDivClickHandler();return false;");
        document.getElementById("body").appendChild(mFilePathDiv);
    }
}

App.prototype.FilePathDivClickHandler = function() {
    // I need a reference to the App object instance here, but I'm not sure where to grab it...
    // what I want to do is call GetDirectory again, referencing the div's innerHTML which contains another file path, like this:
    this.GetDirectory(event.target.innerHTML);
}

The onclick handler using "this" is obviously not going to work because "this" is a reference to the "window" object which does not have a function called FilePathDivClickHandler(). So what I can do is nest the GetDirectoryCallback() function inside the GetDirectory() function so that GetDirectoryCallback() can reference the variables in the outer function (GetDirectory).

Code:

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    // "this" will still lose context inside the callback, so we can set up a variable called "instance" that the callback can reference
    var instance = this;
    Ajax.GetDirectory(argPath, GetDirectoryCallback, GetDirectoryTimeout, GetDirectoryError);
    function GetDirectoryCallback(argFilePaths) {
        // "this" equals the window object (bad!), meaning this.name should equal a null reference
        // "instance" equals the App object instance (good!), meaning instance.name should equal "MyFirstApp"
        // argFilePaths contains a string of file paths (delimited using ;) returned by the server
        var mFilePaths = split(argFilePaths, ";");
        // for each file path, add a div to the document body containing that file path, with an onclick handler
        for (var i in mFilePaths) {
            var mFilePath = mFilePaths[i];
            var mFilePathDiv = document.createElement("div");
            mFilePathDiv.innerHTML = mFilePath;
            mFilePathDiv.setAttribute("onclick", "javascript:instance.FilePathDivClickHandler();return false;");
            document.getElementById("body").appendChild(mFilePathDiv);
        }
    }
}

Even though we have persisted the App object instance through the use of the "instance" variable in the outer function, the onclick event handler still does not work; when it fires, "instance" is an unknown object.

Would placing the FilePathDivClickHandler() function inside the GetDirectory() function, much like what was done with the callback, allow me to use "instance" correctly for the onclick handler?

i have the code:
foreach($product_names as $product_row) { ?>
<tr>
<td >&nbsp;</td><td width='200px'><?php echo $product_row->getName();?></td>
<td width='200px'><input type="checkbox" name="graphic[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td>
<td width='200px'><input type="checkbox" name="text[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td>
</tr>
<?php } ?>

and a submit button on the page.
the i also have the javascript code for the onclick="check()" :

<html>
<head>
<script type="text/javascript">
function check()
{
var graphics = document.getElementsByName("graphic[]");

for(i=0;i<graphics.length;i++)
{
if(graphics[i].checked)
{
if(document.getElementById('submit').style.display=='none')
{
document.getElementById('submit').style.display='block';
}
}
}
var text = document.getElementsByName("text[]");
for(i=0;i<text.length;i++)
{
if(text[i].checked)
{
if(document.getElementById('submit').style.display=='none')
{
document.getElementById('submit').style.display='block';
}
}
}
}
</script>
</head>

so what all this means is i have two arrays of checkboxes for each product. as soon as i check any checkbox the submit button appears. i click on the submit button and i go to the next form. the problem now comes in if i click on the "back" button to go back to the previous page via the bwrowser..the submit button is disabled althou all my checkboxes that i checked, are still checked....i want the submit button to show???

please help??
thanks

I have a web page with two forms, when I click the button on one of the forms, the onclick event goes to a javascript that emails the first form and then the second form. This is correct, this is the way I want this to work. It's simple, it's easy, it works!
However, it only works in FireFox and Internet Explorer, it will not work in Google Chrome browser.
I've spent many hours trying lots of various ways to implement this so I'm not interested in speculating about possible solutions that might work, I've already tried too many of those.
Also, it needs to work this way, not combining the forms, etc.
Does anyone have any tried and tested solutions that work with Chrome?
Thanks, in advance, for your expert advice. I know I can always rely on EE when all else fails. I know somebody here can solve this problem.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  </head>
  <body>
<form id="NameForm" method="post" action="mailto:yourFirstemail@email.com">
Name: <input type="text" size="10" name="name"> <br />
<input onclick=functionCaller() type="button" value="Submit Two Forms"> 
</form>

<form id="AddressForm" name="DComments" method="post" action="mailto:yourSecondemail@email.com">
Address: <input type="text" size="10" name="address"> <br />
</form>
<script type="text/javascript">
<!--
function functionCaller()
{
document.getElementById('NameForm').submit();
document.getElementById('AddressForm').submit();
}
-->
</script>
</body>
</html>

I was testing a required entry form, and i'm stuck.
Code:

<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
	{
	alert(alerttxt);return false;
	}
  else
	{
	return true;
	}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Username must be filled out!")==false)
  {username.focus();return false;}
  }
}
</script>
</head>

<body>
<form action="submit.htm" onsubmit="return validate_form(this)" method="post">
Username: <input type="text" name="username" size="20">
<input type="submit" value="Submit">
</form>
</body>

</html>

i have this so far.
i want to add a password part.
i know i would take
Code:

Password: <input type="text" name="password" size="20">

and put it underneath the username part in the codes., but i don't know to do the rest, with the error message poping up.

I am using a freebie script that changes css elements using onClick when you hit a button.

I have 12 choices I want to add, and don't want 12 buttons, but rather a dropdown list.

2 button examples (and js code) is:
<input onclick="changecss('li','background','url(images/list_02.jpg) no-repeat 10.2em .12em')" value="Change to BG 2" type="button" />
<input onclick="changecss('li','background','url(images/list_03.jpg) no-repeat 10.2em .12em')" value="Change to BG 3" type="button" />


How do I convert this to a SELECT list??

Thank you!

Hi all,

The question is hopefully relatively simple. if I have an object say
Code:

[
var SampleObject = function(id){
  SampleObject.id = id;
  SampleObject.age= 22;
}

Is there a way to create an event that triggers every time the age member value changes?

Thanks
Ollie.

in the attached photos you have a wheel of colors and a corresponding cascading menu. I'd like to just be able to onmouseover one of the 8 colored polygons within the wheel, have it replace the wheel with one of 8 new images depending on which polygon the mouse is over, and at the same time, light up the corresponding image on the cascading company menu group. is this possible with javascript? links to a tutorial?

I've had some experience with replacing one image with another onmouseover, but not with breaking up one image into 8 parts, each with a separate image replacement. I could see how you could perform this with only 4 different colored polygons, but not 8.

Hi I am using httpXmlRequest object to call a xml web service. In order to successfully perform a task there are couple steps need to happen.

1 you have to request for a session (cookie)
2 with the cookie, we need to authenticate with the server
3 then perform other actions

snippet of my code looks something like this. Basically here i am trying to get the cookie, login and then logout once logged in.

function connect() {
document.myForm.elements['myTextArea'].value += "connecting to teh server.\n";
try {
xhttp.open("GET",urlStr + commonInfoParam, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
if(xmlDoc.readyState == 4) {
var resultsTag = null;
resultsTag = xmlDoc.getElementsByTagName("results");

if(resultsTag != null) {
for(i=0;i<resultsTag.length;i++) {
var commonTag = resultsTag[i].getElementsByTagName("common");
for(j=0;j<commonTag.length; j++) {
cookie = commonTag[j].getElementsByTagName("cookie")[0].childNodes[0].nodeValue;
break;
}
}
}
if(cookie != null) {
document.myForm.elements['myTextArea'].value += "cookie found: " + cookie + "\n";
login();
}
}
};
} catch(e) {
document.myForm.elements['myTextArea'].value += "Exception occurred at connect: " + e.message + "\n";
}
}




function login() {
var loginRequestURL = "http://testconnect.com/api/xml?action=login&login=" + username+ "&password=" + password + "&session=" + cookie;
try {
xhttp.open("GET", loginRequestURL, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
alert('in loginResponseHandler');
if(xmlDoc.readyState == 4) {
try {
loginStatus = xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("code").nodeValue;
if(loginStatus == 'ok') {
alert("login is good: " + loginStatus);
logout();
} else {
}
} catch(e) {}
}
};
} catch(e) {
}
}




function logout() {
alert("in logout");
try {
xhttp.open("GET", logoutRequestURL + cookie, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
alert("in logoutResponseHandler");
if(xmlDoc.readyState == 4) {
try {
status = xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("code").nodeValue;
if(status == 'ok') {
alert(status);
}
} catch(e) {}
}
};
}
catch(e) {}
}


so when I run my code in the browser, all my alert stages give me proper message as expected. But at the final alert, it hangs. I just could not figvure out what am i doing wrong. can any one pin point this out for me please?

Thanks in advance.

KM

Hello,

I have a question about the cut and paste javascript events calendar
at http://www.javascriptkit.com/script/...calendar.shtml
Is there any way to add links to the event description that appears in the box below the calendar?

Thanks for your help.

Hello

I need help regarding capturing page events(mouse click ,navigation) etc on web pages and write them into a text file (using javascript). One way is using javascript events and writing them into text file. Is there be a better way of doing this ??

without outside extensions, how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events?

for instance, i have a website i log into that has a "submit" button. the button itself only has this code:

Code:

<input type="image" class="png" tabindex="5" value="Go" src="login.png">

obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case.

consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly.

any help!?