JavaScript - Clicking A Button With Javascript

Hi, I have an admin page in which I enter information for a Math Education website. I have to pre-load 10 video fields just in case a lesson has 10 videos. This is an over simplification:

--------------------------------------------
Subject: ____________
Chapter: ____________
Lesson: _____________
--------------------------------------------
Video 1
Video Title: __________
Video Desc:__________
--------------------------------------------
Video 2
Video Title: __________
Video Desc:__________
--------------------------------------------
.
.
.
--------------------------------------------
Video 10
Video Title: __________
Video Desc:__________
--------------------------------------------


What I would like to do is load 1 single video field and then have a button that when it is clicked automatically creates another field. Any ideas? I'm sure this is possible but everything I know I've learned from searching the internet and reading a few simple books so my knowledge is fragmented.

THANKS!

A dynamically-generated div pops up with absolute positioning, prompting user radio-button selection.

div is selected and focused, and triggers onblur event to remove it from DOM. Clicking one of the radio buttons within the div should not remove the div from the DOM.

problem: clicking radio button removes the div from the DOM even though the radio button is inside the div and even though clicking the radio button triggers onclick event to cancelBubble.

I'm about to post this, and thinking that I should modify the blur event to remove the div only if the click event is outside of its coords... (...terribly sleep-deprived, lol)

Since I've already prepped this post..., any thoughts / suggestions?

Sample code:

Code:

var items = ['carrots', 'bananas', 'apples'], fragment = null, item = null;
if (items.length > 0) {
    fragment = <div id="AddItemSelector" onblur="Cancel_AddNewItem();"><div name="title">Select Item:</div>';
    do {
        item = items.shift();
        fragment += '<div><input name="radNewItem" type="radio" value="' + item + '" onclick="Click_NewItem(event)">' + item + '</div>';
    } while (items.length > 0);
    fragment += '<div><input type="button" value="Cancel" onclick="Cancel_AddNewItem();"><input type="button" value="Select" onclick="Select_AddNewItem();"></div></div>';
    $(blahblah).after(fragment);
    $('#AddItemSelector').select().focus();
}

items = null;
fragment = null;
item = null;

...

function Click_NewItem(Event) {
    Event.cancelBubble = true;
}

function Cancel_AddNewItem() {
    $('#AddItemSelector').remove();
}

Hi all,

I have the following code in my html.

<form name="createaccount" action="" method="post">
<div class="formrow">
<label>Select an Avatar:</label>
<div class="fieldcontent">
<img src="images/avatar1.jpg" class="avatargal" id="Image1" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image1');" onblur="imageoff('Image1');" />
<img src="images/avatar3.jpg" class="avatargal" id="Image2" />
<input type="radio" name="selectavatar" class="radiobtn" checked="checked" onclick="imageon('Image2');" onblur="imageoff('Image2');" />
<img src="images/avatar4.jpg" class="avatargal" id="Image3" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image3');" onblur="imageoff('Image3');" />
<img src="images/avatar5.jpg" class="avatargal" id="Image4" />
<input type="radio" name="selectavatar" class="radiobtn lastbutton" onclick="imageon('Image4');" onblur="imageoff('Image4');" />
<img src="images/avatar3.jpg" class="avatargal" id="Image5" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image5');" onblur="imageoff('Image5');" />
<img src="images/avatar5.jpg" class="avatargal" id="Image6" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image6');" onblur="imageoff('Image6');" />
<img src="images/avatar1.jpg" class="avatargal" id="Image7" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image7');" onblur="imageoff('Image7');" />
<img src="images/avatar4.jpg" class="avatargal" id="Image8" />
<input type="radio" name="selectavatar" class="radiobtn lastbutton" onclick="imageon('Image8');" onblur="imageoff('Image8');" />
</div>
</div>
</form>

-----------

The javascipt is:

function imageon(here)
{

var elem= document.getElementById(here);
elem.style.border = "solid 2px blue";
}
function imageoff(here)
{

var elem= document.getElementById(here);
elem.style.border = "solid 2px white";
}

----------

When user clicks radio button near "Image1" then "Image1" is highlighted in blue color border, and previously selected image gets white border.

This works in firefox and internet explorer but not on chrome and safari.

Any help?

I am a new to js and GM but I am trying to make a script that will click a button on a page where there are multiple instances of the button.

The source I am looking at is below and I have narrowed down what I am looking at to the bold section.

<dl>
<dd class="left"><div id='recommendstatus_article4458331'>
<dl class="recommend">
<dt class='recs'><a href="javascript://" onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;">50</a>&nbsp;</dt>

