JavaScript - Automated Multiple Button Clicking Script In Gm

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, 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!

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 used the code window.close();

it works well for Internet Explorer but it not worked in firefox

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

I want to make a script selecting electronics category in this site http://eu.redeem-it.net/boutique.php
A friend told me to use getElementsByClass but I still cant do it.

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!

Hi guys.. I am just starting to learn JavaScript. I wanted to know how to have multiple hyperlinks (Containing links to Youtube Videos) that when clicked, cause the corresponding videos to play on the Youtube Player Embedded on the site. I hope my question is not too confusing. Thank you in advance!

P.S.
I saw some Source Code relating to this on StackOverflow and copied it and couldn't get it to work.. Here's my source code.

Code:

<html>
<head>
<title> Sample Page </title>
<script>
// Get element holding the video (embed or object)
var player = document.getElementById("MOVIE");
 
//Create a simple function and check if player exists
function play() {
    if(player) {
        player.playVideo();
    }
}
</script>
</head>
<body>
<object width="420" height="315"><param name="MOVIE" value="http://www.youtube.com/v/HsQIoPyfQzM?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HsQIoPyfQzM?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</br></br>
<a href="http://youtu.be/sPvqNMb4StI" onclick="play()"> THIS IS FIRST Video Link </a></br></br>
<a href="http://youtu.be/w7_Ccu21QVs" onclick="play()"> THIS IS SECOND Video Link </a>
</body>
</html>

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>

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()?

A quick background into what Im trying to acheive. I have a link which is setup to redirect a phone to another number, this is something set up on our PBX.
The link is something simple like Http://phones.company.com/forward?=4332

This aspect is fine, but authentication is required to get to this page, so I get redirected to a login screen. What I want to be able to do is bypass this
screen, by somehow hardcoding the username and password, so that the form is submitted automatically and no user intervention is required.

The code for the login screen is below.

Is this possible?? Ive had a quick look for the obvious, but my javascript skills are poor.

Maybe Im looking at this all wrong and there is a much easier way. Any suggestions would be appreciated.

Code:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>Login</title>

<!-------------------------------------------------------------------------->
<!--	NLS area

<!-------------------------------------------------------------------------->


<link rel="stylesheet" type="text/css" href="req1_files/req.css">

<style type="text/css">

.getPos
{
	position:relative; left:0; top:0; visibility:hide; visibility:hidden;
}
.setPos
{
	position:absolute; left:0; top:0; visibility:hide; visibility:hidden; zIndex:1;
	font-family:"arial","helvetica"; font-size:10pt;
}

.userfield		{ width:180px; }
.domain		{ width:120px; }

#loginBtn
{
	width:65px;height:25px;
	padding-top:4px;
	text-align:center;
	background-repeat:no-repeat;
	cursor:pointer;cursor:hand;
}
.loginBtnReleased { background-image:URL('../images/loginReleased.gif'); }
.loginBtnPressed  { background-image:URL('../images/loginPressed.gif'); }
</style>
<!---------------------------------------------------------------->
<!-- Script area												-->
<!---------------------------------------------------------------->

<script>
/* layer.js - Accessing layers in a browser independent way */
var oldX;

function show_layer(x)
{
	if(document.getElementById)
	{
	    if(document.getElementById(x) != null) 
		document.getElementById(x).style.visibility="visible";    
	}
	else
        if(document.layers)
	{
            if( document.layers[x] != null )
                document.layers[x].visibility="show";
        }
	else
	if(document.all)
	{
            if( document.all[x] != null )
                document.all[x].style.visibility="visible";
	}
}

function hide_layer(x)
{
	if(document.getElementById)
	{
	    if(document.getElementById(x) != null)
		document.getElementById(x).style.visibility="hidden";
	}
	else
        if(document.layers)
	{
            if( document.layers[x] != null )
                document.layers[x].visibility="hide";
	}
	else
        if(document.all)
	{
            if( document.all[x] != null )
                document.all[x].style.visibility="hidden";
	}
}

function checkLayerExists( x )
{
	if(document.getElementById)
	{
	    if(document.getElementById(x) != null)
		return true;
	}
	else 
	if(document.layers)
	{
            if( document.layers[x] != null )
		return true;
	}
	else 
	if(document.all)
	{
            if( document.all[x] != null )
		return true;
	}
	return false;
}

function checkLayer( x )
{
    if(oldX && oldX!=x)
    {
        hide_layer(oldX);
           show_layer(x);
        oldX=x;
    }
    else if (!oldX && oldX!=x)
    {       
        show_layer(x);
        oldX=x;
    }
}

function closeLayer(x)
{
    hide_layer(x);
    oldX=null;
}


