HTML - hiding and showing text based on condition

NerishaB
NerishaB used Ask the Experts™
on
Hi,

I have a form that contains 3 textareas, and some text as well.  The form is creates to allow the user to either send an email or an SMS to a client.  When the user clicks on the link for the email address the form opens up with 3 text areas, to write the email with a header, body and footer of the mail.  When the user selects an SMS, nly 1 textarea is displayed to enter the texts message.  Now, I have managed to hide and shoe the textareas properly, but there is still 2 lines of text: "160/160 characters Message 1" displayed.  I want to hide it when the user chooses email, and show it when the user chooses SMS.  See my current code and screenshpt below.
thisForm = document.forms["Messages"];
           if (thisForm.DeliveryMethod[0].checked) {
           thisForm.Address.value = DocEmail;
		   document.getElementById("MessagesMessageHeader").style.display = '';
           document.getElementById("MessagesMessageFooter").style.display ='';
           } else {
           thisForm.Address.value = DocSMS;
		   document.getElementById("MessagesMessageHeader").style.display ='none';
           document.getElementById("MessagesMessageFooter").style.display ='none';
           }



<textarea style="WIDTH: 489px; HEIGHT: 54px" onkeydown="limitText(this.form.limitedtextarea, 160);" id="Messageslimitedtextarea" rows="3" cols="57" name="limitedtextarea"></textarea>&nbsp;<br><B><span id="countdown">160</B></span> / 160 characters</div></font><div id="messagecount">Message 1</div>

Open in new window

Email-1-.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Surround the part that you want to hide by an additional <div> with an id set. So you can hide the div or even not render it by using display='' or visibility='' attribute.

Author

Commented:
Can you give me an example of how to do this?
Michel PlungjanIT Expert
Top Expert 2009

Commented:
something like this?

var thisForm = document.forms["Messages"];
var isMail = (thisForm.DeliveryMethod[0].checked);
thisForm.Address.value = (isMail)?DocEmail:DocSMS;
document.getElementById("MessagesMessageHeader").style.display = (isMail)?'':'none';
document.getElementById("MessagesMessageFooter").style.display = (isMail)?'':'none';
document.getElementById("sms").style.display = (isMail)?'none':'';



<div id="sms">
<textarea style="WIDTH: 489px; HEIGHT: 54px" onkeydown="limitText(this.form.limitedtextarea, 160);" id="Messageslimitedtextarea" rows="3" cols="57" name="limitedtextarea"></textarea>&nbsp;<br>
<span style="font-weight:bold" id="countdown">160</span> / 160 characters</div></font><div id="messagecount">Message 1</div>
</div>

Open in new window

Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

I assume that your code snippet missed one opening <div> before the <textarea> tag when you copied it out.

REPLACE:
<B><span id="countdown">160</B></span> / 160 characters

BY:
<div id="textdiv">
<span id="countdown"><B>160</B></span> / 160 characters</div>

(You should take care about the nesting. Your <span> and <b> tag where not properly nested. I would recommend using a lowercase <b> instead of <B>)
and add a line to your javascript for the SMS display:
document.getElementById("textdiv").style.display ='none';

Author

Commented:
Thanks mplungjan,

It works, but now it hides the Message header and message footer all the time.  See my code below:  See the "MessagesMessageHeader" and "MessagesMessageFooter" section.  It does not display at all.

thisForm = document.forms["Messages"];
           if (thisForm.DeliveryMethod[0].checked) {
           thisForm.Address.value = DocEmail;
		   document.getElementById("MessagesMessageHeader").style.display='';
           document.getElementById("MessagesMessageFooter").style.display='';
		   document.getElementById("sms").style.display='none';
		   document.getElementById("messagecount").style.display='none';
           } else {
           thisForm.Address.value = DocSMS;
		   document.getElementById("MessagesMessageHeader").style.display='none';
           document.getElementById("MessagesMessageFooter").style.display='none';
		   document.getElementById("sms").style.display='';
		   document.getElementById("messagecount").style.display='';
           }


<td>
			  <div id="sms">
              <p><textarea style="WIDTH: 489px; HEIGHT: 36px" id="MessagesMessageHeader" cols="44" name="{MessageHeader_Name}">{MessageHeader}</textarea><br>
              <textarea style="WIDTH: 489px; HEIGHT: 54px" onkeydown="limitText(this.form.limitedtextarea, 160);" id="Messageslimitedtextarea" rows="3" cols="57" name="limitedtextarea"></textarea>&nbsp;<br>
			  <span style="font-weight:bold" id="countdown">160</span> / 160 characters</div></font><div id="messagecount">Message 1</div>
			  </div>
			  <textarea style="WIDTH: 489px; HEIGHT: 44px" id="MessagesMessageFooter" rows="1" cols="43" name="{MessageFooter_Name}">{MessageFooter}</textarea></p>
            </td>

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
That is due to
a) me not knowing what the rest of your code looks like, for example it is a surprise that you have it in a table. Either hide the rows or do not use a table.
b) you not using the code I gave you


Author

Commented:
Sorry.  Only asking cos I am new to this and don't know how to do it any other way.  And the code that you gave me did not work, which is why I tweaked it to add my own code in there.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Something like this. Please understand that the more information I have the better I can help

<html>
<head>
<script type="text/javascript">
var DocEmail="....";
var DocSMS="....";

