JavaScript - Style.display To Hide A Form Button

Hi and thanks in advance!

Someone on this site made a form for me that hides and displays fields, depending on which variable is chosen from a given array. They did a very good job with it with one exception. It seems the code that is used to hide certain fields also hides the form data rather than posting it when the form is submitted.

Here is the code for both the java (listed first) and the form itself.

Code:

// Funtion
// Description: show or hide element in the form according to selected element
//
function show_hide(){ 

  if (!document.getElementById) return false;

  fila = document.getElementById('tr_firstname');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_firstname_data');
  fila.style.display = "none"; //hide 

  fila = document.getElementById('tr_email');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_email_data');
  fila.style.display = "none"; //hide 

  fila = document.getElementById('tr_email');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_email_data');
  fila.style.display = "none"; //hide 

  fila = document.getElementById('tr_receipt_invoice');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_receipt_invoice_data');
  fila.style.display = "none"; //hide 

  fila = document.getElementById('tr_url');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_url_data');
  fila.style.display = "none"; //hide 

  fila = document.getElementById('tr_description_comments');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_description_comments_data');
  fila.style.display = "none"; //hide 

  var strtext ;
  var nuoption= document.frmbodydata.csreason.length; 
  var nuindice = document.frmbodydata.csreason.selectedIndex; 
  var nuvalueSelect = document.frmbodydata.csreason.options[nuindice].value; 
  var strtextSelect = document.frmbodydata.csreason.options[nuindice].text; 

  if (nuvalueSelect==0 )
  {
    return;
  }


    fila = document.getElementById('tr_description_comments');
    fila.style.display = ""; //show 
    fila = document.getElementById('tr_description_comments_data');
    fila.style.display = ""; //show 

  if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
  {
    fila = document.getElementById('tr_firstname');
    fila.style.display = ""; //show 
    fila = document.getElementById('tr_firstname_data');
    fila.style.display = ""; //show 


    fila = document.getElementById('tr_email');
    fila.style.display = ""; //show 
    fila = document.getElementById('tr_email_data');
    fila.style.display = ""; //show 
    
  }

  if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
  {
    fila = document.getElementById('tr_url');
    fila.style.display = ""; //show 
    fila = document.getElementById('tr_url_data');
    fila.style.display = ""; //show 
    
  }
if (nuvalueSelect==4 )
{
    fila = document.getElementById('tr_receipt_invoice');
    fila.style.display = ""; //show 
    fila = document.getElementById('tr_receipt_invoice_data');
    fila.style.display = ""; //show   
}
}

//
// Function
// Description: Validate the form for submit
//
function ValidateForm( form ) {


  var nuindice = form.csreason.selectedIndex; 
  var nuvalueSelect = form.csreason.options[nuindice].value; 
  
   if (nuvalueSelect==0  )
    {
        return false;
    }
    
    valor = form.receipt_invoice.value;

    if (!freturn(valor)) return false;    

    valor = form.description_comments.value;
    if (!freturn(valor)) return false;    

    if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
    {
      valor = form.firstname.value;
      if (!freturn(valor)) return false;    
    }
    
    valor = form.lastname.value;
    if (!freturn(valor)) return false;    

    valor = form.email.value;
    if (!freturn(valor)) return false;    


  if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==4 )
  {
      valor = form.url.value;
      if (!freturn(valor)) return false;    
    
  }
    alert ("Thank you for your comment.")  
    return true
}

//
// Function
// Description: Function to return TRUE or FALSE for inclomplete data 
//
/*function freturn(pbolvalue)
{
  if( pbolvalue == null || pbolvalue.length == 0 || /^\s+$/.test(pbolvalue) ) 
  {
    alert ("Incomplete Data, check please.");
    return false;
  }else{
    return true;
  }
} 
*/
function ReloadCaptchaImage(captchaImageId) 
   {
     var obj = document.getElementById(captchaImageId);
     var src = obj.src;
     var date = new Date();
     var pos = src.indexOf('&rad=');
     if (pos >= 0) { src = src.substr(0, pos); }
     obj.src = src + '&rad=' + date.getTime();
     return false;
     }

Code:

<center> <form id="frmbodydata" name="frmbodydata" onsubmit="return ValidateForm(this);" action="http://www.SnapHost.com/captcha/WebFormSubmit.aspx" method="post"> <input id="SnapHostID" name="SnapHostID" value="2FMYX5LLTQZQ" type="hidden" /> 