function getForm( layer, form )
{ 
    var myForm = null;

    if(document.getElementById)
    {
        myForm = document.forms[form];  
    }   
    else
    if(document.layers)
    {
        var myLayer = document.layers[layer];

        if( myLayer != null )
            myForm = myLayer.document.forms[form];
    }
    else
    if(document.all)
    {
        myForm = document.forms[form];
    }

    return myForm;
}

function getFormElement( layer, form, element )
{
    var myForm = getForm( layer, form );

    if( myForm != null )
        return myForm[element];
    else
        return null;
}

</script>

<script>
/* focushandler.js - handling of focus in input forms */
/*
   This focus handler sets the focus to the first empty input text
   field at the beginning and to the next empty text field by entering
   CR or invoking submit. If all fields are set and CR was entered in
   one of the text fields, the submit function will be called automatically.
*/
var myFocusHandlerForm = null;	/* only one form for focus handling is supported */
var myAutoSubmit = true;	/* invoking submit by CR if all fields are set */
var myAutoSubmitHandler = null;	/* invoking this handler */
   
function initFocusHandler(formName)
{
	initFocusHandlerExt(formName, (document.layers != null));
}

function initFocusHandlerExt(formName, chkCR)
{
    var form 	= document.forms[formName];
    var setDone	= false;

    myFocusHandlerForm = form;

    for( var i=0, len = form.elements.length; i < len; i++ )
    {
	var e = form.elements[i];

	if( (e.type == "text" || e.type == "password") )
	{
	    if( !setDone && e.value == "" )
	    {
		e.focus( );		/* set focus to first field */
	    	setDone = true;
	    }

	    if( chkCR )
		e.onkeydown = checkCR;	/* establish CR recognizer */
	}
    }
}

function setAutoSubmit( enabled )
{
    myAutoSubmit = enabled;
}

function setAutoSubmitHandler( handler )
{
    myAutoSubmitHandler = handler;
}

function checkCR(e)
{
    var key = (document.layers) ? e.which : 
    	      (document.all) ? window.event.keyCode : e.keyCode;
    	      
    if( key == 13 )
    {
	var form = myFocusHandlerForm;
	if( verifyInput(form) && myAutoSubmit )
	{
	    if( myAutoSubmitHandler != null )
		myAutoSubmitHandler(form);
	    else
	    	form.submit();
	}
    }
    return true;
}

function verifyInput(form)
{
    for( var i=0, len=form.elements.length; i < len; i++ )
    {
	var e = form.elements[i];

	if( (e.type == "text" || e.type == "password") && 
	    (e.value == null  || e.value == "") )
	{
	    form.elements[i].focus();	/* set focus to empty field */
	    return false; 
	}
    }
    return true;    /* all are set */
}

</script>

<script>
/* popuphandler.js - handling of popup menus by layers */
var myPopupLayer 	= new Array();
var myPopupWidth 	= new Array();
var myPopupByEvent 	= "";
var myPosByEvent 	= false; 
var myPosY		= 0;

if( document.all )
	document.onmousedown = setPosY;

function initPopupHandler( popupLayer, popupWidth )
{
	document.onmouseup = hidePopupAll;

	var newIndex = myPopupLayer.length;
	myPopupLayer[newIndex] = popupLayer;
	myPopupWidth[newIndex] = popupWidth;
}

function updatePopupWidth( popupLayer, popupWidth )
{
	var index      = getPopupIndex( popupLayer );
	myPopupWidth[index] = popupWidth;
}

function showPopup( posLayer )
{
	var index      = 0;	/* suppose only one layer to popup was defined */
	var popupLayer = myPopupLayer[index];
	var popupWidth = Math.abs(myPopupWidth[index]);
	
	showPopupLayer( popupLayer, posLayer, (-popupWidth) + 6, 4 );
}

function showPopupLeftAt( popupLayer, posLayer, offsetX, offsetY )
{
	var index      = getPopupIndex( popupLayer );
	var popupWidth = Math.abs(myPopupWidth[index]);

	showPopupLayer( popupLayer, posLayer, (-popupWidth) + offsetX, offsetY );
}