function showHide(thisForm) {
  var isMail = (thisForm.DeliveryMethod[0].checked);
  thisForm.Address.value = (isMail)?DocEmail:DocSMS;
  document.getElementById("smsDiv").style.display=(isMail)?'none':'';

/* I do not know what these are
  document.getElementById("MessagesMessageHeader").style.display = (isMail)?'':'none';
  document.getElementById("MessagesMessageFooter").style.display = (isMail)?'':'none';
*/

} 
window.onload=function() {
  showHide(document.Messages)
}
</script>
</head>
<body>
<form name="Messages">
<input type="hidden" name="Address" value="">
<table border="2">
<tr><th colspan="2" align="left">Send messages</th></tr>
<tr valign="top"><td>Associate</td><td><select></select></td></tr>
<tr valign="top"><td >message</td><td><textarea style="WIDTH: 489px; HEIGHT: 54px" ></textarea><br>
<div id="smsDiv" valign="top">
<textarea style="WIDTH: 489px; HEIGHT: 54px" onkeydown="limitText(this.form.limitedtextarea, 160);" id="Messageslimitedtextarea" rows="3" cols="57" name="limitedtextarea"></textarea>&nbsp;<br>
<span style="font-weight:bold" id="countdown">160</span> / 160 characters<br>
Message <span id="messagecount">1</span>
</div>
</td></tr>
<tr valign="top"><td>del method</td><td>
<input type="radio" name="DeliveryMethod" id="mail" checked onClick="showHide(this.form)"><label for="mail">Email</label>
<input type="radio" name="DeliveryMethod" id="sms" onClick="showHide(this.form)"><label for="sms">SMS</label>
</td></tr>
</table>
</form>

Open in new window

Author

Commented:
I have attached the entire HTML page, so you get a better understanding of what I'm trying to do.  Also see the attached picture in my first post.  
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title>{Label1} message_maint</title>
<meta name="GENERATOR" content="CodeCharge Studio 4.1.00.025">
<link rel="stylesheet" type="text/css" href="Styles/{CCS_Style}/Style.css">
<script language="JavaScript" type="text/javascript">

//Begin CCS script
//Include Common JSFunctions @1-D3B5F5BF

</script>
<script language="JavaScript" type="text/javascript" charset="utf-8" src="ClientI18N.php?file=Functions.js&amp;locale={res:CCS_LocaleID}"></script>
<script language="JavaScript" type="text/javascript">

 function limitText(limitField, limitNum){
	var count = limitField.value.length;
	var messagecount = document.getElementById("messagecount");
	var countdown = document.getElementById("countdown");

	
	if (count < limitNum){
		countdown.innerHTML = limitNum - count;
		messagecount.innerHTML = "Message 1";
	}
	else if (count < limitNum * 2){
		countdown.innerHTML = (limitNum * 2) - count;
		messagecount.innerHTML = "Message 2";
	}
	else if (count < limitNum * 3){
		countdown.innerHTML = (limitNum * 3) - count;
		messagecount.innerHTML = "Message 3";
	}
		else if (count < limitNum * 4){
		countdown.innerHTML = (limitNum * 4) - count;
		messagecount.innerHTML = "Message 4";
	}
	else {
		limitField.value = limitField.value.substring(0, limitNum * 3);
	} 
}
//End Include Common JSFunctions

//MessagesAssociateID_OnChange @14-E1F05B4D
function MessagesAssociateID_OnChange()
{
    var result = true;
//End MessagesAssociateID_OnChange

//Submit Form @51-E7D9EFE7
    document.forms["Messages"].submit();
//End Submit Form

//Close MessagesAssociateID_OnChange @14-BC33A33A
    return result;
}
//End Close MessagesAssociateID_OnChange

//MessagesDeliveryMethod_OnClick @11-76EB5BBA
function MessagesDeliveryMethod_OnClick()
{
    var result = true;
//End MessagesDeliveryMethod_OnClick

     thisForm = document.forms["Messages"];
     if (thisForm.DeliveryMethod[0].checked) {
     thisForm.Address.value = DocEmail;
	   document.getElementById("MessagesMessageHeader").style.display='';
       document.getElementById("MessagesMessageFooter").style.display='';
	   document.getElementById("sms").style.display='none';
		   document.getElementById("messagecount").style.display='none';
          } else {
         thisForm.Address.value = DocSMS;
		   document.getElementById("MessagesMessageHeader").style.display='none';
         document.getElementById("MessagesMessageFooter").style.display='none';
		   document.getElementById("sms").style.display='';
		   document.getElementById("messagecount").style.display='';
           }
  

//Custom Code @67-2A29BDB7
    // -------------------------
    // Write your own code here.
    // -------------------------
//End Custom Code

//Close MessagesDeliveryMethod_OnClick @11-BC33A33A
    return result;
}
//End Close MessagesDeliveryMethod_OnClick

//DEL

//Messages_OnLoad @6-B02CAC8F
function Messages_OnLoad(form)
{
    var result = true;
//End Messages_OnLoad

//Custom Code @36-2A29BDB7
   MessagesDeliveryMethod_OnClick();
//End Custom Code

//Close Messages_OnLoad @6-BC33A33A
    return result;
}
//End Close Messages_OnLoad

//_OnLoad @1-9C4F01C0
function _OnLoad()
{
    var result = true;
//End _OnLoad

//Set Focus @64-6A79F89E
    if (document.forms["Messages"] && document.forms["Messages"].MessageBody) document.forms["Messages"].MessageBody.focus();
//End Set Focus

//Close _OnLoad @1-BC33A33A
    return result;
}
//End Close _OnLoad

//DEL    