<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Reason for contact</td>
</tr>
<tr>
<td><select id="csreason" name="csreason" onchange="show_hide();" align="left"> <option value="0">Please Select One</option> <option value="1">Contact</option> <option value="2">Report Bad Link</option> <option value="3">Gallery Submission</option> <option value="4">Preferred Partner Submission</option> <option value="5">Link Exchange</option> </select></td>

</tr>
<tr id="tr_firstname" style="display:none;">
<td>First name/Last name</td>
</tr>
<tr id="tr_firstname_data" style="display:none;">
<td><input id="firstname" /><input id="lastname" align="left" type="text" /></td>
</tr>
<tr id="tr_email" style="display:none;">
<td>Email</td>
</tr>
<tr id="tr_email_data" style="display:none;">
<td><input id="email" size="30" maxlength="30" align="left" type="text" /></td>
</tr>
<tr id="tr_receipt_invoice" style="display:none;">

<td>Receipt/Invoice</td>

</tr>
<tr id="tr_receipt_invoice_data" style="display:none;">
<td><input id="receipt_invoice" name="receipt_invoice" size="15" maxlength="15" align="left" type="text" /></td>
</tr>
<tr id="tr_url" style="display:none;">
<td>URL</td>
</tr>
<tr id="tr_url_data" style="display:none;">
<td><input id="url" size="80" maxlength="80" align="left" type="text" /></td>
</tr>
<tr id="tr_description_comments" style="display:none;">
<td>Description/Comments</td>

</tr>
<tr id="tr_description_comments_data" style="display:none;">
<td><textarea id="description_comments" rows="10" cols="50" align="left"> </textarea></td>

</tr>
<tr>
<td><i>Enter security code</i></td>
<td>SECURITY CODE</td>
</tr>
<tr>
<td><input name="CaptchaCode" class="txtFields" maxlength="6" style="width:130px; height:28px; font-size:24px; text-align:center;" type="text" /></td>
<td><a href="http://www.SnapHost.com/captcha/ProCaptchaOverview.aspx"><img id="CaptchaImage" alt="Web Form Code" style="margin-left:20px; border:1px 
solid #999999;" src="http://www.SnapHost.com/captcha/WebForm.aspx?id=2FMYX5LLTQZQ&amp;ImgType=2" /></a> <br /> <a href="#" onclick="return ReloadCaptchaImage('CaptchaImage');"><span style="font-size:12px;">reload image</span></a></td>

</tr>
<tr>
<td align="center"><input src="http://www.theopenpussy.com/1/images/submit.gif" alt="Submit button" type="image" /></td>
</tr>

<tr>
<td></td>
</tr>
</tbody>
</table>
</form> </center>

Sorry for all the code! Is there anything I can do to maintain the hide and seek nature of the forms and show the data that is submitted, or am I stuck displaying all fields all the time?

I want some thing that when i click a button it shows a div then hides the button. I found this:

Code:

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>

<div id="sub3">Message Box</div>

But it has two buttons that show and then hide the div, i only want one that shows the div then hides the button. Please help.

hi
anyone know how to style the dojo button cause i declare the button it appear but i cannot use the style:"border:0px; background-color: black;"

this is how i declare my dojo button

var forward = new dijit.form.Button({
style: "border:0px;background:black;",
label: "NEXT"

});

Please help me with this !!!
Please Reply ASAP!!!
Thanks
p.s if can show me some sample

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]

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,

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>

Hello,

I'm trying to use a couple of radio buttons to toggle between text inputs being displayed, but although the code works well in IE and GC, it doesn't in FF.

That's my code:
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>
<title>number</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript">
function toggle(){
	if (Mailbox.style.display == "none") {
		document.getElementById('Mailbox').removeAttribute('style');
		document.getElementById('PhoneNum').removeAttribute('style');
//		document.getElementById('Mailbox').setAttribute('style','display:block');
		document.getElementById('PhoneNum').setAttribute( 'style', 'display:none');
	} else {
		document.getElementById('Mailbox').removeAttribute('style');
		document.getElementById('PhoneNum').removeAttribute('style');
		document.getElementById('Mailbox').setAttribute('style','display:none');
//		document.getElementById('PhoneNum').setAttribute('style','display:block');
	}
}
</script>