function showPopupLayer( popupLayer, posLayer, offsetX, offsetY )
{
	if(document.getElementById)
	{

	    var posX = getPopupPositionX( posLayer );
	    var posY = getPopupPositionY( posLayer );

	    setPopupPosition( popupLayer, posX + offsetX, posY + offsetY );
	    document.getElementById(popupLayer).style.visibility="visible";
	}
	else
	if( document.layers)
	{
	    var posX = getPopupPositionX( posLayer );
	    var posY = getPopupPositionY( posLayer );

	    setPopupPosition( popupLayer, posX + offsetX, posY + offsetY );

	    document.layers[popupLayer].visibility = "show";
	}
	else
	if(document.all)
	{
	    if( !myPosByEvent )
	    {	
    		var posX = getPopupPositionX( posLayer );
	    	var posY = getPopupPositionY( posLayer );

	    	setPopupPosition( popupLayer, posX + offsetX, posY + offsetY );
	    }
	    document.all[popupLayer].style.visibility = "visible";
	}
}

function isPopupVisible( popupLayer )
{
	if(document.getElementById)
   	    return (document.getElementById(popupLayer).style.visibility == "visible");
	else
	if(document.layers)
	    return (document.layers[popupLayer].visibility == "show");
	else
	if(document.all)
	    return (document.all[popupLayer].style.visibility == "visible");
}

function setPopupVisible( popupLayer, visible )
{
	if(document.getElementById)
	{
   	    if( visible )
		document.getElementById(popupLayer).style.visibility = "visible";
	    else
		document.getElementById(popupLayer).style.visibility = "hidden";
	}
	else
	if(document.layers)
	{
	    if( visible )
	    	document.layers[popupLayer].visibility = "show";
	    else
	    	document.layers[popupLayer].visibility = "hide";
	}
	else
	if(document.all)
	{
	    if( visible )
		document.all[popupLayer].style.visibility = "visible";
	    else
		document.all[popupLayer].style.visibility = "hidden";
	}

}

function getPopupIndex( popupLayer )
{
	for( var i = 0; i < myPopupLayer; i++ )
	    if( myPopupLayer[i] == popupLayer )
		return i;

	return 0;
}

function setPopupPosition( popupLayer, posX, posY )
{	
	if(document.getElementById)
	{
	document.getElementById(popupLayer).style.left = posX;
	document.getElementById(popupLayer).style.top = posY;
	}
	else
	if(document.layers)
	{
	    document.layers[popupLayer].pageX = posX;
	    document.layers[popupLayer].pageY = posY;
	}
	else
	if(document.all)
	{
	    document.all[popupLayer].style.left = posX;
	    document.all[popupLayer].style.top  = posY;
	}
}

function getPopupPositionX( posLayer )
{
 	if(document.getElementById)
	{
	    var elm = document.getElementById(posLayer);
	    var pos = document.getElementById(posLayer).offsetLeft;

	    if( pos <= 15 )	
	    {
		while ( elm != null )
		{
		    pos += elm.offsetLeft;
		    elm = elm.offsetParent;
		}
	    }
	    return pos;	 
	}
	else
	if(document.layers)
	    return (document.layers[posLayer].pageX);
	else
	if(document.all)
	{
	    var elm = document.all[posLayer];
	    var pos = document.all[posLayer].offsetLeft;

	    if( pos <= 15 )	/* IE.5.0 bug: adding padding to offset */
	    {
		while ( elm != null )
		{
		    pos += elm.offsetLeft;
		    elm = elm.offsetParent;
		}
	    }
	    return pos; 
	}
}

function getPopupPositionY( posLayer )
{
	if(document.getElementById)
	{

	    var elm = document.getElementById(posLayer);
	    var pos = document.getElementById(posLayer).offsetTop;

	   if( pos <= 15 )	/* IE.5.0 bug: adding padding to offset */
	    {
		pos = -6;

		while ( elm != null )
		{
		    pos += elm.offsetTop;
		    elm = elm.offsetParent;
		}
	    }
	   else 
	   if(document.all)
	    {
		var posDiff = (pos > myPosY) ? pos - myPosY : myPosY - pos;

		if( posDiff < 20 )	/* IE.6.0 bug: cumulative patch */
		    pos -= 15;
		else
		    pos = (pos/2);


		var tableOffset = 2;
		var a = window.document.all;

		for( var i=0; i < a.length; i++)
	    	{
		    if( a[i].name == "maintable" )
		    {
			tableOffset = (a[i].offsetTop / 2) - 1;
		    	break;
		    }		
	    	}
		pos += tableOffset;
	    }
	return pos;
	}
	else
	if(document.layers)
	    return (document.layers[posLayer].pageY);
	else
	if(document.all)
	{
	    var elm = document.all[posLayer];
	    var pos = document.all[posLayer].offsetTop;

	    if( pos <= 15 )	/* IE.5.0 bug: adding padding to offset */
	    {
		pos = -6;

		while ( elm != null )
		{
		    pos += elm.offsetTop;
		    elm = elm.offsetParent;
		}
	    }
	    else
	    {
		pos = (pos/2);

		var tableOffset = 2;
		var a = window.document.all;

		for( var i=0; i < a.length; i++)
	    	{
		    if( a[i].name == "maintable" )
		    {
			tableOffset = (a[i].offsetTop / 2) - 1;
		    	break;
		    }		
	    	}
		pos += tableOffset;
	    }
	    return pos;
	}
}