//bind_events @1-2B006023
function bind_events() {
    if (functionExists("header_bind_events")) header_bind_events();
    if (functionExists("customers_meaning_bind_events")) customers_meaning_bind_events();
    if (functionExists("footer_bind_events")) footer_bind_events();
    if (functionExists("customers_menu_bind_events")) customers_menu_bind_events();
    if (functionExists("associates_meaning_bind_events")) associates_meaning_bind_events();
    addEventHandler("MessagesAssociateID", "change", MessagesAssociateID_OnChange);
    addEventHandler("MessagesDeliveryMethod", "click", MessagesDeliveryMethod_OnClick);
    addEventHandler("Messages", "load", Messages_OnLoad);
    addEventHandler("", "load", _OnLoad);
}
//End bind_events

window.onload = bind_events; //Assign bind_events @1-19F7B649

//End CCS script
</script>
</head>
<body>
<p>{header}{customers_meaning}{customers_menu}{associates_meaning}</p>
<p>
<!-- BEGIN Record Messages -->
<form id="Messages" method="post" name="{HTMLFormName}" action="{Action}">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td style="WIDTH: 200px" valign="top">
        <table class="Header" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="HeaderLeft"><img border="0" src="Styles/{CCS_Style}/Images/Spacer.gif"></td> 
            <th>Send Messages</th>
 
            <td class="HeaderRight"><img border="0" src="Styles/{CCS_Style}/Images/Spacer.gif"></td>
          </tr>
        </table>
 
        <table style="WIDTH: 700px" class="Record" cellspacing="0" cellpadding="0">
          <!-- BEGIN Error -->
          <tr class="Error">
            <td colspan="2">{Error}</td>
          </tr>
          <!-- END Error -->
          <tr class="Controls">
            <th>{res:Associate}</th>
 
            <td>
              <select style="WIDTH: 247px" id="MessagesAssociateID" name="{AssociateID_Name}">
                <option selected value="">Select Value</option>
                {AssociateID_Options}
              </select>
 </td>
          </tr>
 
          <tr class="Controls">
            <th>Message</th>
 
            <td>
			  <div id="sms">
              <p><textarea style="WIDTH: 489px; HEIGHT: 36px" id="MessagesMessageHeader" cols="44" name="{MessageHeader_Name}">{MessageHeader}</textarea><br>
              <textarea style="WIDTH: 489px; HEIGHT: 54px" onkeydown="limitText(this.form.limitedtextarea, 160);" id="Messageslimitedtextarea" rows="3" cols="57" name="limitedtextarea"></textarea>&nbsp;<br>
			  <span style="font-weight:bold" id="countdown">160</span> / 160 characters</font><div id ="messagecount">Message 1</div>
			  </div>
			  <textarea style="WIDTH: 489px; HEIGHT: 44px" id="MessagesMessageFooter" rows="1" cols="43" name="{MessageFooter_Name}">{MessageFooter}</textarea></p>
            </td>
          </tr>
         
          <tr class="Controls">
            <th>Delivery Method</th>
 
            <td class="HabitazPageBODY">
              <!-- BEGIN RadioButton DeliveryMethod --><input id="MessagesDeliveryMethod_{DeliveryMethod:optionNumber}" value="{Value}" type="radio" name="{DeliveryMethod_Name}" {Check}>{Description}<!-- END RadioButton DeliveryMethod --></td>
          </tr>
 
          <tr class="Controls">
            <th>Address</th>
 
            <td><input id="MessagesAddress" value="{Address}" maxlength="64" size="50" name="{Address_Name}"><input id="MessagesCustomerID" value="{CustomerID}" type="hidden" name="{CustomerID_Name}"></td>
          </tr>
 
          <tr style="HEIGHT: 40px" class="Bottom">
            <td colspan="2" align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input id="MessagesUserID1" value="{UserID1}" type="hidden" name="{UserID1_Name}">
              <!-- BEGIN Button Button_Submit --><input id="MessagesButton_Submit" value="Submit" src="./Styles/OZ-TBC/Images/en/ButtonUpdate.gif" type="image" name="{Button_Name}"><!-- END Button Button_Submit --></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>
