Link to home
Create AccountLog in
Avatar of JS List
JS ListFlag for United States of America

asked on

Javascript & asp.net : transfer info from textbox to label

Hello experts,

I'm trying to transfer text from a textbox to a label with javascript.  There's 1 page that uses 2 ajax modal popup extenders.  Trying to transfer data from one to the other.  One is for entering meeting notes, the other is used to preview them.  

So basically I want elm1 text to go into  MeetingInfoRvw with Javascript.

Here's the aspx page:

<asp:LinkButton ID="AddNewLinkBtn" runat="server" class="textBold" CausesValidation="false" CommandName="AddNewLinkBtn_Click" >Add New</asp:LinkButton>

<script language="JavaScript" type="text/javascript">
 function transferData() {
      alert("here");
      document.getElementById('MeetingInfoRvw').innerHTML = "here's the text";
    }
</script>
<%--~~~~~~~~~~~~        Add New Meeting Info  Area  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--%>
<ajaxToolkit:ModalPopupExtender ID="mpe1" runat="server"
            BehaviorID="mpe1"
            TargetControlID="AddNewLinkBtn"
            PopupControlID="divPopUPAdd"
            BackgroundCssClass="modalBackgroundClass" DropShadow="false">
</ajaxToolkit:ModalPopupExtender>
<div id="divPopUPAdd" class="contents" style="width:900px;height:550px;border:solid1px#dddddd;
            top:50px; position:relative; left: 50px;" runat="server" align="center">
<div id="Layer2" style="position:absolute; left:685px; top:83px; width:97px; height:17px; z-index:5">
    <span class="text"><font color="#990000">*Required field </font></span></div>            
<table cellpadding="0" cellspacing="0" style="width: 843 px;" border="0">
<tr>
      <td>&nbsp;</td>
      <td class="textBold" style="width: 174px" align="left">Meeting Date<font color="#990000">*</font>:</td>
      <td class="style1" align="left"><asp:TextBox ID="MeetingDatetxt" runat="server" style="margin-bottom: 0px" Width="78px"></asp:TextBox>
        <ajaxToolkit:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="MeetingDatetxt" PopupButtonID="CalendarBtn" >
         </ajaxToolkit:CalendarExtender>
</td>
<td style="width: 524px;" align="left"><asp:ImageButton ID="CalendarBtn" runat="server"  ImageUrl="~/Tools/Images/Calendar2.gif" CausesValidation="false"/> <asp:RequiredFieldValidator ID="AddDateVld" runat="server" ErrorMessage="Please enter a date" ControlToValidate="MeetingDatetxt" Display="Dynamic" CssClass="textBold" SetFocusOnError="True"></asp:RequiredFieldValidator>
                    <asp:HiddenField ID="hdnID" runat="server" />
                </td>
      <td>&nbsp;</td>
</tr>
<tr>
      <td>&nbsp;</td>
      <td  class="textBold" align="left">Meeting Notes Text<font color="#990000">*</font>:</td>
      <td colspan="2" valign="top"> </td>
      <td>&nbsp;</td>
</tr>
<tr>
      <td> &nbsp;</td>
      <td colspan="3" align="left"><asp:RequiredFieldValidator ID="MeetingNotesvld" runat="server" ErrorMessage="Please enter Meeting Information"
                            ControlToValidate="elm1" Display="Dynamic"></asp:RequiredFieldValidator>
      
      <asp:TextBox ID="elm1" runat="server" TextMode="MultiLine" ClientIDMode="Static"  Width="766px" Height="200px" />
     </td>
      <td> &nbsp;</td>
</tr>
<tr>
      <td>&nbsp;</td>
      <td colspan="3" align="right">
      <asp:Button ID="PreviewNotesBtn" runat="server" Text="Preview Notes" CausesValidation="False" onClientClick="transferData();" />
      <asp:Button ID="btnHide" runat="server" Text="Cancel" OnClick="btnHide_Click" CausesValidation="False" />
      <asp:Button ID="SubmitAddBtn" runat="server" Text="Submit"  CausesValidation="True"  />
                <asp:Button ID="SubmitEditBtn" runat="server" Text="Submit" />
      </td>
      <td>&nbsp;</td>
</tr>
</table>
 </div>
 <%'~~~~~~~~~~~     END  Add New Meeting Info  Area  ~~~~~~~~~~~~~~~~~--%>
      
<%'~~~~~~~~~~~~~   REVIEW PANEL     ~~~~~~~~~~~~~~~~~~~~~~~~~~~ %>
     <ajaxToolkit:ModalPopupExtender ID="mpe2" runat="server"
            BehaviorID="mpe2"
            TargetControlID="PreviewNotesBtn"
            PopupControlID="reviewDiv"
            BackgroundCssClass="modalBackgroundClass"
            DropShadow="false"
            CancelControlID="BackBtn" >
       </ajaxToolkit:ModalPopupExtender>
<div id="reviewDiv" align="center" style="border: 1px double #000000; display:none;
width:750px; height: 600px; top: 780px; overflow-y:scroll; position: relative; word-wrap:
break-word; background-color: #FFFFFF;" runat="server">
<table cellpadding="0" cellspacing="0" style="width: 730px;" border="0" bgcolor="White" align="left">
<tr>
  <td></td>
      <td colspan="3" align="left"><asp:Label ID="MeetingInfoRvw" runat="server" Text=""></asp:Label>
 </td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="3" align="right"><asp:Button ID="BackBtn" runat="server" Text="Back" /></td>
<td> </td>
</tr>
</table>
    </div>  
     <%'~~~~~~~   END REVIEW PANEL     ~~~~~~~~~~~~~~~~~~ %>

Don't worry about the table tags - I cut a bunch out.  I have everything else working on the page but this.  

JS
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Avatar of JS List

ASKER

Getting the form id was the key.  Instead of MeetingInfoRvw.ClientID - I used the id on the page:
  document.getElementById('ctl00_contentplaceholder2_MeetingInfoRvw').innerHTML = document.getElementById('ctl00$contentplaceholder2$elm1').value;

Thanks for the idea.