<dd><a href="javascript:void(0);"
onclick="RecommendItem(1,'article','4458331','1','recommendstatus_article4458331' ); return false;"
onmouseover="return overlib('Give thumbs up', WRAP);"
onmouseout="return nd();">&nbsp;<img class='icon' title='' alt='Thumb up' style='background-position: -304px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd>
<dt class='tippers'><a href="javascript://" style='color: #969600;' onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;"></a></dt>
<dd><a href="javascript:void(0);"
onmouseover = "return overlib( 'GeekGold Tip', WRAP );"
onmouseout = "nd();"
onClick="GeekGoldTip(0,'article','4458331','recommendstatus_article4458331'); return false;">&nbsp;<img class='icon' title='' alt='tip' style='background-position: -368px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd>
<dd>
<a href="javascript:void(0);"
onclick="RecommendItem(0,'article','4458331','','recommendstatus_article4458331', 'article4458331' ); return false;"
onmouseover="return overlib('Hide this post', WRAP);"
onmouseout="return nd();">&nbsp;<img class='icon' title='' alt='Thumb up' style='background-position: -336px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a>
</dd>
<dt class='thumbsdown'>
</dt>
</dl>

How do I create a script to find each instance of the button and click it?

I am creating a popup for an online store so that when prospective customers put something in their shopping cart and then try to leave the site, they are offered a coupon in a popup.

I am using the following code (FYI, uses prototype.js)
Code:

Event.observe(document.body, 'click', function(event) {
	if (Event.element(event).tagName == 'A' || Event.element(event).tagName == 'INPUT' || Event.element(event).tagName == 'IMG') {
		staying_in_site = true;
	}
});

window.onbeforeunload = popup;

function popup() {
	if (staying_in_site) {
		return;
	}
	if (popup_displayed) {
		return;
	}
	popup_displayed = true;
	
	//popup displayed here 
}

The popup is not displayed when the user clicks on a link or submits a form (correct behavior) and it is displayed when the user types in a URL or tries to close the browser (also correct behavior).
The problem is when the user clicks the back or forward buttons, the popup is displayed which is not the desired behavior.

Anyone here have a solution for this?

I am trying to write script that allows a user to select a new page using a select menu. But if a user changes mind and clicks Back button. i want a use to see again "Select a New Page" as a first option in the select menu. instead i see the page that was chosen before. in firefox, even when i click Refresh button, the select menu does not go back to its initial format.
I tried to use the principle that each time window is loaded, the selected Index would be 0. it is not working. Could anyone give me a hint on how to fix this problem?

my script is below.

<html>
<head>
<title>Jump Menu 2</title>
<script type="text/javascript">
function new_page() {
var selectmenu=document.getElementById("states_form").states_select;
selectmenu.onchange=function new_state() {
var i=selectmenu.selectedIndex;
var state=selectmenu.options[i].value;

var new_page="http://www.50states.com/"+state+".htm";
location.href=new_page;
window.onload=function select_reload() {
i=0;
}
}
}
window.onload=new_page;
</script>
</head>
<body>
<form id="states_form">
<select name="states_select">
<option value="0"> -- Select a New State--</option>
<option value="nebraska"> Nebraska</option>
<option value="texas"> Texas</option>
<option value="florida">Florida </option>
<option value="oregon"> Oregon</option>
<option value="wisconsi"> Wisconsin</option>
</select>
</form>
</body>
</html>

Hi, this is my first post on the forum.

I was just wondering whether there is a way to hide an element on another page after clicking on a button?