<!-- END Record Messages --></p>
<p>
<!-- BEGIN Grid Messages1 -->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
      <table class="Header" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="HeaderLeft"><img border="0" src="Styles/{CCS_Style}/Images/Spacer.gif"></td> 
          <th>List of Messages </th>
 
          <td class="HeaderRight"><img border="0" src="Styles/{CCS_Style}/Images/Spacer.gif"></td>
        </tr>
      </table>
 
      <table style="WIDTH: 700px" class="Grid" cellspacing="0" cellpadding="0">
        <tr class="Caption">
          <th>
          <!-- BEGIN Sorter Sorter_DeliveryMethod --><a href="{Sort_URL}" id="Messages1Sorter_DeliveryMethod">Delivery Method</a> 
          <!-- BEGIN Asc_On --><img border="0" src="Styles/{CCS_Style}/Images/Asc.gif"><!-- END Asc_On -->
          <!-- BEGIN Desc_On --><img border="0" src="Styles/{CCS_Style}/Images/Desc.gif"><!-- END Desc_On --><!-- END Sorter Sorter_DeliveryMethod --></th>
 
          <th>
          <!-- BEGIN Sorter Sorter_Address --><a href="{Sort_URL}" id="Messages1Sorter_Address">Address</a> 
          <!-- BEGIN Asc_On --><img border="0" src="Styles/{CCS_Style}/Images/Asc.gif"><!-- END Asc_On -->
          <!-- BEGIN Desc_On --><img border="0" src="Styles/{CCS_Style}/Images/Desc.gif"><!-- END Desc_On --><!-- END Sorter Sorter_Address --></th>
 
          <th>Body</th>
 
          <th>
          <!-- BEGIN Sorter Sorter_upd --><a href="{Sort_URL}" id="Messages1Sorter_upd">Upd</a> 
          <!-- BEGIN Asc_On --><img border="0" src="Styles/{CCS_Style}/Images/Asc.gif"><!-- END Asc_On -->
          <!-- BEGIN Desc_On --><img border="0" src="Styles/{CCS_Style}/Images/Desc.gif"><!-- END Desc_On --><!-- END Sorter Sorter_upd --></th>
        </tr>
 
        <!-- BEGIN Row -->
        <tr class="Row">
          <td>{DeliveryMethod}&nbsp;</td> 
          <td>{Address}&nbsp;</td> 
          <td>{MessageBody}&nbsp;</td> 
          <td>{upd}&nbsp;</td>
        </tr>
 <!-- END Row -->
        <!-- BEGIN NoRecords -->
        <tr class="NoRecords">
          <td colspan="4">No records</td>
        </tr>
        <!-- END NoRecords -->
        <tr class="Footer">
          <td colspan="4">
            <!-- BEGIN Navigator Navigator -->
            <!-- BEGIN Page_Parameter --><input value="{Value}" type="hidden" name="{Name}"><!-- END Page_Parameter -->Per page: 
            <select onchange="CCChangeSize(this, '{FormName}')" name="{FormName}PageSize">
              <option selected value="">-</option>
 {PageSize_Options}
            </select>
 
            <!-- BEGIN First_On --><a href="{First_URL}">First</a> <!-- END First_On -->
            <!-- BEGIN First_Off -->First <!-- END First_Off -->
            <!-- BEGIN Prev_On --><a href="{Prev_URL}">Prev</a> <!-- END Prev_On -->
            <!-- BEGIN Prev_Off -->Prev <!-- END Prev_Off -->&nbsp; 
            <!-- BEGIN Pages -->
            <!-- BEGIN Page_On --><a href="{Page_URL}">{Page_Number}</a>&nbsp;<!-- END Page_On -->
            <!-- BEGIN Page_Off -->{Page_Number}&nbsp;<!-- END Page_Off --><!-- END Pages -->of &nbsp;{Total_Pages}&nbsp; 
            <!-- BEGIN Next_On --><a href="{Next_URL}">Next</a> <!-- END Next_On -->
            <!-- BEGIN Next_Off -->Next <!-- END Next_Off -->
            <!-- BEGIN Last_On --><a href="{Last_URL}">Last</a> <!-- END Last_On -->
            <!-- BEGIN Last_Off -->Last <!-- END Last_Off --><!-- END Navigator Navigator -->&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<!-- END Grid Messages1 -->{footer}</p>
</body>
</html>

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
Please change

<div id="sms">
              <p><textarea style="WIDTH: 489px; HEIGHT: 36px" id="MessagesMessageHeader" cols="44" name="{MessageHeader_Name}">{MessageHeader}</textarea><br>
              <textarea style="WIDTH: 489px; HEIGHT: 54px" onkeydown="limitText(this.form.limitedtextarea, 160);" id="Messageslimitedtextarea" rows="3" cols="57" name="limitedtextarea"></textarea>&nbsp;<br>
			  <span style="font-weight:bold" id="countdown">160</span> / 160 characters</font><div id ="messagecount">Message 1</div>
			  </div>

to

<div id="sms">
  <p><textarea style="WIDTH: 489px; HEIGHT: 36px" id="MessagesMessageHeader" cols="44" name="{MessageHeader_Name}">{MessageHeader}</textarea><br>
  <textarea style="WIDTH: 489px; HEIGHT: 54px" onkeydown="limitText(this.form.limitedtextarea, 160);" id="Messageslimitedtextarea" rows="3" cols="57" name="limitedtextarea"></textarea>&nbsp;<br>
  <span style="font-weight:bold" id="countdown">160</span> / 160 characters<br>Message <span id ="messagecount">1</span></p>
</div>

Open in new window

Author

Commented:
It's showing and hiding Messageslimitedtextarea properly, the other 2 textareas, "MessagesMessageHeader", and "MessagesMessageFooter" is not displayed at all.  I changed my code to exactly what you indicated above.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
I can only help you with the html and the javascript

You posted some template thing. I cannot run that myself

Author

Commented:
This is the full html document that I have attached here.
message-maint.html
Michel PlungjanIT Expert
Top Expert 2009

Commented:
No it is still the template. I do not get two radios for the Email and the SMS
Please load the page in the browser, view-source and post that instead

Author

Commented:
Please see attached source code from the web page created.
<script language="JavaScript" type="text/javascript">var branchFilterEnabled=true;</script><script type='text/javascript' language='JavaScript'>var DocEmail = 'test@test.test';var DocSMS   = '0123456789';</script><html> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="content-type"> 
<title>B.OS message_maint</title> 
<meta name="GENERATOR" content="CodeCharge Studio 4.1.00.025"> 
<link rel="stylesheet" type="text/css" href="Styles/OZ-TBC/Style.css"> 
<script language="JavaScript" type="text/javascript"> 
 
//Begin CCS script
//Include Common JSFunctions @1-D3B5F5BF
 
