Contact Form Control Problems with jQuery

b_clodius · May 23rd, 2010, 03:05 AM

Hello to whoever can answer this.

Somewhere in ch 11 when i started adding the jQuery code nothing from the submit button will work.

Ive tried Response.Write("HELLO"); and everything but for some reason the code is never executed for button submit.

Once the send button is clicked the table slides up like its supposed to and the please wait icon i created loads but the Message sent label and the message paragraph will not become visible even though the code explicitly tells them to become visible.

I have ensured that the button is connected to the method with OnClick="methodname" and everything.

If anyone can give me some clues or point me in the right direction it would be greatly appreciated.

Thanks

Imar · May 23rd, 2010, 05:04 AM

Hi there,

Can you post the relevant code for the page and its code behind? Without it, it' hard to see what's going on.

Imar

b_clodius · May 23rd, 2010, 10:08 AM

Yes thank you here is the code and i should also mention that it is to the point where i have finished up to page 395.

Contact Form Control:

Code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ContactForm.ascx.cs" Inherits="Controls_ContactForm" %>
<% if (false)
   { %>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<% } %>
<style type="text/css">
    .style1
    {
        width: 100%;
    }
    .Watermark
    {
        font-style: italic;
        color: Gray;
    }
</style>
<script type="text/javascript">
    function ValidatePhoneNumbers(source, args) {
        var phoneHome = document.getElementById('<%= PhoneHome.ClientID %>');
        var phoneBusiness = document.getElementById('<%= PhoneBusiness.ClientID %>');

        if (phoneHome.value != '' || phoneBusiness.value != '') {
            args.IsValid = true;
        }
        else {
            args.IsValid = false;
        }
    }
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="TableWrapper">
            <table class="style1" runat="server" id="FormTable" clientidmode="Static">
                <tr>
                    <td colspan="3">
                        Use this form to get in contact with the web site administrator.
                    </td>
                </tr>
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        <asp:TextBox ID="Name" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="Name"
                            CssClass="ErrorMessage" ErrorMessage="Enter a name" SetFocusOnError="True">*</asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        E-mail address
                    </td>
                    <td>
                        <asp:TextBox ID="EmailAddress" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="EmailAddress"
                            CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Enter an e-mail address">*</asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="EmailAddress"
                            CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Enter a valid e-mail address"
                            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        E-mail address again
                    </td>
                    <td>
                        <asp:TextBox ID="ConfirmEmailAddress" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ConfirmEmailAddress"
                            CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Confirm the e-mail address">*</asp:RequiredFieldValidator>
                        <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="ConfirmEmailAddress"
                            ControlToValidate="EmailAddress" CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Retype the e-mail address">*</asp:CompareValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        Home phone number
                    </td>
                    <td>
                        <asp:TextBox ID="PhoneHome" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        <asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="ValidatePhoneNumbers"
                            CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Enter your home or business phone number"
                            OnServerValidate="CustomValidator1_ServerValidate">*</asp:CustomValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        Business phone number
                    </td>
                    <td>
                        <asp:TextBox ID="PhoneBusiness" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        Comments
                    </td>
                    <td>
                        <asp:TextBox ID="Comments" runat="server" Height="84px" TextMode="MultiLine" Width="260px"></asp:TextBox>
                    </td>
                    <td>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="Comments"
                            CssClass="ErrorMessage" Display="Dynamic" ErrorMessage="Enter a coment">*</asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <asp:Button ID="SendButton" runat="server" Text="Send" OnClick="SendEmail" OnClientClick="SendEmail" />
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="ErrorMessage"
                            HeaderText="Please correct the following errors before you press the Send button:" />
                    </td>
                </tr>
            </table>
        </div>
        <asp:Label ID="Message" runat="server" CssClass="Attention" Text="Message Sent" Visible="False" />
        <p runat="server" id="MessageSentPara" visible="False">
            Thank you for your message. We'll get in touch with you if necessary.
        </p>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <div class="PleaseWait">
            Please Wait...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<script type="text/javascript">
    $(function () {
        $(':input[type=text], textarea').each
        (
            function () {
                var newText = 'Please enter your ' + $(this).parent().prev().text().toLowerCase().trim();
                $(this).attr('value', newText);
            }).one('focus', function () {
                this.value = '', this.className = ''
            }).addClass('Watermark').css('width', '300px');

        $('form').bind('submit', function () {
            if (Page_IsValid) {
                $('#TableWrapper').slideUp(3000);
            }
        });
    });

    function pageLoad() {
        $('.Attention').animate({ width: '600px' }, 3000).animate({ width: '100px' }, 3000).fadeOut('slow');
    }