Basically, I have a login page, and for testing purposes, I want it so when you click a button, it runs some javascript in a file called ajax.util.js, and I have a jQuery file attached to the HTML file as well (http://ajax.googleapis.com/ajax/libs.../jquery.min.js), and I am using Google App Engine, which im not sure whether thats relevant. I tried using the show and hide functions provided by the jQuery file, but no luck, i want to hide an element which is a link with ID admintools. I have also tried getting the element by ID and changing the display style to none and hidden but still no luck. Im not sure whether its only possible to hide elements in the login.html page.

What I want it to do basically is click on the submit button in the login page, it will then run a javascript function which redirects you to index.html (which i am doing using window.location), and then hides an element in the index.html page (id=admintools).

Any help would be great, Thanks in advance

Hi,

I'm working on a simple website in which I'm required to use two types of forms input on a webpage. I have decided to make a simple quiz which will be designed as follows;

--------------------------------------------------------

Q1: The largest mammal on land is:

(radio button choices)

Q2: Please tick the two correct answers:

(tick boxes, four available... only two correct)

----------------------------------------------------------

(BUTTON: Please click here for the answers)

... answers should appear once the above button is pressed...

Answers:

Q1: B
Q2: A * C

Is this possible in a simple way? Sounds quite straight-forward but I'm no expert so forgive me..

Ps: Is it possible to design a radio button which, depending on the choice, the related-text will appear underneath on the same page? So if they select 'A' then paragraph 'A' will show, if they select 'C' then paragraph 'C' will appear (with the rest hiding)...

Thanks 4 your time!

Internet Explorer requires the user to click on an applet to activate it, which means two clicks if there is a start button, for example. I previously learned a workaround, which is to activate the applet from an external Javascript, something like this:

Code:

document.write('<applet code="' + appletname + '" width="' + w + '" height="' + h + '"></applet>');

This doesn't work in IE8. Is there a workaround for IE8? Thanks.

I tried to word the question as best as possible, but here is what I want to do. I am creating a calculator online and it is getting more and more extensive, which is good b/c I'm learning a lot. Here is what I'm trying accomplish now.

I am using "input" to get information from the user in the top section of my calculator and that will always stay the same.

The part that will change is the results section (bottom part of the calc) based on a few different variations or setups, so I want to be able have them click on a few different options.

Option 1
Option 2
Option 3

Depending on which one they click I want the javascript that is run for the results section to correspond to the option chosen. I also, want to be able to have a default option displayed the first time the page is loaded and then have it change if a different option is chosen. I don't think reloading the page is necessary, but I'm new to this and could use a little direction.


I hope what I'd like to do makes a little sense. I'm not asking for any code written that will do this, but naturally something hints or tips that could get me going.

I don't know how to "monitor" a link and return a value to a variable, so that it can be put into a an if statement in the results section. After that, it would be continually monitored or somehow restarted if the variable does change. Again, I don't know if this is the best way to go at it, but I'm not sure at all. Any help would be awesome. I have looked at "onclick", but I'm not completely sure how I can tie it all together of if I should use another method. Thanks for any suggestions/ideas/help.

In this case, Let's take Google Search as example:

The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question.

This code is used in Fiddler(It's a Man-in-the-middle proxy)

Code:

if (oSession.uriContains("&q=")) // oSession is a Fiddler object session // uriContains() function, checks for case-insensitive string from the URI
{
    var str = oSession.fullUrl;
    var sAppend = "test1+test2+test3";
    if (!oSession.uriContains(sAppend))
    {
        oSession.fullUrl = str.replace( "&q=","&q="+sAppend);
    }
}

For those who are confused, It says, If &q= is present in the URI, replace/append &q= with &q=test1+test2+test3

Problem: It appends test1+test2+test3 instantly, when it sees &q= in the URL.

Basically, how do I make it wait until I click the submit/search button

Thank you.

Update: I heard about Onsubmit() event, but not really familiar with it. How do I use it? like, should I go to google source page and edit the form id?

Also, Any other methods besides Onsubmit()?

Hello guys,

You were all very kind to help me a few months ago when I was trying to create the code which is posted below. it is a table of banner ads that will rotate on my website and the appropriate link follows the appropraite ad when they rotate. everything is working fine except that when you click on one of the ads ( which is a link), the link works but the page displays an error at the bottom as soon as any link is clicked. Since this type of hyperlink is associated with the javascript, im not sure how to correct the issue. maybe it is a simple thing. can anyone take a look at this and help me figure out the issue? thanks.

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=utf-8" />
<title>.</title>
<script type="text/javascript">


var ImageArray = [	// add paths, if needed
  ['randoms/0.jpg','http://0.com'],
  ['randoms/1.jpg','http://1.com'],
  ['randoms/2.jpg','http://2.com'],
  ['randoms/3.jpg','http://3.com'],
  ['randoms/4.jpg','http://4.com'],
  ['randoms/5.jpg','http://5.com'],
  ['randoms/6.jpg','http://6.com'],
  ['randoms/7.jpg','http://7.com'],
  ['randoms/8.jpg','http://8.com'],
  ['randoms/9.jpg','http://9.com'],
  ['randoms/10.jpg','http://10.com'],
  ['randoms/11.jpg','http://11.com'],
  ['randoms/12.jpg','http://12.com'],
  ['randoms/13.jpg','http://13.com'],
  ['randoms/14.jpg','http://14.com'],
  ['randoms/15.jpg','http://15.com']    // No comma after last entry
];

function randOrd() {
  return (Math.round(Math.random())-0.5);
}
function ChangeImages() {
  var ImgPtr = new Array();
      for (var i=0; i<ImageArray.length; i++) { ImgPtr[i] = i; }
      ImgPtr = ImgPtr.sort(randOrd);
  var tmp = '';
  for (var i=0; i<ImgPtr.length; i++) {
    tmp = 'tImg'+i;
    	document.getElementById(tmp).src = ImageArray[ImgPtr[i]][0];	  
    	document.getElementById(tmp).alt = ImageArray[ImgPtr[i]][1];	  
    tmp = 'lImg'+i;
    	document.getElementById(tmp).href = ImageArray[ImgPtr[i]][1];	  
  }
}

var TimerAction = 0;
function startTimer() {
  TimerAction = setInterval('ChangeImages()',3000);
}
function stopTimer() {
  clearTimeout(TimerAction);
}
</script>
<style type="text/css">body { background-color: #000000; margin: 0;
}
</style></head>

<body onLoad="startTimer();ChangeImages()" >
<table width="250" border="0" cellpadding="0" id="ads">
  <tr><td>
   <a href="" id="lImg0" onclick="return gotoLink(this.id,0)"target="_blank">
   <img id="tImg0" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg1" onclick="return gotoLink(this.id,1)"target="_blank">
   <img id="tImg1" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg2" onclick="return gotoLink(this.id,2)"target="_blank">
   <img id="tImg2" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg3" onclick="return gotoLink(this.id,3)"target="_blank">
   <img id="tImg3" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg4" onclick="return gotoLink(this.id,4)"target="_blank">
   <img id="tImg4" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg5" onclick="return gotoLink(this.id,5)"target="_blank">
   <img id="tImg5" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg6" onclick="return gotoLink(this.id,6)"target="_blank">
   <img id="tImg6" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg7" onclick="return gotoLink(this.id,7)"target="_blank">
   <img id="tImg7" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg8" onclick="return gotoLink(this.id,8)"target="_blank">
   <img id="tImg8" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg9" onclick="return gotoLink(this.id,9)"target="_blank">
   <img id="tImg9" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg10" onclick="return gotoLink(this.id,10)"target="_blank">
   <img id="tImg10" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg11" onclick="return gotoLink(this.id,11)"target="_blank">
   <img id="tImg11" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg12" onclick="return gotoLink(this.id,12)"target="_blank">
   <img id="tImg12" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg13" onclick="return gotoLink(this.id,13)"target="_blank">
   <img id="tImg13" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg14" onclick="return gotoLink(this.id,14)"target="_blank">
   <img id="tImg14" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
  <tr><td>
   <a href="" id="lImg15" onclick="return gotoLink(this.id,15)"target="_blank">
   <img id="tImg15" src="" alt="" width="250" height="166">
   </a>
  </td></tr>
  <tr> <td>&nbsp;</td> </tr>
  
</table>
</body>
</html>

Ok Need Help Here.
As I post earlier how to detect firefox before let the user in some guys just disable javascript and went in
I finding solution i think of it but i dun know the code not sure is it working

Script that allow the browser to check weather javascript is ON if not cannot grant access to the page .

Another thing is by using a image
means when i enter the site
it will show a image i will need to click it before it enter the content of the pages i think that a javascript code i seen it somewhere else about months ago.

Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this.

I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image)

I do not know how to achieve this but shouldnt be too hard.

Here are the two sources you will need to look through to help me fix the forum.

http://neoweather.com/FWFORUM.JS
http://static.websimages.com/JS/fw.js

THANKS

Hi,

I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple.

I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here.

My page is:
Code:

<script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
	try{
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }	
}

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }

var params=Msg;
xmlhttp.open("POST",File,true);

xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<head>
<body>
<?php

	$con = mysql_connect("localhost","user","password");
	if (!$con)		{
		die('Could not connect: ' . mysql_error());
		}
	mysql_select_db("mydb", $con);

	$result = mysql_query("SELECT DISTINCT theme FROM goods	WHERE category='{$_POST['category']}'
	ORDER BY theme DESC");
	

	while($row = mysql_fetch_array($result)){
		echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" >&nbsp';
		}
echo '<br /><br />

<div id="txtHint"><div>
<br />
<br />';

	mysql_close($con);
?>

And getShow.php produces a table with a list of product images, names and prices, based on theme.

So basically not sure where I am going wrong here?