JavaScript - Hide/remove Button From Salesforce Detail Page

I have a radio button that asks Does your URL exist or need to be purchased? and a drop down menu that lists different types of web projects (i.e. new website and website redesign).

What I'm trying to achieve is, if the user selects that the URL exists, I would like the drop down menu option new website to be removed from the list.

Form:
Code:

<form>
<input type="radio" name="website_status" value="exists"/> Exists
<input type="radio" name="website_status" value="purchase_required"/> Needs to be purchased

<select name="projects">
<option></option>
<option value="new_website">New Website</option>
<option value="website_redesign">Website Redesign</option>
</select>
</form>

JavaScript:
[CODE]
<script>
window.onload = initForms;

function initForms() {
for (var i=0; i<document.forms.length; i++) {
document.forms[i].onsubmit = function() {return validForm();}
}
}

function validForm() {
var inputarray = document.getElementsByTagName("input");
var selectarray = document.getElementsByTagName("select");
var textarea = document.getElementsByTagName("textarea");

if (inputarray[0].checked == true) {
selectarray[0].remove(options[1]);
return false;
}
</script>

I've been experimenting with this for the last couple hours and am getting nothing! Could someone please point me in the right direction?

When I click the button, the images hide/show in IE, but this doesn't work in Firefox. I've tried JSLint and JavascriptLint, but haven't figured out what the issue is. Any help would be much appreciated!! This is the code below:

<script language="Javascript">
<![CDATA[
function openConsole(docId, attachmentFileName, name) {
if (window.customOpenConsole) {
customOpenConsole(encodeURIComponent(attachmentFileName), name);
} else {
headerFrame = window.parent.parent.frames["Header"];
if (headerFrame != null && headerFrame.openDocLink != null){
headerFrame.openDocAttachment(docId, attachmentFileName, name);
}
}
}
function STGhide()
{
var x=document.getElementsByName("ImageControlZone");
for(j=0;j<x.length;j++)
{
var imgs = x[j].getElementsByTagName('img');
for(i=0;i<imgs.length;i++)
{
imgs[i].style.display="none";
}
}
var link = document.getElementById("ShowHideButton");
//alert(link.innerHTML)
link.innerHTML ="<img alt='' src='img/hideshow/showimage.gif' border='0' onclick='javascript:STGshow();' />";
}
function STGshow()
{
var x=document.getElementsByName("ImageControlZone");
for(j=0;j<x.length;j++)
{
var imgs = x[j].getElementsByTagName('img');
for(i=0;i<imgs.length;i++)
{
imgs[i].style.display="";
}
}
var link = document.getElementById("ShowHideButton");
link.innerHTML ="<img alt='' src='img/hideshow/hideimage.gif' border='0' onclick='javascript:STGhide();' />";
}

function openDocumentLink(externalId, languageId) {

if (window.parent.openDocLink != null) {
window.parent.openDocLink(externalId, languageId);
} else {
headerFrame = window.parent.parent.frames["Header"];
if (headerFrame != null && headerFrame.openDocLink != null)
{
headerFrame.openDocLink(externalId, languageId);
}
else {
setTimeout("openDocumentLink('"+externalId+"','"+languageId+"')",500);
}
}
}
]]>
</script>

Hi all,

I'm trying to hide a form button in javascipt.
Within a function I have the following ...

Quote:
document.getElementById(button).display='none';
However it just errors and says button is undefined. button is the id and name of the form button btw.

Do I need to define which form it is part of or something else?

Many thanks for any pointers or help.

Sir P

plzz help!!!!


i am struck wit one of my task.... in html/jscripts .. i have to design a page which dynamically generates a table and inserts the values submited.... in which i have 3 radio buttons ... which should toggle the visibility of the table..

Requirement:

-design a page to keep the track of payments
-select box which holds two types (payments /adjustments)
-data when submitted to be saved in the table
-by default "all" radio box to be checked
if payment radion button is checked the fields of nly payments to be displayed
if adjustments radion button is checked the fields of nly adjustments to be displayed
-



this the code i developed soo far


[CODE]

<html>
<head>
<title> Payments/Adjustments
</title>
<script>



var num1=0;
function Output(srcHolder)
{
alert("haiiii");
//var srcTable = document.createElement("resultTable");

srcTable = document.getElementById("resultTable");
srcTable.deleteRow(srcTable.rows.length-1);
tmpRow = srcTable.insertRow();

tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.date.value;

tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.type.value+"-"+f.name.value;


tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.amount.value;
num1=f.amount.value;
var total=add();



tmpRow = srcTable.insertRow();
tmpCell = tmpRow.insertCell();
tmpCell.innerText = "amount";
tmpCell = tmpRow.insertCell();
tmpCell.innerText = total;

srcHolder.appendChild(srcTable);

if(flag==1)
{
tmpRow = srcTable.insertRow();
tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.date.value;
}

}
var sum=0;
function add()
{
num1=parseInt(num1);
sum=sum+num1;
return sum;
}

</script>




</head>


<body>
<form name="f">
<table align="center">
<tr>
<td>
DATE:<input type="name" id="date" title="enter date in mm/dd/yyyy format" size="20" maxlength="10"/>
</td>
<td>
For:<input type="name" id="name" title="Entername" size="40" />
</td>
<td>
Amount:<input type="name" id="amount" title="amount" size="10" />
</td>
</tr>
<tr>
<td colspan="3">
Type:<select name="type">
<option value="">--Select--</option>
<option value="adjust" >adjustments</option>
<option value="payments">payments</option>
</select>
<td>
</tr>
</table>
<br><center>
<input type="button" name="Save" value="Save" onclick="Output(srcHolder)"/>
<input type="reset" name="Cancel" value="Cancel"/>
</center>
<hr>

<center>
<label for="type">Type</label>
<input type="radio" name="type1" value="pa"/>payments

<input type="radio" name="type1" value="ad"/>adjustments

<input type="radio" name="type1" value="all" />all

<table border="3" id="resultTable">
<thead>

<th>Date
</th>

<th>For
</th>
<th>Amount
</th>

</thead>




<tbody>

<tr>
</tr>

<tr>
</tr>
<th>
</tr>


</tbody>


</table>
<div id="srcHolder" >

</div>
</form>
</body>
</html>

[CODE]

Hi,

I need a button that not only resets what is typed in the textarea but also hides all shown tables...

Here's how my current set up is...

---------text area------ with a reset button

table1 title (when clicked, shows a table under it)
table2 title (when clicked, shows a table under it)
table3 title (when clicked, shows a table under it)

the tables under the main tables have buttons that when clicked on inserts texts in the textarea.

Any help would be much much appreciated!

Hi,
I'm trying to make my javascript linked "print" button NOT appear in browsers with js disabled? I'm a total js noob. Any help will be appreciated. Thanks.
Here's my code:
Code:

<a href="javascript:window.print()"><img src="images/PrintButton.png"></a>

Hi Guys,

I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need.

Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box.

For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines.

Below is the HTML to give you an idea of what I mean.

Code:

<table>
<tr>
<td>&nbsp;</td>
<td><label class="bold">Yes</label></td>
<td><label class="bold">No</label></td>
</tr>
<tr>
<td><label for="property_q1"> - Is this your house?</label></td>

<td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td>

<td><input name="property_q1" id="property_q1" type="radio" value="No" /></td>
</tr>
</table>

<br />

<div id="fine">It's fine, don't worry about filling it in.</div>
<div id="fill" style="display:none">Please fill in the form below.</div>
<table>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><textarea name="info" id="info" cols="60" rows="5"></textarea></td>
</tr>
</table>
<input type="submit" />

Help is greatly appreciated!!

I have two radio buttons on a form. I wish for one button to show a div that's hidden with {display:none;}, and the other to put it back to being hidden when selected. My code seemed sound to me but in firefox it doesn't really work, only in internet explorer. I would like to keep the coding as simple as possible:

Code:

style: 

.hidden{display:none;}

script:
function show() {document.getElementById("hide").style.display = 'inline'}

function hidden() {document.getElementById("hide").style.display = 'none'}

body:

How old are you?<br/>
<input type="radio" name="age" onclick="return hidden();" value="yes"/>over 25<br/>
<input type="radio" name="age" onclick="return show();" value="no"/>25 or under<br/>

<div id=hide class="hidden">
Do you have over 2 years of experience?<br/>
<input type="radio" name="experience" value="yes"/>yes<br/>
<input type="radio" name="experience" value="no"/>no<br/>
</div>

overImg=[];outImg=[];
outImg[0]=new Image();outImg[0].src="images/enter1.gif";
overImg[0]=new Image();overImg[0].src="images/enter2.gif";
outImg[1]=new Image();outImg[1].src="images/keio.gif";
overImg[1]=new Image();overImg[1].src="images/inria.gif";
function chgImg(img,type){
switch(type){
case "over":document.images[img].src=overImg[img].src;break;
case "out":document.images[img].src=outImg[img].src;break;
}}


why are arrays used here ?

Hello,

I am currently using Code:

onload="document.getElementById("hidepage").style.visibility="hidden";"

to try to hide a div box. Yet this will not work. I've tried FF, IEpp4 (IE platform preview 4) and IE9beta. This is the correct <div> id, and I do not know why this will not work.

Thanks!

I'm looking for a javascript that will detect the following user information: OS version, browser version, quicktime + flash + adobe reader + java + windows media player + sliverlight versions of the users computer.

I am looking to put this script into an HTML page and the information be displayed so the user can see what versions of the programs they have. I don't know a whole lot about javascript so if there is a script i could copy and paste, that would be great!!!!

Also, is it possible to have the current versions of these programs displayed and automatically updated as well so the user can compare the version they have with the most current version of the program?
Any help would be great! Thanks!!!

I am building an elearning site where the user is taken through a series of dynamically driven pages to refine their choices. I am using php amd mysql to populate a series of tables but on the last page the table gets very long so i am trying to make the table expandable.

I found this and this on http://www.javascripttoolbox.com/jquery/ and it's proving helpful but i need a little help taking it a step further. I also found this to be useful for anyone else who is trying to do the same thing: http://www.jankoatwarpspeed.com/post...nd-plugin.aspx

FROM JAVASCRIPTTOOLBOX

A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row.
The only requirements a

1. Put a class of "parent" on each parent row (tr)
2. Give each parent row (tr) an id
3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs

Original code:

Code:

$(function() {
	$('tr.parent')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
		});
	$('tr[@class^=child-]').hide().children('td');
});