</script>

Code Behind:

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Net.Mail;

public partial class Controls_ContactForm : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
    {
        if(!string.IsNullOrEmpty(PhoneHome.Text) || !string.IsNullOrEmpty(PhoneBusiness.Text))
        {
            args.IsValid = true;
        }

        else
        {
            args.IsValid = false;
        }
    }
    protected void SendEmail(object sender, EventArgs e)
    {
        if (Page.IsValid)
        {
            string filename = Server.MapPath("~/App_Data/ContactForm.txt");
            string mailBody = File.ReadAllText(filename);

            mailBody = mailBody.Replace("##Name##", Name.Text);
            mailBody = mailBody.Replace("##Email##", EmailAddress.Text);
            mailBody = mailBody.Replace("##HomePhone##", PhoneHome.Text);
            mailBody = mailBody.Replace("##BusinessPhone##", PhoneBusiness.Text);
            mailBody = mailBody.Replace("##Comments##", Comments.Text);

            MailMessage myMessage = new MailMessage();
            myMessage.Subject = "Response from web site";
            myMessage.Body = mailBody;

            myMessage.From = new MailAddress("mrbrndn15@aol.com", "ASP PLANET WROX");
            myMessage.To.Add(new MailAddress("b_clodius@yahoo.com", "Brandon Clodius"));

            SmtpClient myClient = new SmtpClient();
            myClient.Send(myMessage);

            Message.Visible = true;
            MessageSentPara.Visible = true;
            FormTable.Visible = false;
            System.Threading.Thread.Sleep(5000);
            
        }
    }
}

Imar · May 23rd, 2010, 11:03 AM

Hi there,

Take a look at this:

<asp:Button ID="SendButton" runat="server" Text="Send" OnClick="SendEmail"
OnClientClick="SendEmail" />

You also hooked up the OnClientClick to a method. However, this method does not exist as a client side JavaScript function and thus "onclick" in the browser causes an error and the page is never submitted. Remove the unnecessary handler and it should work:

<asp:Button ID="SendButton" runat="server" Text="Send" OnClick="SendEmail" />

Hope this helps,

Imar

b_clodius · May 23rd, 2010, 11:20 AM

thanks but i actually added that on purpose to see if it would change anything, it still will not work even when deleting that (i had tried before i added it as well).

do you happen to see any other problems lingering?

thanks again for all the help Imar.

Imar · May 23rd, 2010, 11:35 AM

I copied and pasted your code in my Planet Wrox project, removed the client handler and then it just worked. So maybe there's a problem with the surrounding page or with the mail sending code? Is your SMTP server set up correctly?

Try temporarily removing the UpdatePanel from the page as it will give you a better error message (if any).

If all else fails, click on the first line of the SendEmail method, press F9 to set a break point and then F5 to start the site. Fill in the contact form and hit the send button. Does your breakpoint get hit? Check out chapter 18 for more debugging tips.

Cheers,

Imar

b_clodius · May 23rd, 2010, 11:42 AM

Thanks again so much Imar, it's weird because a week ago before adding all the extra stuff the emailing was working fine but from what i can tell it does not hit the code at all, i will play around with the suggestions you just gave and see what happens.

On a side note i really love your book!

Imar · May 23rd, 2010, 12:28 PM

Good luck; let me know if you need more help.

Good to hear you like the book so much...

Cheers,

Imar

b_clodius · May 23rd, 2010, 12:34 PM

I tried the things you said and it looks like i'm getting some kind of connection error, later today i will mess around with my SMTP settings although they were working fine 1-2 weeks ago.

brandon

Imar · May 23rd, 2010, 12:36 PM

If it's just about testing and developing locally, you could configure the <system.net> element to drop mail in a local folder as explained in the book. That way you can continue without being held up with SMTP exceptions...

Cheers,

Imar