</script> 
<script language="JavaScript" type="text/javascript" charset="utf-8" src="ClientI18N.php?file=Functions.js&amp;locale=en"></script> 
<script language="JavaScript" type="text/javascript"> 
 
 function limitText(limitField, limitNum){
  var count = limitField.value.length;
  var messagecount = document.getElementById("messagecount");
  var countdown = document.getElementById("countdown");
 
  
  if (count < limitNum){
    countdown.innerHTML = limitNum - count;
    messagecount.innerHTML = "Message 1";
  }
  else if (count < limitNum * 2){
    countdown.innerHTML = (limitNum * 2) - count;
    messagecount.innerHTML = "Message 2";
  }
  else if (count < limitNum * 3){
    countdown.innerHTML = (limitNum * 3) - count;
    messagecount.innerHTML = "Message 3";
  }
    else if (count < limitNum * 4){
    countdown.innerHTML = (limitNum * 4) - count;
    messagecount.innerHTML = "Message 4";
  }
  else {
    limitField.value = limitField.value.substring(0, limitNum * 3);
  } 
}
//End Include Common JSFunctions
 
//MessagesDeliveryMethod_OnClick @11-76EB5BBA
function MessagesDeliveryMethod_OnClick()
{
    var result = true;
//End MessagesDeliveryMethod_OnClick
 
//Custom Code @62-2A29BDB7
//try {
           thisForm = document.forms["Messages"];
           if (thisForm.DeliveryMethod[0].checked) {
           thisForm.Address.value = DocEmail;
       document.getElementById("header").style.display='';
           document.getElementById("footer").style.display='';
       document.getElementById("sms").style.display='none';
       document.getElementById("messagecount").style.display='none';
           } else {
           thisForm.Address.value = DocSMS;
       document.getElementById("header").style.display='none';
           document.getElementById("footer").style.display='none';
       document.getElementById("sms").style.display='block';
       document.getElementById("messagecount").style.display='';
           }
  //  }
  //      catch(e) { alert(e) };
           result = true;
//End Custom Code
 
//Close MessagesDeliveryMethod_OnClick @11-BC33A33A
    return result;
}
//End Close MessagesDeliveryMethod_OnClick
 
//DEL  
 
//MessagesAssociateID_OnChange @14-E1F05B4D
function MessagesAssociateID_OnChange()
{
    var result = true;
//End MessagesAssociateID_OnChange
 
//Submit Form @51-E7D9EFE7
    document.forms["Messages"].submit();
//End Submit Form
 
//Close MessagesAssociateID_OnChange @14-BC33A33A
    return result;
}
//End Close MessagesAssociateID_OnChange
 
//Messages_OnLoad @6-B02CAC8F
function Messages_OnLoad(form)
{
    var result = true;
//End Messages_OnLoad
 
//Custom Code @36-2A29BDB7
   MessagesDeliveryMethod_OnClick();
//End Custom Code
 
//Close Messages_OnLoad @6-BC33A33A
    return result;
}
//End Close Messages_OnLoad
 
//_OnLoad @1-9C4F01C0
function _OnLoad()
{
    var result = true;
//End _OnLoad
 
//Set Focus @64-6A79F89E
    if (document.forms["Messages"] && document.forms["Messages"].MessageBody) document.forms["Messages"].MessageBody.focus();
//End Set Focus
 
//Close _OnLoad @1-BC33A33A
    return result;
}
//End Close _OnLoad
 
//DEL    
 
//bind_events @1-E41F38DD
function bind_events() {
    if (functionExists("header_bind_events")) header_bind_events();
    if (functionExists("customers_meaning_bind_events")) customers_meaning_bind_events();
    if (functionExists("footer_bind_events")) footer_bind_events();
    if (functionExists("customers_menu_bind_events")) customers_menu_bind_events();
    if (functionExists("associates_meaning_bind_events")) associates_meaning_bind_events();
    addEventHandler("MessagesDeliveryMethod", "click", MessagesDeliveryMethod_OnClick);
    addEventHandler("MessagesAssociateID", "change", MessagesAssociateID_OnChange);
    addEventHandler("Messages", "load", Messages_OnLoad);
    addEventHandler("", "load", _OnLoad);
}
//End bind_events
 
window.onload = bind_events; //Assign bind_events @1-19F7B649
 
//End CCS script
</script> 
</head> 
<body> 
<p><link rel="stylesheet" type="text/css" href="Styles/adx.css"> 
<link rel="stylesheet" type="text/css" href="Styles/OZ-TBC/Menu.css"> 
<link rel="stylesheet" type="text/css" href="Styles/OZ-TBC/Style.css"> 
<meta name="GENERATOR" content="CodeCharge Studio 4.1.00.025"> 
<script language="JavaScript" type="text/javascript"> 
//Begin CCS script
//Include Common JSFunctions @1-A2F3288E
</script> 
<script language="JavaScript" type="text/javascript" charset="utf-8" src="ClientI18N.php?file=Functions.js&amp;locale=en"></script> 
<script language="JavaScript" type="text/javascript"> 
//End Include Common JSFunctions
 
//bind_events @1-D0A3C4EC
function header_bind_events() {
    if (functionExists("SysFilter_bind_events")) SysFilter_bind_events();
}
//End bind_events
 
//End CCS script
</script> 
<div align="center"> 
  <table style="WIDTH: 700px" border="0" cellspacing="1" cellpadding="1"> 
    <tr> 
      <td>&nbsp;&nbsp;</td> 
      <td><img id="headerImage1" alt=" " src="./Images/syslogo.png" height="112"></td> 
      <td> 
        <p align="center"><a href="associates_list.php"><img style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="Images/employees.png"></a><br> 
<a href="associates_list.php" id="headerLink8">Associates</a></p> 
 </td> 
      <td> 
        <p align="center"><a href="customers_list.php"><img style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="Images/customers.png"></a><br> 
