DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 3 of 3

Thread: Using a Javascript confirmation popup correctly

  1. #1
    Join Date
    Jan 2005
    Posts
    6

    Using a Javascript confirmation popup correctly

    Hello,

    I am trying to use Javascript within an ASP.NET web page to create an alert confirmation popup. A certain function run if a user clicks Yes or No to the alert popup. I have tried the following code so far.

    The HTML code is as follows:
    Code:
    <%@ Page Language="vb" AutoEventWireup="false" Codebehind="manage.aspx.vb" Inherits="Contractors.manage"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
    <html lang="en">
     <head>
      <title>Contractors and Consultants Induction Search Tool</title>
      <meta http-equiv="content-type" content="text/html;charset=utf-8">
      <meta http-equiv="Content-Style-Type" content="text/css">
      <link rel="stylesheet" href="style.css" type="text/css">
      <script language="Javascript">
      function deleteperson() {
      var x = confirm('Are you sure you would like to delete this person?');
      if (x == true) {
      alert('You clicked yes');
      }
      else {
      alert('You clicked cancel, goodbye');
      }
      }
      </script>
     </head>
     <body>
      <form id="form1" method="post" runat="server">
       <table id="table1" cellspacing="0" cellpadding="0" border="0">
        <tbody>
         <tr>
          <td width="20" background="images/topleft_corner.gif" height="20"></td>
          <td background="images/top_border.gif" height="20"></td>
          <td width="20" background="images/topright_corner.gif" height="20"></td>
         </tr>
         <tr>
          <td width="20" background="images/left_border.gif"></td>
          <td valign="top" bgcolor="#f5f5f5"><span class="title">
           Contractors and Consultants Database Search</span><br />
           <br />
           <asp:linkbutton id="lnkAdd" runat="server" text="Add"></asp:linkbutton> -
           <asp:linkbutton id="lnkEdit" runat="server" text="Edit"></asp:linkbutton> -
           <asp:linkbutton id="lnkDelete" runat="server" text="Delete"></asp:linkbutton> -
           <asp:linkbutton id="lnkLogout" runat="server" text="Logout"></asp:linkbutton><br />
           <br />
    
           <!-- Add Panel -->
           <asp:panel id="pnlAdd" runat="server" visible="false">
            <table id="table2" cellpadding="10" width="600" align="center">
             <tr>
              <td colspan="2" valign="top">
               <p>To add a new person, please fill in the form below.
               </p>
              </td>
             </tr>
             <tr>
              <td class="info" valign="top">
               <table id="Table3" cellpadding="10">
                <tr>
                 <td class="heading2">First Name:</td>
                 <td>
                  <asp:textbox id="txtAddFirstName" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td class="heading2">Surname:</td>
                 <td>
                  <asp:textbox id="txtAddSurname" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td class="heading2">Address:</td>
                 <td>
                  <asp:textbox id="txtAddAddress" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td class="heading2">Contact Number:</td>
                 <td>
                  <asp:textbox id="txtAddContactNumber" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td class="heading2">Vendor Number:</td>
                 <td>
                  <asp:textbox id="txtAddVendorNumber" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td class="heading2">Date Issued:</td>
                 <td>
                  <asp:textbox id="txtAddDateIssued" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td colspan="2">
                  <asp:Button id="cmdAdd" runat="server" Text="Add"></asp:Button></td>
                </tr>
               </table>
              </td>
             </tr>
            </table>
           </asp:panel>
    
           <!-- Edit Panel -->
           <asp:panel id="pnlEdit" runat="server" visible="false">
            <table id="table4" cellpadding="10" width="600" align="center">
             <tr>
              <td colspan="2" valign="top">
               <p>To edit a person's details, please select them from the listbox.
               </p>
              </td>
             </tr>
             <tr>
              <td class="info" valign="top">
               <asp:listbox id="lstEdit" runat="server" Rows="12"></asp:listbox>&nbsp;
               <p>
                <asp:button id="cmdSelectPerson" runat="server" Text="Edit"></asp:button></p>
              </td>
              <td class="info" valign="top">
               <table id="table5" cellpadding="10">
                <tr>
                 <td class="heading2">First Name:</td>
                 <td>
                  <asp:textbox id="txtEditFirstName" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td class="heading2">Surname:</td>
                 <td>
                  <asp:textbox id="txtEditSurname" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td class="heading2">Address:</td>
                 <td>
                  <asp:textbox id="txtEditAddress" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td class="heading2">Contact Number:</td>
                 <td>
                  <asp:textbox id="txtEditContactNumber" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td class="heading2">Vendor Number:</td>
                 <td>
                  <asp:textbox id="txtEditVendorNumber" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td class="heading2">Date Issued:</td>
                 <td>
                  <asp:textbox id="txtEditDateIssued" runat="server"></asp:textbox></td>
                </tr>
                <tr>
                 <td colSpan="2">
                  <asp:button id="cmdEdit" runat="server" Text="Save"></asp:button></td>
                </tr>
               </table>
              </td>
             </tr>
            </table>
           </asp:panel>
    
           <!-- Delete Panel -->
           <asp:panel id="pnlDelete" runat="server" visible="false">
            <table id="table6" cellpadding="10" width="600" align="center">
             <tr>
              <td class="info" valign="top">
               <p>To delete a person, please select them from the listbox.
               </p>
               <asp:listbox id="lstDelete" runat="server" Rows="12"></asp:listbox>
               <p>
                <!--<asp:Button id="cmdDelete" runat="server" Text="Delete"></asp:Button>-->
                <input type="button" id="cmdDelete2" value="Delete" OnClick="deleteperson()" /></p>
              </td>
             </tr>
            </table>
           </asp:panel><br />
    
           <div style="text-align: right"><a href="index.aspx">Index</a></div>
          </td>
          <td width="20" background="images/right_border.gif"></td>
         </tr>
         <tr>
          <td width="20" background="images/bottomleft_corner.gif" height="20"></td>
          <td background="images/bottom_border.gif" height="20"></td>
          <td width="20" background="images/bottomright_corner.gif" height="20"></td>
         </tr>
        </tbody>
       </table>
      </form>
     </body>
    </html>
    I haven't included the behind code because it wouldn't fit. The behind code just holds functions for executing the .NET Web Forms that are in the HTML page, if possible, it would be good if after the user clicks the Yes button from the confirmation alert the function, "cmdDelete" from the behind code is executed. I'm trying to create the popup with the user clicks the Delete button in the 'Delete' Panel shown in the HTML page. If anyone knows how I can go about doing this it would be really helpful and much appreciated, thank you.

    Regards,
    Alex Clifford

  2. #2
    Join Date
    Nov 2003
    Location
    Portland, OR
    Posts
    8,387
    See if this helps: http://builder.com.com/5100-6371-5031730.html
    There's plenty more where that came from if you search Google for "asp.net confirmation dialog" and/or "asp.net message box".
    Phil Weber
    http://www.philweber.com

    Please post questions to the forums, where others may benefit.
    I do not offer free assistance by e-mail. Thank you!

  3. #3
    Join Date
    Sep 2004
    Location
    Malaysia
    Posts
    4

    return true/false

    Hi..

    Return a false or true in the onclick event..

    in the button:
    Code:
    <input type="button" id="cmdDelete2" value="Delete" OnClick="return deleteperson();" />
    in the script:
    Code:
    function deleteperson() {
        return confirm('Are you sure you would like to delete this person?');  
    }
    This will return true if the user clicked "OK", and false if the user click "Cancel".
    if true is returned in the onClick event then the page will proceed with the postback. Otherwise the page just stop like that and cancel the postback.
    Hope this helps...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center