Imar, I want to add one extra thing to the contact form. Can you help?

IceThatJaw · January 14th, 2012, 08:12 PM

I added a simple checkbox next to the business phone textbox on the contact form that says, "I'll omit my phone number".

I want it to simply dim out the phone number textboxes and disable the validation for it when checked.

I tried:

Code:

$('#CheckBoxOmit).is(':checked');

by putting it in the ValidatePhoneNumbers function in an if statement and calling alert but it doesn't fire when I click the submit button.

Can you help? I am coming from a C++ background(mainly from school) and these scripting and event driven languages are brutalizing me. lol

If you can show me how to get this thing to fire this I can implement it in other, more creative ways.

Imar · January 15th, 2012, 04:24 AM

Hi there,

Can you post the full code for the form, including the validation code.

Cheers,

Imar

IceThatJaw · January 15th, 2012, 10:15 AM

Sure thing.

I finally got the checkbox to fire an alert but the server event oncheckchanged isn't firing for some reason.

Is there a way to make sure that the jQuery finds the control everytime the checkbox is selected like OncheckChanged for the server? I want to change the backcolor to silver and set the textbox to readonly on client side and server side.

Here's my checkbox:

HTML Code:

   <asp:CheckBox ID="ChckBoxOmitPhone" runat="server" 
            Text=" I'll omit my phone number" 
            oncheckedchanged="ChckBoxOmitPhone_CheckedChanged" ClientIDMode="Static" />

Code:

<script type="text/javascript">

  function ValidatePhoneNumbers(source, args) {
    
    // if checked dim textboxes else validate them
    if ($('#ChckBoxOmitPhone').is(':checked')) {

      // dim the textboxes

     // alert('checkbox is checked'); // finally fires but is this the best way?
    }
    else {
      var homePhone = document.getElementById('<%= HomePhone.ClientID %>');
      var businessPhone = document.getElementById('<%= BusinessPhone.ClientID %>');

      if (homePhone.value != '' || businessPhone.value != '') {
        args.IsValid = true;
      }
      else {
        args.IsValid = false;
      }
    }
  }
</script>

Will this work? If it does, how would I call it everytime the checkbox is selected?

Code:

    $("#ChckBoxOmitPhone").toggle(
    function () {
      $('#HomePhone #BusinessPhone').attr("disabled", true).addClass('DimmedOut');
    },
    function () {
      $('#HomePhone #BusinessPhone').removeAttr("disabled").removeClass('DimmedOut'); ; 
    });

HTML Code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
    <table id="FormTable" runat="server" class="style1">
      <tr>
        <td colspan="3">
          You can use the form below to contact me. Feel free to leave a comment or 
          critque about my site in the comments section. 
          : )</td>
      </tr>
      <tr>
        <td colspan="3">
          &nbsp;</td>
      </tr>
      <tr>
        <td class="style2">
          Name</td>
        <td class="style2">
          <asp:TextBox ID="Name" runat="server"></asp:TextBox>
        </td>
        <td class="style2">
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            ErrorMessage="- Enter your name" ControlToValidate="Name" 
            CssClass="ErrorMessage">*</asp:RequiredFieldValidator>
        </td>
      </tr>
      <tr>
        <td class="style5">
          E-mail address</td>
        <td class="style5">
          <asp:TextBox ID="Email" runat="server"></asp:TextBox>
        </td>
        <td class="style5">
          <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
            ControlToValidate="Email" CssClass="ErrorMessage" 
            ErrorMessage="- Enter your email">*</asp:RequiredFieldValidator>
          <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
            ControlToValidate="Email" ErrorMessage="- Enter a vaild email address" 
            CssClass="ErrorMessage" 
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>
        </td>
      </tr>
      <tr>
        <td class="style4">
          Home phone </td>
        <td class="style4">
          <asp:TextBox ID="HomePhone" runat="server"></asp:TextBox>
        </td>
        <td class="style4">
          <asp:CustomValidator ID="CustomValidator1" runat="server" 
            ErrorMessage="- Enter your home or business phone" 
            onservervalidate="CustomValidator1_ServerValidate" 
            ClientValidationFunction="ValidatePhoneNumbers" Display="Dynamic" 
            CssClass="ErrorMessage">*</asp:CustomValidator>
        </td>
      </tr>
      <tr>
        <td class="style3">
          Business phone </td>
        <td class="style3">
          <asp:TextBox ID="BusinessPhone" runat="server"></asp:TextBox>
          <asp:CheckBox ID="ChckBoxOmitPhone" runat="server" 
            Text=" I'll omit my phone number" 
            oncheckedchanged="ChckBoxOmitPhone_CheckedChanged" ClientIDMode="Static" />
        </td>
        <td class="style3">
          </td>
      </tr>
      <tr>
        <td class="style6">
          Comments</td>
        <td class="style6">
          <asp:TextBox ID="Comments" runat="server" TextMode="MultiLine" Height="48px" 
            Width="256px"></asp:TextBox>
        </td>
        <td class="style6">
          <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
            ControlToValidate="Comments" ErrorMessage="- Enter a comment" 
            CssClass="ErrorMessage">*</asp:RequiredFieldValidator>
        </td>
      </tr>
      <tr>
        <td>
          &nbsp;</td>
        <td>
          <asp:Button ID="SendButton" runat="server" Text="Send" 
            onclick="SendButton_Click" />
        </td>
        <td>
          &nbsp;</td>
      </tr>
      <tr>
        <td colspan="3">
          <asp:ValidationSummary ID="ValidationSummary1" runat="server" 
            CssClass="ErrorMessage" DisplayMode="List" 
            HeaderText="Please correct the following errors before you press Send:" />
        </td>
      </tr>
    </table>
    <br />
    <asp:Label ID="MessageSent" Text="Your message has been submitted." visible="false" runat="server" />