function enablePopupByEvent( popupLayer, enable )
{
	myPopupByEvent	= popupLayer;
	myPosByEvent	= enable;
}

function setPopupPosByEvent(e)
{
    	if( myPosByEvent && document.layers == null && document.all )
	{
	    if( document.all[myPopupByEvent] != null )
	    {
		var ev   = window.event;
		var posX = ev.clientX - ev.offsetX - 2 - myPopupWidth;
		var posY = ev.clientY - ev.offsetY + 6;

		setPopupPosition( myPopupByEvent, posX, posY );
	    }
	}
	return true;
}

function setPosY(e)
{
	myPosY = window.event.clientY + document.body.scrollTop;
	return false;	
}

function hidePopupAll(e)
{
  	hidePopup();
}

function hidePopup()
{
	for( var i = 0; i < myPopupLayer.length; i++ )
		hidePopupLayer( myPopupLayer[i] );
}

function hidePopupLayer( popupLayer )
{
	if(document.getElementById)
	{
	    if(document.getElementById(popupLayer) != null)
	       document.getElementById(popupLayer).style.visibility = "hidden";
	}
	else
	if(document.layers)
	{
	    document.layers[popupLayer].visibility = "hide";
	}
	else
	if(document.all)
	{
	    if( document.all[popupLayer] != null )
		document.all[popupLayer].style.visibility = "hidden";
	}
}

</script>

<script>
/* utilscript.js - extended string functions, etc. */

function checkChars( chkStr )
{
    	chkStr = escape(chkStr);

    	/* special handling for phone numbers */
	for( ; (i = chkStr.indexOf('+')) >= 0; )
	{	
	    var s = (i > 0) ? chkStr.substring( 0, i ) + "%2B" : "%2B";
	    chkStr = s + chkStr.substring( i+1, chkStr.length );	    
	}

    	return chkStr;
}

function trimString( str )
{
	return removeTrailingBlanks( removeLeadingBlanks( str ) );
}

function removeLeadingBlanks( str )
{
	while( str.length > 0 && str.charAt( 0 ) == ' ' )
		str = str.substr( 1, str.length - 1 );

	return str;
}

function removeTrailingBlanks( str )
{
	while( str.length > 0 && str.charAt( str.length - 1 ) == ' ' )
		str = str.substr( 0, str.length - 1 );

	return str;
}

</script>


<script language="JavaScript">
function init()
{

	initFocusHandlerExt("doLogin",false);

	setAutoSubmitHandler( sendFormHandler );
	setLastUser( "", "" );
}

function doSendForm()
{
	var form = document.doLogin;
	var check = false;
	var pwdforgotten = false;

	if (pwdforgotten)
	{
		if (verifyUser())
			check = true;

	}
	else
	{
	if( verifyInput( form ) )
			check = true;

	}

	if (check)
		sendFormHandler( form, pwdforgotten );

	return true;
}

function verifyUser ()
{
   var user = document.forms.doLogin.j_username.value
   if (user == "" || user.length == 0)
   {
		document.forms.doLogin.j_username.focus();
		return false;
   }
	return true;
}

function sendFormHandler( form, pwdforgotten)
{
	var sendForm	= document.forms.sendLogin;
	var user	= document.forms.doLogin.j_username.value;
	var passwd	= document.forms.doLogin.j_password.value;

	var domainList	= document.forms.doLogin.j_domain;
	var index	= domainList.selectedIndex;
	var authMode	= (index >= 0) ? domainList.options[index].value :
					 "TELAS";

	if( authMode == "" )
	{
		alert( "Please enter the name of your windows domain" );
		return;
	}

	if( index >= 0 )
	{
	    var domain	= domainList.options[index].value;
        if (domain != "TELAS")
    	    user = domain + "\\" + user;

		sendForm.authMode.value	  = authMode;
	}
	else
	{
		sendForm.authMode.value	  = "TELAS";
	}



	// fill hidden form to send request
	sendForm.j_username.value = user;
	sendForm.j_password.value = passwd;

	if (pwdforgotten)
		sendForm.j_pwdforgotten.value = "forgotten";

	sendForm.submit();
}