<a href="customers_list.php" id="headerLinkCustomer">Customers</a></p> 
 </td> 
      <td> 
        <p align="center"><a href="contracts_list.php"><img style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="Images/contract.png"></a><br> 
<a href="contracts_list.php" id="headerLinkCustomer1">Contracts</a></p> 
 </td> 
      <td> 
        <p align="center"> 
        <br> 
        </p> 
 </td> 
      <td valign="middle" align="center">&nbsp; 
        <br> 
        </td> 
      <td valign="middle" align="center">&nbsp;<a href="people_list.php"><img style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="Images/users3.png"></a><br> 
<a href="people_list.php" id="headerLink3">Leads</a></td> 
      <td rowspan="3">&nbsp;</td> 
    </tr> 
 
    <tr> 
      <td></td> 
      <td colspan="7"> 
        <table style="WIDTH: 100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
            <td colspan="2"> 
              <hr></td> 
          </tr> 
 
          <tr> 
            <td>&nbsp;<a href="mainMenu.php" style="FONT-SIZE: 16px; FONT-WEIGHT: bold" id="headerLink9">Main Menu</a>&nbsp;<a href="login.php?AssociateID=1001&amp;CustomerID=361&amp;MobilePhone=0123456789&amp;Logout=1" style="FONT-SIZE: 16px; FONT-WEIGHT: bold" id="headerLink4">Log Out</a></td> 
            <td valign="middle" align="right"> 
              <p align="right" nowrap><meta name="GENERATOR" content="CodeCharge Studio 4.1.00.025"> 
<link rel="stylesheet" type="text/css" href="Styles/OZ-TBC/Style.css"> 
<script language="JavaScript" type="text/javascript"> 
//Begin CCS script
//Include Common JSFunctions @1-A2F3288E
</script> 
<script language="JavaScript" type="text/javascript" charset="utf-8" src="ClientI18N.php?file=Functions.js&amp;locale=en"></script> 
<script language="JavaScript" type="text/javascript"> 
//End Include Common JSFunctions
 
//SysFilterBranchListBranchFilterID_OnChange @11-031462FB
function SysFilterBranchListBranchFilterID_OnChange()
{
    var result = true;
//End SysFilterBranchListBranchFilterID_OnChange
 
//Submit Form @15-21CD135C
    document.forms["BranchList"].submit();
//End Submit Form
 
//Close SysFilterBranchListBranchFilterID_OnChange @11-BC33A33A
    return result;
}
//End Close SysFilterBranchListBranchFilterID_OnChange
 
//SysFilterBranchListBranchFilterID_OnLoad @11-AC38DC87
function SysFilterBranchListBranchFilterID_OnLoad()
{
    var result = true;
//End SysFilterBranchListBranchFilterID_OnLoad
 
//Custom Code @16-2A29BDB7
        document.BranchList.BranchFilterID.disabled= !branchFilterEnabled;
//End Custom Code
 
//Close SysFilterBranchListBranchFilterID_OnLoad @11-BC33A33A
    return result;
}
//End Close SysFilterBranchListBranchFilterID_OnLoad
 
//bind_events @1-6F8693CF
function SysFilter_bind_events() {
    addEventHandler("SysFilterBranchListBranchFilterID", "change", SysFilterBranchListBranchFilterID_OnChange);
    addEventHandler("SysFilterBranchListBranchFilterID", "load", SysFilterBranchListBranchFilterID_OnLoad);
}
//End bind_events
 
//End CCS script
</script> 
 
<div align="left"> 
  <form id="SysFilterBranchList" method="post" name="BranchList" action="message_maint.php?AssociateID=1001&amp;CustomerID=361&amp;MobilePhone=0123456789&amp;ccsForm=BranchList"> 
    <p align="right"><font size="2"> 
Select&nbsp;Centre</font> 
    
    <select id="SysFilterBranchListBranchFilterID" name="BranchFilterID"> 
      <option selected value="0">{All Centres}</option> 
      <OPTION VALUE="1" SELECTED>Bryanston Business Centre (Pty) Ltd</OPTION> 
<OPTION VALUE="2">Fourways Business Centre (Pty) Ltd</OPTION> 
<OPTION VALUE="3">Rivonia Business Centre (Pty) Ltd</OPTION> 
 
    </select> 
 </p> 
 
  </form> 
</div> 
</p> 
 </td> 
          </tr> 
 
          <tr> 
            <td colspan="2"> 
              <hr></td> 
          </tr> 
 
        </table> 
 </td> 
    </tr> 
 
    <tr> 
      <td></td> 
      <td colspan="7"> 
        <!--no more--><meta name="GENERATOR" content="CodeCharge Studio 4.1.00.025"> 