Code:

    public void ChckBoxOmitPhone_CheckedChanged(object sender, EventArgs e)
    {
      if (BusinessPhone.ReadOnly || HomePhone.ReadOnly)
      {
        BusinessPhone.ReadOnly = !BusinessPhone.ReadOnly;
        HomePhone.ReadOnly = !HomePhone.ReadOnly;
        BusinessPhone.CssClass = "DimmedOut";
        HomePhone.CssClass = "DimmedOut";
      }
      else
      {
        BusinessPhone.ReadOnly = !BusinessPhone.ReadOnly;
        HomePhone.ReadOnly = !HomePhone.ReadOnly;
        BusinessPhone.CssClass = "";
        HomePhone.CssClass = "";
      }

Imar · January 15th, 2012, 10:30 AM

Hi there,

OnCheckChanged is a server event, not a client side event. That means that it'll only fire after a postback (e.g. after you clicked the Submit button).

You could handle this with client side script. Using jQuery you can respond to the check changed: http://api.jquery.com/change/

Then you can use addClass or removeClass to change the styling.

Then at the server all you need to do in the custom validator is look at the Checked state of the checkbox.

Hope this helps,

Imar

IceThatJaw · January 15th, 2012, 11:07 AM

Ok, thanks.

This is what I came up with but how do I call it and am I allowed to reference two id's at once?

Code:

 $('CheckBox').change(
    function () {
      $('#HomePhone #BusinessPhone').attr("disabled", true).addClass('DimmedOut');
    },
    function () {
      $('#HomePhone #BusinessPhone').removeAttr("disabled").removeClass('DimmedOut');
  });

And with this server code would I need to reset the textboxes in the else block or would it not matter since there's a postback?

Code:

    protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
    {
      if (ChckBoxOmitPhone.Checked)
      {
        BusinessPhone.ReadOnly = !BusinessPhone.ReadOnly;
        HomePhone.ReadOnly = !HomePhone.ReadOnly;
        BusinessPhone.CssClass = "DimmedOut";
        HomePhone.CssClass = "DimmedOut";
      }
      else
      {
        BusinessPhone.ReadOnly = !BusinessPhone.ReadOnly;
        HomePhone.ReadOnly = !HomePhone.ReadOnly;
        BusinessPhone.CssClass = "";
        HomePhone.CssClass = "";

        // if both phone number boxes are unfilled the validator is invalid, else it is valid
        if (!string.IsNullOrEmpty(HomePhone.Text) || !string.IsNullOrEmpty(BusinessPhone.Text))
        {
          args.IsValid = true;
        }
        else
        {
          args.IsValid = false;
        }
      }
    }

Imar · January 15th, 2012, 11:23 AM

You call it from a standard jQuery document ready method. To reference multiple classes at once, you can assign a CSS class and then use .YourClass in the jQuery selector code.

You may need to set the classes again after a postback in case the data is invalid. Alternatively you could use jQuery again to set the appropriate classes again after a postback.

Hope this helps,

Imar

IceThatJaw · January 15th, 2012, 11:27 AM

OK, I think I can figure it out from here. Thanks!

Update- I finally got it. Not much code at either, just ugly as sin syntax. lol

Code:

$(function () {
    $('#ChckBoxOmitPhone').change(
    function () {
      if ($('#ChckBoxOmitPhone').attr("checked") == true)
        $('.Phone').attr("disabled", true).addClass('DimmedOut');
      else {
        $('.Phone').removeAttr("disabled").removeClass('DimmedOut');
      }
    })
  });