Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4 > BOOK: Beginning ASP.NET 4 : in C# and VB
|
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old January 14th, 2012, 08:12 PM
Authorized User
 
Join Date: Dec 2011
Posts: 39
Thanks: 9
Thanked 0 Times in 0 Posts
Default Imar, I want to add one extra thing to the contact form. Can you help?

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.

Last edited by IceThatJaw; January 14th, 2012 at 08:18 PM..
 
Old January 15th, 2012, 04:24 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

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

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old January 15th, 2012, 10:15 AM
Authorized User
 
Join Date: Dec 2011
Posts: 39
Thanks: 9
Thanked 0 Times in 0 Posts
Default

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 = "";
      }

Last edited by IceThatJaw; January 15th, 2012 at 10:53 AM..
 
Old January 15th, 2012, 10:30 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old January 15th, 2012, 11:07 AM
Authorized User
 
Join Date: Dec 2011
Posts: 39
Thanks: 9
Thanked 0 Times in 0 Posts
Default

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;
        }
      }
    }

Last edited by IceThatJaw; January 15th, 2012 at 11:15 AM..
 
Old January 15th, 2012, 11:23 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old January 15th, 2012, 11:27 AM
Authorized User
 
Join Date: Dec 2011
Posts: 39
Thanks: 9
Thanked 0 Times in 0 Posts
Default

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');
      }
    })
  });

Last edited by IceThatJaw; January 15th, 2012 at 11:52 AM..





Similar Threads
Thread Thread Starter Forum Replies Last Post
contact form Will BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 6 February 24th, 2009 01:42 PM
add extra header in datagrid p330418 ASP.NET 2.0 Professional 1 April 9th, 2008 10:30 AM
BindingNavigator show 2 extra when add new row michellebong Visual Basic 2005 Basics 1 March 28th, 2008 10:22 PM
Add Contact nileshpatel Classic ASP Components 0 March 10th, 2007 01:50 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.