<link rel="stylesheet" type="text/css" href="Styles/OZ-TBC/Style.css"> 
<div align="left"> 
  
  <div align="left"> 
    <form id="Customers" method="post" name="Customers" action="message_maint.php?AssociateID=1001&amp;CustomerID=361&amp;MobilePhone=0123456789&amp;ccsForm=Customers%3AEdit"> 
      <table border="0" cellspacing="0" cellpadding="0" width="400"> 
        <tr> 
          <td style="WIDTH: 150px" valign="top"> 
            <table style="WIDTH: 400px" class="Header" border="0" cellspacing="0" cellpadding="0"> 
              <tr> 
                <td class="HeaderLeft"><img border="0" src="Styles/OZ-TBC/Images/Spacer.gif"></td> 
                <th>Customer&nbsp;Details</th> 
 
                <td class="HeaderRight"><img border="0" src="Styles/OZ-TBC/Images/Spacer.gif"></td> 
              </tr> 
 
            </table> 
 
            <table style="WIDTH: 400px" class="Record" cellspacing="0" cellpadding="0"> 
              
              <tr class="Controls"> 
                <th> 
                <p align="left">ID</p> 
 </th> 
 
                <td style="WIDTH: 300px">00361</td> 
              </tr> 
 
              <tr class="Controls"> 
                <th>Reference</th> 
 
                <td>SYNERGYBUS</td> 
              </tr> 
 
              <tr class="Controls"> 
                <th>Name</th> 
 
                <td>Synergy Business Intellegence (Pty) Ltd</td> 
              </tr> 
 
            </table> 
 </td> 
        </tr> 
 
      </table> 
 
    </form> 
 
  </div> 
 
</div> 
<meta name="GENERATOR" content="CodeCharge Studio 4.1.00.025"> 
<table style="WIDTH: 400px" border="0" cellpadding="10" align="left"> 
  <tr> 
    <td align="center"><a href="customers_maint_details.php?CustomerID=361"><img style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="Images/edit.png"></a><br> 
<a href="customers_maint_details.php?CustomerID=361" id="customers_menuLink1">Details</a></td> 
    <td align="center"><a href="customers_list_associates.php?CustomerID=361"><img style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="Images/employees.png"></a><br> 
<a href="customers_list_associates.php?CustomerID=361" id="customers_menuLink2">Associates</a></td> 
    <td align="center"><a href="customers_list_transactions.php?CustomerID=361"><img style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="Images/creditcards.png"></a><br> 
<a href="customers_list_transactions.php?CustomerID=361" id="customers_menuLink3">Accounts</a>&nbsp;</td> 
    <td align="center"><a href="customers_list_contracts.php?AssociateID=1001&amp;CustomerID=361&amp;MobilePhone=0123456789"><img style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="Images/contract.png"></a><br> 
<a href="customers_list_contracts.php?AssociateID=1001&amp;MobilePhone=0123456789&amp;ObjectClass=Customers&amp;ObjectID=361&amp;CustomerID=361" id="customers_menuLink5">Contracts</a>&nbsp;</td> 
    <td align="center"><a href="customers_list_attachments.php?ObjectClass=Customers&amp;ObjectID=361&amp;CustomerID=361"><img style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="Images/cabinet.png"></a><a href="customers_list_attachments.php?ObjectClass=Customers&amp;ObjectID=361&amp;CustomerID=361" id="customers_menuLink4">Document Filing</a>&nbsp;</td> 
  </tr> 
</table> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<link rel="stylesheet" type="text/css" href="Styles/OZ-TBC/Style.css"> 
<meta name="GENERATOR" content="CodeCharge Studio 4.1.00.025"> 
 
<form id="associates_meaningAssociates_Meaning" method="post" name="Associates_Meaning" action="message_maint.php?AssociateID=1001&amp;CustomerID=361&amp;MobilePhone=0123456789&amp;ccsForm=Associates_Meaning%3AEdit"> 
  <table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
      <td valign="top"> 
        <table class="Header" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
            <td class="HeaderLeft"><img border="0" src="Styles/OZ-TBC/Images/Spacer.gif"></td> 
            <th>Associate Details</th> 
 
            <td class="HeaderRight"><img border="0" src="Styles/OZ-TBC/Images/Spacer.gif"></td> 
          </tr> 
 
        </table> 
 
        <table style="WIDTH: 400px" class="Record" cellspacing="0" cellpadding="0"> 
          
          <tr class="Controls"> 
            <th>ID</th> 
 
            <td style="WIDTH: 300px">&nbsp;01001</td> 
          </tr> 
 
          <tr class="Controls"> 
            <th>First Name</th> 
 
            <td>&nbsp;Allan</td> 
          </tr> 
 
          <tr class="Controls"> 
            <th>Last Name</th> 
 
            <td>&nbsp;Gibbon</td> 
          </tr> 
 
        </table> 
 </td> 
    </tr> 
 
  </table> 
 &nbsp; 
</form> 
</p> 
<p> 
 
<form id="Messages" method="post" name="Messages" action="message_maint.php?AssociateID=1001&amp;CustomerID=361&amp;MobilePhone=0123456789&amp;ccsForm=Messages"> 
  <table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
      <td style="WIDTH: 200px" valign="top"> 
        <table class="Header" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
            <td class="HeaderLeft"><img border="0" src="Styles/OZ-TBC/Images/Spacer.gif"></td> 
            <th>Send Messages</th> 
 
            <td class="HeaderRight"><img border="0" src="Styles/OZ-TBC/Images/Spacer.gif"></td> 
          </tr> 
        </table> 
 
        <table style="WIDTH: 700px" class="Record" cellspacing="0" cellpadding="0"> 
          
          <tr class="Controls"> 
            <th>Associate</th> 
 
            <td> 
              <select style="WIDTH: 247px" id="MessagesAssociateID" name="AssociateID"> 
                <option selected value="">Select Value</option> 
                <OPTION VALUE="144"> </OPTION> 
