Set Label Value when click modalpopuextender targetcontrolID

Sheritlw
Sheritlw used Ask the Experts™
on
I have a modal popup with a button as the targetcontrol.
When the button is clicked I need to pass a textbox value to a label that is rendered as a span element.
I tried an onclientclick event on the button, but it didn't work.  I think because the onclientclick event is wired to the modalpopup.
I am just starting to learn javascript so I am not sure my javascript is right or where/how I should call the function to get the results I need.
How would I do this?
<span id="ctl00_ContentPlaceHolder1_TabContainer1_tabTotals_lblAmtDue">Label</span>

  function returntotal() {
      var tot = document.getElementById('ctl00_ContentPlaceHolder1_TabContainer1_tabTotals_txtTotal');
      var val = document.getElementById('ctl00_ContentPlaceHolder1_TabContainer1_tabTotals_lblAmtDue');
      val.value = tot.value
   }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
val.value = tot.value
probably should use something like
val.innerHTML=tot.value

Author

Commented:
Where would I call the javascript from?  I tried the modals button click event but it doesn't work.
Can I just return the value from the label?
Like labelName.text = Javascriptfunction??
Any ideas?
Commented:
You can either keep this clean as it is with the code in a function (or do everything the function does, in the onClick event)

But, correct me if I'm wrong but even is onClick, not onclientclick....

so your button should be something like:
<input type=button name="yourButton" onClick="returntotal();">

But you're talking about a modal popup? is the Label Amount Due and the Button (onClick) on the same page, or not?
Commented:
I couldn't figure out how to get around the button click that launches the modal popup so I decided to use code behind.
It was a lot easier, but I was really hoping to learn additional javascript.
I appreciate your help and will award you the points.

Thanks

For anyone that is looking to do the same thing, make sure you set the buttons in the panel to  CausesValidation="false" UseSubmitBehavior="false".  Also notice that I didn't set the ok or cancel buttons in the modalpopupextender and set the TargetControlID to the name of the panel.
This is what worked for me.

<asp:ModalPopupExtender ID="mpeCheckout" runat="server" BackgroundCssClass="modalBackground"
               PopupControlID="pnlCheckOut" TargetControlID="PnlCheckOut">
            </asp:ModalPopupExtender>
      <asp:Panel ID="PnlCheckOut" BackColor="WhiteSmoke" BorderStyle="Groove" runat="server" style="display:none"> 
               <table style="margin:.5em">
                  <tr>
                     <td align="right">
                        Amount Due:
                     </td>
                     <td>
                        <asp:Label ID="lblAmtDue" runat="server">
                        
                        </asp:Label>
                     </td>
                  </tr>
                 
                  <tr>
                     <td colspan="2">
                        &nbsp;
                     </td>
                  </tr>
                  <tr>
                     <td align="right">
                        Payment Type:
                     </td>
                     <td>
                        <asp:DropDownList ID="ddPaymentType" runat="server" AppendDataBoundItems="true" 
                           CssClass="controltextwidthsmall" DataSourceID="lnqPaymentTypes" 
                           DataTextField="PaymentType" DataValueField="PaymentTypeID">
                           <asp:ListItem Selected="True" Text="---Select Payment Type---" Value="-1">
                    </asp:ListItem>
                        </asp:DropDownList>
                        <asp:LinqDataSource ID="lnqPaymentTypes" runat="server" 
                           ContextTypeName="Service2020.SalonDataClassesDataContext" OrderBy="PaymentType" 
                           TableName="PaymentTypesLUs">
                        </asp:LinqDataSource>

                     </td>
                  </tr>
                  <tr>
                     <td align="right">
                        Amount Received:
                     </td>
                     <td>
                    <asp:TextBox ID="txtAmtRec"  CssClass="controltextwidthsmall"   
                       runat="server" AutoPostBack="true" OnTextChanged="CalcChange"></asp:TextBox>
                    <asp:CompareValidator ID="CompareValidator4" runat="server" 
                       ControlToValidate="txtAmtRec" 
                       ErrorMessage="Please enter currency value as 99.99" Operator="DataTypeCheck" 
                       Type="Currency"></asp:CompareValidator>
                     </td>
                  </tr>
                  <tr>
                     <td align="right">
                        Change Due:
                     </td>
                     <td>
                        <asp:TextBox ID="txtChangeDue" runat="server" CssClass="controltextwidthsmall"></asp:TextBox>
                        <asp:CompareValidator ID="CompareValidator1" runat="server" 
                           ControlToValidate="txtChangeDue" 
                           ErrorMessage="Please enter currency value as 99.99" Operator="DataTypeCheck" 
                           Type="Currency"></asp:CompareValidator>
                     </td>
                  </tr>
                  <tr>
                     <td colspan="2" align="center">
                        <asp:CheckBox ID="chkCompleted" Checked="true" Text="  Service has been completed" runat="server" />
                     </td>
                  </tr>

                  <tr>
                     <td align="right">
                        <asp:Button ID="buttCancelCheckout" OnClick="buttCancelCheckout_Click" CausesValidation="false" UseSubmitBehavior="false" runat="server" CssClass="button" 
                           Text="Cancel" />
                     </td>
                     <td align="center">
                        <asp:Button ID="buttSaveService" OnClick="buttSaveService_Click" CausesValidation="false" UseSubmitBehavior="false" runat="server" CssClass="button" 
                           Text="Save/Update" />
                     </td>
                  </tr>
               </table>
            </asp:Panel>

  Protected Sub buttCheckOut_Click(ByVal sender As Object, ByVal e As System.EventArgs)
      Me.lblAmtDue.Text = FormatCurrency(Me.txtTotal.Text)
      Me.mpeCheckout.Show()

   End Sub

   Protected Sub buttCancelCheckout_Click(ByVal sender As Object, ByVal e As System.EventArgs)
      Me.mpeCheckout.Hide()
    
   End Sub

  Protected Sub buttSaveService_Click(ByVal sender As Object, ByVal e As System.EventArgs)
      SaveService()
      mpeCheckout.Hide()
    
   End Sub

Open in new window

Author

Commented:
Figured out an alternative solution and posted it.

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