This works great but my parent and child rows all contain checkboxes and If i try and check the checkboxes in the master rows the child rows associated with that master row expand and contract. I have added an extra cell to each row and i'm using a css class to add an arrow image to each master row but i am new to Javascript so i am not sure what i am doing.

My code now looks like this:

Code:

$(document).ready(function() {
	$('tr:not(.parent)').hide();
	
	//$('tr.parent')
	$('.arrow')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
			$(this).toggleClass("up");
		});
	});

So far the arrow image is toggling but i can't seem to work out how to get the .click function to affect the whole row and not just the image. Can anybody help me?

Thanks

I have a page that is generated using php. Below, the pdf newsletter for each month is embedded directly into the page. What I want to do is have some javascript that when the link for a month is clicked, the embedded pdf expands below and when the user clicks on another month, that newsletter is hidden then the one they clicked on gets displayed; so only one newsletter is displayed at a time.

I have searched all over the internet and I havn't found anything that will solve my problem.

PHP Code:
$listmonth=array("January","February","March","April","May","June","August","September","October","November","December");
foreach ($listmonth as $month) {
if (file_exists($year2.'-'.$month.'.pdf')) {
echo '<embed src="'.$year2 .'-'.$month.'.pdf#toolbar=0&navpanes=0" width="500" height="375">' ;}
else {echo $month;}
echo '<br />';
} 

I am running a simple show hide div script as follows:

Code:

<script type="text/javascript">
<!--
    function toggle_visibility(slideshow) {
       var e = document.getElementById(slideshow);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
	
	
//-->
</script>


<a href="#" onclick="toggle_visibility('slideshow');">Show Gallery + </a>

<div id="slideshow" style="display:none">slideshow</div>

It works but the page reloads and returns the user to the top of the page not to the "shown" div. Any way to send them back to the shown div or stop the reload? Any help would be appreciated.

Thanks

Does anyone know what's wrong with this code because when the page loads, the link is not being hidden

Code:

window.onload = setTarget;

function setTarget()
{
var theLinks = document.getElementsByTagName('a');
for(var i = 0; i < theLinks.length; i++)
{
if(theLinks[i].getAttribute('href') == '/subjects/new')
{
theLinks[i].style.display = "none";
}
}
}