</head>
<body>
	<input type="radio" name="type" value="Voicemail" onclick="toggle()" checked="checked"/> VoiceMail
	<input type="radio" name="type" value="Phone" onclick="toggle()"/> Phone Number<br></br>
	<div id="Mailbox">Mailbox: <input type="text" name="mailbox"/></div>
	<div id="PhoneNum" style="display:none">Number: <input type="text" name="number"/></div>

</body>
</html>

Can anyone help me sort this out?

Thanks a lot,

David

on my website: http://www.mypubspace.com/default.php I am using the buttons from JQuery UI, as you can see on the example: http://jqueryui.com/themeroller/
there is a rollover effect on the button but not on my website?!

Hi there,

I have a search function on my website. When a user types something, options (including his characters) are displayed in a box (layer) as hyperlinks using Ajax, a very common feature these days.
My problem is that if the user clicks somewhere else in page the links display stays on screen.
I tried to fix the issue by adding an onBlur event to the search box (different id that the "display" div):
Code:

document.getElementById('livesearch').style.display = 'none';

where livesearch is the id of the hyperlinks displaying div. Job done but...the hyperlink "box" dissapear and the problem now is that the links are not working (if you click on one, the div dissapear first (I SUPPOSE) and no redirection to link is made....) I tried a couple of if else tricks I could think of with no success.
No need to say that I am not a javascript wizz....hope you like the js1 username
Any help will be appreciated.

Thank you in advance,
Julian

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>

Hi,

I am working on Salesforce.com application and want to have a standard button named "Save and Send Update" placed on Event object detail page to be hidden.

I followed some sample codes shown on net utilising style.visibility/style.display attributes of Javascript. However, I am not able to still remove/hide the standard button.

If anyone could please assist me in this, that would be great!


Thanks,

Vimal

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

Here is my code...
Code:

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

  function nameofmonth(month)
   {  
     var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
      return monthname[month]
    }  
   function monthdays(month,year)
    {
      var daysofmonth=new Array(31,28,31,31,30,31,31,31,30,31,30,31)
      if(year%4==0)
      daysofmonth[1]=29  
      return daysofmonth[month]   
      }
     function close(){
	 
	 document.getElementById("container").style.display='none'
	 }
	 
     function table()
      {
       var now=new Date()
       var hour=now.getHours()
       var minute=now.getMinutes()
       var second=now.getSeconds()
       var date=now.getDate()
       var month=now.getMonth() 
       var year=now.getFullYear()
       now.setFullYear(year,month,1)
       var firstday=now.getDay()
       var monthname=nameofmonth(month)
       var daysofmonth=monthdays(month,year)
        if(firstday>0)
          var k=-(firstday-1)
        else
          k=1
       var table="<table border=5 cellspacing=3cellpadding=8>"
       table +="<tr><th colspan=7>"+monthname + date+"th</th> <td  style='cursor:pointer' onclick='close()'>[close]</td></tr>"
       table +="<tr><th>sun</th><th>mon</th><th>tue</><th>wed</th><th>thu</th><th>fri</><th>sat</th></tr>"
       for(var i=0;i<5;i++)
        {
         table+="<tr>"
         for(var j=0;j<7;j++)
          {
            if(k<=daysofmonth && k>0)
              { if(k==date)
                 table+='<td id="clock" bgcolor="aqua">'+k+'</td>'
              else
               table+='<td style="cursor:pointer">'+k+'</td>'
               k=parseInt(k)

             }
          else
             table+="<td></td>"
             k++
           }
      table+="</tr>"
      document.getElementById("calender").innerHTML=table  
	}
	}
	
	
</script>
</head>
<body>
<input type="text" onclick="table()"/>
<table id="container"><tr><td id="calender"></td></tr></table>

</body>
</html>

HERE is a close cell in table.when it is clicked,the close() function will called and the calender will disappear.but it is not happening.please help me ,what is wrong.Thanks in advance...

// JavaScript Document
function open_tab(el){

if(document.getElementById(el).style.display == "none"){
document.getElementById(el).style.display = "block";
}
}

function close_tab(el){

if(document.getElementById(el).style.display == "block"){
document.getElementById(el).style.display = "none";
}
}

Pretty basic code, works great in FireFox and Chrome in both HTML and ASPX pages. However in IE it only works properly in the .aspx pages.

There are a series of links so when you click it hides the div's which are set to display:"block", except for one "div" which won't change to display"none" and I don't know why.