JavaScript - Hide Elements On Another Html Page After Clicking A Button

i'm still a relative noob and this has me stuck -
i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is -

protected function getToolbar()
{
$options = array();
$user = JFactory::getUser();

$create_ms = $user->authorise('core.create', 'com_pfmilestones');
$create_task = $user->authorise('core.create', 'com_pftasks');


$options[] = array(
'text' => 'JSAVE',
'task' => $this->getName() . '.save');

$options[] = array(
'text' => 'Save as new project',
'task' => $this->getName() . '.save2copy',
'options' => array('access' => ($this->item->id > 0)));


PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok'));

item used as template is id=8

any help or suggestions would be greatly appreciated..

I know how to make something function onclick(), but how can I make it so it copies the area of a textarea element, does Javascript have the ability to do this?

Thanks for any help in advance.

Hello. I have looked everywhere and I absolutely cannot find a method that works. I'm making an html website with flash. This is all I want......

A swf "this will be the default flash you see"

underneath that flash I want 3 text links named.....
Flash1
Flash2
Flash3


when you click flash1, 2, or 3 I want it to swap out the Current flash video
with a different one. This way The user can watch all the flash vids on the
same page, rather than a separate page for each flash.

I found a way to swap them out using iframe, however that requires me to
make a separate html page for each of my swf's themselves. I dont want to do that.

Plz if someone could help me I would greatly appreciate it! I hope I am posting
this in the correct section, I know swfobject involves javascripting so thats
why I'm posting here. Not that your method HAS to involve swfobject to
embed. If someone can give me code that I can just copy/paste into a blank
page in dreamweaver (and I would adjust the embded swf file name and size
etc obviously) and have it work that would be fantastic.

thank you

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

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?

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?

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

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

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?

Hi, onClick on a select element, I am trying to hide or show two different table rows. It does not seem to be working on internet explorer

Thanks for any help!

Code:

	function showMe (a, box) { 
	  document.getElementById(a).style.display = "table-row";
	  document.getElementById(a+"2").style.display = "table-row";
	}
	function hideMe (a, box) { 
	  document.getElementById(a).style.display = "none";
	  document.getElementById(a+"2").style.display = "none";
	}

Code:

 
<tr><td><b>Account Type:</b><br><small>(If you are both a club and college coach, please select college coach)</small>:</td><td><SELECT NAME="type" size="3"><OPTION VALUE="coach" onClick="hideMe('hide', this)" >Coach/Manager</OPTION><OPTION VALUE="college_coach" onClick="showMe('hide', this)">College Coach</OPTION>
								</SELECT></div>
								</td></tr>
								<tr id="hide" style="display:none;"><td><b>College:</b></td><td colspan="2"><input type="text" name="college" value=""></td></tr>
								<tr id="hide2" style="display:none;"><td><b>Title:</b></td>
								<td><select name="gender" size="1">
							<option VALUE="men" >Men's</option><option VALUE="women" >Women's</option><option VALUE="both" >Men's and Women's</option>
								</select></div>
							</td>
							<td><select name="title" size="1"><OPTION VALUE="head" >Head Coach</OPTION><OPTION VALUE="assistant" >Assistant Coach</OPTION>
								</select></div>
							</td></tr>

here is the live demo if you would like to see it:
http://new.maddogmania.com/application/register.php

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

I'm a new member, so hello all!
I'm ok at html/xhtml, but i know nothing about javascript, so hoping someone here can help!

Basically, I have a contact form on my website that offers 2 different types of contact: RSVP and Other.
these two types are available in a selection box.

What I want to happen is when the "RSVP" option is selected, the following options are displayed:
"Yes/No" radio buttons
"additional info" textarea

And when the "Other" option is selected, the following option is displayed:
"Message" text area

How can i make this happen?! i've tried searching the internet but I can't get anything i find to work. I can't even get the elements to hide!

At the moment, my form looks like this: -

Code:

<form method="POST" action="contact.php">
<table class="contact">
<tr>
<td>Name:</td>
<td><input type="text" name="name" size="20"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" size="20"></td>
</tr>
<tr>
<td>Contact Type:</td>
<td><select size="1" name="type">
<option value="rsvp" >RSVP</option>
<option value="other">Other</option></td>
</tr>
<tr>
<td colspan=2>&nbsp;</td>
</tr>

<div id="rsvp" style="display:none;">
<tr>
<td colspan=2><input type="radio" name="response" value="y"> Yes Please!</td>
</tr>
<tr>
<td colspan=2><input type="radio" name="response" value="n"> Sorry, but No. </td>
</tr>
<tr>
<td colspan=2>Additional Comments (Please include any special dietary requirements): </td>
</tr>
<tr>
<td colspan=2><textarea rows="5" name="rsvpmsg" cols="30"></textarea></td>
</tr>
</div>

<div id="other" style="display:none;">
<tr>
<td colspan=2>Message:</td>
</tr>
<tr>
<td colspan=2><textarea rows="9" name="othermsg" cols="30"></textarea></td>
</tr>
</div>

<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Submit" name="submit"> &nbsp; <input type="reset" value="Reset" name="reset"></td>
</tr>
</table>
</form>

Please note, the style="display:none;" parts aren't even working

I appreciate any help you can give!

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.

hi please help solving my problem. I have the following code for changing the td colour when chk box in it is clicked. It is working fine. My application will get some data from the database when i check a chk box say ABC. My problem is ...i want to chage the colour of the check box when it is clicked and retain the colour of my chkbox even after page refresh.

Code:

<html>
<head>
<title>color</title>
<script type="text/javascript">

function toggle(box,theId) {
    if(document.getElementById) {
        var cell = document.getElementById(theId);
        if(box.checked) {
            cell.className = "on";
        }
        else {
            cell.className = "off";
        }
    }
}

</script>
<style type="text/css">

.off {
background-color: #fff;
}
.on {
background-color: red;
}

</style>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td class="off" id="sub1"><input type="checkbox" name="subject" onclick="submit(); toggle(this,'sub1'); " value="s1" id="demo1">ABC</td>

<td class="off" id="sub2"><input type="checkbox" name="subject" onclick=" submit(); toggle(this,'sub2'); " value="s2" id="demo2">XYZ</td>

</tr>

</table>
</body>
</html>

Reply With Quote




01-21-2015, 08:37 AM #2
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts


Originally Posted by raj_d
hi please help solving my problem. I have the following code for changing the td colour when chk box in it is clicked. It is working fine. My application will get some data from the database when i check a chk box say ABC. My problem is ...i want to chage the colour of the check box when it is clicked and retain the colour of my chkbox even after page refresh.




You will need to use a cookie or local storage to record the colour of the checkbox.