asked on

HTML - hiding and showing text based on condition

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

HugoHiasl

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.

NerishaB

ASKER

Can you give me an example of how to do this?

Michel Plungjan

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

HugoHiasl

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';

NerishaB

ASKER

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 Plungjan

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

NerishaB

ASKER

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 Plungjan

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

NerishaB

ASKER

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 Plungjan

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

NerishaB

ASKER

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 Plungjan

I can only help you with the html and the javascript

You posted some template thing. I cannot run that myself

NerishaB

ASKER

This is the full html document that I have attached here.
message-maint.html

Michel Plungjan

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

NerishaB

ASKER

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 Plungjan

I'll have a look soonest

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

NerishaB

ASKER

Thanks, your ideas worked perfectly

Michel Plungjan

YW, glad to help