function setLastUser( user, wrongpwd )
{
	if( user != "" )
	{

		var i = user.indexOf( '\\' );
		if( i > 0 )
		{
		var domainList	= document.forms.doLogin.j_domain;
		var domainIndex = -1;
		var domain;

		domain	= user.substring( 0, i );
		user	= user.substring( i + 1, user.length );

		for( i = 0; i < domainList.options.length; i++ )
		{
			var value = domainList.options[i].value;

			if( value == domain )
			{
			domainIndex = i;
			break;
			}
		}

		if( domainIndex >= 0 )
		    domainList.selectedIndex = domainIndex;

        }


		document.forms.doLogin.j_username.value = user;
		if( wrongpwd )
		document.forms.doLogin.j_password.focus();
	}
}

function doSendPassword()
{

  var request = "/tweb/login/req?pwdForgotten=";
  var user = document.doLogin.j_username.value;

  request = request + "&authuser=" + user;

  window.location.href = request;
}

</script>




</head><body class="common" onload="init();">


<p>&nbsp;</p>
<div align="center"><center>

<form name="doLogin" action="javascript:(void 0);" onsubmit="verifyInput(this); return false;">

<!---------------- login dialog for an user session -------------------->

<noscript>
	<font color=red>To use ComAssistant CTI<br>you must activate JavaScript at first.</font><p>
</noscript>


<table class="frame" border="1" cellpadding="4" cellspacing="0">
<tbody><tr><td class="caption" align="center"><b>ComAssistant CTI</b></td></tr>


<tr><td class="light" valign="middle" align="center">
	<table border="0" cellpadding="0" cellspacing="8">
	<!------------------------------------ user ------------------------>
	<tbody><tr>
	   <td>&nbsp;</td>
	   <td class="dialog" align="left">User name:</td>
	   <td class="dialog"><input value="5255" class="userfield" size="18" maxlength="64" name="j_username" width="180px"></td>
	   <td>&nbsp;</td>
	</tr>
	<!------------------------------------ domain ------------------------>

	<tr>
	   <td>&nbsp;</td>
	   <td class="dialog" align="left">Password:</td>
	   <td class="light"><input class="userfield" size="18" maxlength="32" name="j_password" width="180px" type="password"></td>
	   <td>&nbsp;</td>
	</tr>
	<tr>




	</tr><tr>
	   <td>&nbsp;</td>
	   <td class="dialog" align="left">Domain:</td>
	   <td class="light" align="right">
		<select class="light" width="180" name="j_domain">

			<option selected="selected" value="CAPLogin\XXXXX">XXXX</option>
<option value="CAPLogin\">CTI Authentication</option>



		</select>
	   </td>
	   <td valign="top"><div id="editDomainPos" class="getPos">&nbsp;</div></td>
	</tr>


	   <tr><td>&nbsp;</td>
	   <!------------------------------------ password forgotten ------------------------>

		<td>&nbsp;</td>

		<!------------------------------------ OK ---------------------------------------->
	   <td class="title-light" align="right">

			<input value="OK" onclick="return doSendForm();" width="100" type="submit">

	   </td>
	   <td>&nbsp;</td>
	</tr>
	</tbody></table>
</td></tr>
</tbody></table>
</form>

<!------------------ form sended to servlet ------------------------>
<form name="sendLogin" method="GET" action="https://xxxxx.xxx.xx:xxx/tweb/j_security_check;jsessionid=B9CB670DB13E02625B197D382750FC38">
<input name="j_username" value="" type="hidden">
<input name="j_password" value="" type="hidden">
<input name="j_pwdforgotten" value="" type="hidden">
<input name="authMode" value="" type="hidden">
<input name="origReq" value="/tweb/portal/req?getPage=/userindex.html" type="hidden">
</form>
<!------------------------------------------------------------------>



</center></div>



</body></html>

hi its me again.
i was using the data that I pulled out from my db and then provide a push button weather to lock it or not but the problem is, the js code doesn't mouse over on the next button,

here's the js code

Code:

var once = true;
function asktolock(){
  if(once){
    document.getElementById('locker').value = "Lock Me ?";
  }
}

function lockme(){
  document.getElementById('locker').value = "Locked";
  once = false;
}

and here's my html with php/js code
PHP Code:
      <?php foreach($task->result() as $row): ?>
   <tr>
        <td><?php echo $row->title; ?></td>
        <td><input type="button" id="locker" value="unlocked" onmouseover="asktolock()"  onclick="lockme()" /></td>
        <td><?php echo $row->assign_to; ?></td>
   </tr>
     <?php endforeach; ?>

if I will put an "onmouseout" and feed it with a function like this
Code:

function passby(){
   document.getElementById('locker').value = "unlock";
}

the clicking function won't work anymore, what's the best thing to do?