<OPTION VALUE="725">725 </OPTION> 
<OPTION VALUE="624">624 </OPTION> 
<OPTION VALUE="28"> Intelegence Fax</OPTION> 
              </select> 
 </td> 
          </tr> 
 
          <tr class="Controls"> 
            <th>Message</th> 
 
            <td> 
        <div id="sms"> 
              <p><span id = "header"><textarea style="WIDTH: 489px; HEIGHT: 36px" id="MessagesMessageHeader" cols="44" name="MessageHeader">Dear Allan,</textarea></span><br> 
              <textarea style="WIDTH: 489px; HEIGHT: 54px" onkeydown="limitText(this.form.limitedtextarea, 160);" id="Messageslimitedtextarea" rows="3" cols="57" name="limitedtextarea"></textarea>&nbsp;<br> 
        <span style="font-weight:bold" id="countdown">160</span> / 160 characters<br>Message <span id="messagecount">1</span></p> 
        </div> 
        <span id = "footer"><textarea style="WIDTH: 489px; HEIGHT: 44px" id="MessagesMessageFooter" rows="1" cols="43" name="MessageFooter"></textarea></span></p> 
            </td> 
          </tr> 
 
          <tr class="Controls"> 
            <th>Delivery Method</th> 
 
            <td class="HabitazPageBODY"> 
              <input id="MessagesDeliveryMethod_1" value="Email" type="radio" name="DeliveryMethod" >Email<input id="MessagesDeliveryMethod_2" value="SMS" type="radio" name="DeliveryMethod" CHECKED>SMS</td> 
          </tr> 
 
          <tr class="Controls"> 
            <th>Address</th> 
 
            <td><input id="MessagesAddress" value="0123456789" maxlength="64" size="50" name="Address"><input id="MessagesCustomerID" value="361" type="hidden" name="CustomerID"></td> 
          </tr> 
 
          <tr style="HEIGHT: 40px" class="Bottom"> 
            <td colspan="2" align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input id="MessagesUserID1" value="29" type="hidden" name="UserID1"> 
              <input id="MessagesButton_Submit" value="Submit" src="./Styles/OZ-TBC/Images/en/ButtonUpdate.gif" type="image" name="Button_Submit"></td> 
          </tr> 
        </table> 
      </td> 
    </tr> 
  </table> 
</form> 
</p> 
<p> 
 
<table border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td valign="top"> 
      <table class="Header" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
          <td class="HeaderLeft"><img border="0" src="Styles/OZ-TBC/Images/Spacer.gif"></td> 
          <th>List of Messages </th> 
 
          <td class="HeaderRight"><img border="0" src="Styles/OZ-TBC/Images/Spacer.gif"></td> 
        </tr> 
      </table> 
 
      <table style="WIDTH: 700px" class="Grid" cellspacing="0" cellpadding="0"> 
        <tr class="Caption"> 
          <th> 
          <a href="message_maint.php?AssociateID=1001&amp;CustomerID=361&amp;MobilePhone=0123456789&amp;Messages1Order=Sorter_DeliveryMethod&amp;Messages1Dir=ASC" id="Messages1Sorter_DeliveryMethod">Delivery Method</a> 
          
          </th> 
 
          <th> 
          <a href="message_maint.php?AssociateID=1001&amp;CustomerID=361&amp;MobilePhone=0123456789&amp;Messages1Order=Sorter_Address&amp;Messages1Dir=ASC" id="Messages1Sorter_Address">Address</a> 
          
          </th> 
 
          <th>Body</th> 
 
          <th> 
          <a href="message_maint.php?AssociateID=1001&amp;CustomerID=361&amp;MobilePhone=0123456789&amp;Messages1Order=Sorter_upd&amp;Messages1Dir=ASC" id="Messages1Sorter_upd">Upd</a> 
          
          </th> 
        </tr> 
 
        
        
        <tr class="NoRecords"> 
          <td colspan="4">No records</td> 
        </tr> 
        
        <tr class="Footer"> 
          <td colspan="4"> 
            &nbsp;</td> 
        </tr> 
      </table> 
    </td> 
  </tr> 
</table> 
<meta content="CodeCharge Studio 4.1.00.025" name="GENERATOR"> 
</td> 
    </tr> 
 
    <tr> 
    <td></td> 
      <td colspan="7"><hr></td> 
    </tr> 
 
  </table> 
</div> 
</p> 
</body> 
</html><div align="center"><small>Logged in as [<strong>nerisha.bhajun-visser</strong>]. Server date and time is Monday, October 18, 2010 03:47:33 PM</small></div><br><div align="center"><img style="WIDTH: 120px; HEIGHT: 48px" id="Image2" name="Image2" alt="" src="Images/orglogo.gif" width="120" height="74"></div>

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
I'll have a look soonest
IT Expert
Top Expert 2009
Commented:
Can you firstly not register the scripts as _onclick

but like the attached?

function checkDelivery(thisForm) {
  var email = thisForm.DeliveryMethod[0].checked;
  thisForm.Address.value = (email)?DocEmail:DocSMS;
  document.getElementById("header").style.display=(email)?'':'none';
  document.getElementById("footer").style.display=(email)?'':'none';
  document.getElementById("smsDiv").style.display=(email)?'none':''; // NOTICE I CHANGED TO smsDiv, please change the ID on the sms div too - no need to hide the message count, it is inside the smsDiv
}

window.onload=function() {
  var thisForm = document.forms["Messages"];
  if (thisForm) {
    if (thisForm.MessageBody) thisForm.MessageBody.focus();
    if (thisForm.DeliveryMethod) {
      thisForm.DeliveryMethod[0].onclick=thisForm.DeliveryMethod[1].onclick=function() {
        checkDelivery(this.form);
      }
    }
    checkDelivery(thisForm);  
  }
}

Open in new window

Author

Commented:
Thanks, your ideas worked perfectly
Michel PlungjanIT Expert
Top Expert 2009

Commented:
YW, glad to help

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial