JavaScript - How Do I Swap One Swf For Another By Clicking A Button / Link?

When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete.

I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size.

I have grabbed the event (which references the form, is that right?) and I have something like this:

Code:

<button type="submit" name="name_can_vary">Search</button>
event.name_can_vary.style.visibility = 'hidden';
//(obviously this isn't complete code but no doubt explains what I am talking about)

..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image.

Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on).

Thanks for any help.

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?

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();
}

Hello

Having problems with the following...a client needs me to replicate this contact page:

http://www.ravenrow.org/contact/

In particular he wants the subscribe/unsubscribe to appear only when one enters text into the text field (as it does here).

I have recently changed from using tables to div tags but this was the first website where I started to experiment with divs. Unfortunately therefore it is a mixture of tables and divs. But here is my page:

http://www.rowingpresents.com/contact.html

Can someone tell me what I need in my code to have to subscribe/unsubscribe appear and disappear as it does at ravenrow.org.

Many thanks

S

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

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

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!

Hello guys, first post so please be kind.

Usually try and find a solution and edit to work for me but this time its a little trickier.

I need a script and code that can toggle the contents of a div, while changing the button appearance but !! the button images and content have to be external to the script as the content and images will be loaded from a database on the page and duplicated on page.

ideally what I want is say 3 buttons.

button1img button2img button3img <// that when clicked control

<div id=target><this target content is now set to 2></div> //and toggle between options

and only one at a time can be on.

The button images and content have to be set outside of the initial script (reason it will be duplicated several times on page) and it cant be a call page 'content1.html' either as it needs to be created from a db on the page.

if anyone can help it will be MUCH appreciated, as im pulling my hair out trying to combine 3 different scripts that are all written differently.

i understand this is a little trickier, im hoping it is possible.

cheers
steve

How to get this to work?

Code:

<html>
<body>
<script type="text/javascript" src="01.js">
<h1>Welcome</h1>
<a href="#" onclick="write(); return false;">Click here</a>
<div id="info_here">
</div>
</body>
</html>

01.js
Code:

function write() {
var a=document.getElementById("info_here");
a.innerHTML=document.write("Hello <br />" + "Thanks for clicking");
}

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.

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!

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>