Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    43
    Thanks
    5
    Thanked 0 Times in 0 Posts

    TextBox Background Color problem ?

    Hi,
    I have a few textboxes in my webform and all are required..I want to change the background color of the textboxes when the required field validator is enabled ....When I just focus on the textbox the textbox is turning into this aqua backgorund color..But I want the textbox to be aqua only if it is fired with a required field validator ..Not jus by focussing ...I am using the below property in the properties of the textbox ..Plz suggest me any changes or help me ..trying this from long time .
    onfocus= "this.style.backgroundColor='aqua';" onblur="this.style.backgroundColor='#ffffff';"

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by paladinckm View Post
    But I want the textbox to be aqua only if it is fired with a required field validator ..Not jus by focussing ...I am using <snip>
    onfocus= "this.style.backgroundColor='aqua';"
    Maybe re-reading your own post will help. You don't want it to change to aqua when focused, but you have an onfocus handler set to change in to aqua.


  • #3
    New Coder
    Join Date
    May 2008
    Posts
    43
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    Maybe re-reading your own post will help. You don't want it to change to aqua when focused, but you have an onfocus handler set to change in to aqua.

    Hi tom,
    I got your opinion ..but I want the backgorund color to be changed only the first time I focus ..Not everytime ..that's the issue ..Hope you will help me ..

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Ah, well that's something different than the original post, then. There are probably a dozen ways to do it. I'd use the onfocus event to point to a function that runs validation, sets a global flag, and changes the background dependent upon the flag status. Something like this:
    Code:
    <script ...>
    var field1Flag = false;
    function field1Action(val)
    {
      if (!field1Flag)
      {
        field1Flag = true;
        document.getElementById('field1Flag').style.backgroundColor = 'aqua';
      }
      /*validate...*/
    }
    </script>
    You'd probably want to change the onblur, too.

  • Users who have thanked tomws for this post:

    meenakshia (06-11-2008)

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    43
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    Ah, well that's something different than the original post, then. There are probably a dozen ways to do it. I'd use the onfocus event to point to a function that runs validation, sets a global flag, and changes the background dependent upon the flag status. Something like this:
    Code:
    <script ...>
    var field1Flag = false;
    function field1Action(val)
    {
      if (!field1Flag)
      {
        field1Flag = true;
        document.getElementById('field1Flag').style.backgroundColor = 'aqua';
      }
      /*validate...*/
    }
    </script>
    You'd probably want to change the onblur, too.
    HI tom,
    Thanks for the quick reply ..I am a beginner in this area ..so perhaps the concept used above is a bit confusing to me ..anyways i shall be working on that and as you said there are many ways so i am taking the freedom of asking you to post a full simpler solution if possible ..If could do that it will be great

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by paladinckm View Post
    <snip> ..anyways i shall be working on that and as you said there are many ways so i am taking the freedom of asking you to post a full simpler solution if possible ..If could do that it will be great
    Full simpler? In other words, the completed code? I could do that, but I won't. Global flags and if statements are pretty basic concepts. If there's something in the code that's confusing, just ask.

  • #7
    New Coder
    Join Date
    May 2008
    Posts
    43
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    Full simpler? In other words, the completed code? I could do that, but I won't. Global flags and if statements are pretty basic concepts. If there's something in the code that's confusing, just ask.
    Hi tom ,
    I know IF statements ..but i don't know global flags ..so i thought there could be some simple solution..but as you say that global flags is also basic ..i shall learn that and look into your code ..I was trying to implement simple javascript..but not just waste your time asking to do all the coding part..And the reason i got confused is because i have many text boxes so i did not understand where should i call this fieldAction1 ?? and should i introduce this fieldflag in text box properties ?? this is the reason i asked for you a full simpler code ..thanks for the code

  • #8
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by paladinckm View Post
    but as you say that global flags is also basic ..i shall learn that and look into your code
    It's just a flag value in global scope. Global: the variable's value is able to be seen and changed by all functions because it exists outside of them. Flag: a variable/value that we check to know when/how to do something. That's a bit of an oversimplification, but it should give an idea.

    The reason the flag needs to be global is so that it stays set after the function changes it the first time. That should allow the field to not go aqua on subsequent focuses.

    Quote Originally Posted by paladinckm View Post
    ..I was trying to implement simple javascript..but not just waste your time asking to do all the coding part..
    It's not that it's a waste of time, but rather that it's a better learning exercise to build it yourself. If I considered this a waste of time, I wouldn't try to answer questions.

    Quote Originally Posted by paladinckm View Post
    And the reason i got confused is because i have many text boxes so i did not understand where should i call this fieldAction1 ?? and should i introduce this fieldflag in text box properties ??
    Now we're getting somewhere. This is a good way to get lots of help: asking specific question like these, because it's easy to understand what you need and what you're having problems with.

    My field1Action is just some made-up function name. We can make it a little simpler. Start with the onfocus event. Instead of cramming all the code into the onfocus event in the tag, we build a function and call it from onfocus. Then we can easily change what the function does without messing up the input tag that has the onfocus event. If we use the example function name, your call would look like this: onfocus="field1Action();"

    Then we build the function field1Action() and put in there whatever we want to happen when the field is focused.

    Before that, let's look at the global flag variables. I might have something like this if I had three input fields for name, email, and phone.
    Code:
    <script ...>
    // these are my input field names
    var fieldFlag_Name = false;
    var fieldFlag_Email = false;
    var fieldFlag_Phone = false;
    ...
    </script>
    The actual flag value can be anything we want, but it's really easy to test variables for true/false, so we start them with false. Those must be outside of any other functions (but inside a script tag) to be global. And, again, we want it that way so that they'll keep their value after changed.

    If you want to simplify the previous example and just use the function to toggle the flag, it would be something like this (changing the name to something close to our example flags above):
    Code:
    function fieldFocus_Name()
    {
      if (!fieldFlag_Name)
      {
        fieldFlag_Name = true;
        document.getElementById('Name').style.backgroundColor = 'aqua';
      }
    }
    What happens is this: When the field is focused and the onfocus triggered, this function is run. If it's the first time the field has been focused, the variable fieldFlag_Name is false, so we enter the if statement, the global flag is changed to true, and the background color is set to aqua. If we go somewhere else and then come back to that same field, onfocus is triggered and we enter the function, but the variable fieldFlag_Name is true this time, so we don't enter the if statement, and nothing else happens... assuming I didn't make any mistakes.

    This simpler version assumes that your validation is done in another function somewhere. You'd need one of those functions for each flag, and one flag/function combo for each field. You also need to incorporate the correct handling of the onblur event.

    The whole thing can actually be simplified even more (with arrays, for example), but maybe this will help understand the basics.

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    43
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    It's just a flag value in global scope. Global: the variable's value is able to be seen and changed by all functions because it exists outside of them. Flag: a variable/value that we check to know when/how to do something. That's a bit of an oversimplification, but it should give an idea.

    The reason the flag needs to be global is so that it stays set after the function changes it the first time. That should allow the field to not go aqua on subsequent focuses.



    It's not that it's a waste of time, but rather that it's a better learning exercise to build it yourself. If I considered this a waste of time, I wouldn't try to answer questions.



    Now we're getting somewhere. This is a good way to get lots of help: asking specific question like these, because it's easy to understand what you need and what you're having problems with.

    My field1Action is just some made-up function name. We can make it a little simpler. Start with the onfocus event. Instead of cramming all the code into the onfocus event in the tag, we build a function and call it from onfocus. Then we can easily change what the function does without messing up the input tag that has the onfocus event. If we use the example function name, your call would look like this: onfocus="field1Action();"

    Then we build the function field1Action() and put in there whatever we want to happen when the field is focused.

    Before that, let's look at the global flag variables. I might have something like this if I had three input fields for name, email, and phone.
    Code:
    <script ...>
    // these are my input field names
    var fieldFlag_Name = false;
    var fieldFlag_Email = false;
    var fieldFlag_Phone = false;
    ...
    </script>
    The actual flag value can be anything we want, but it's really easy to test variables for true/false, so we start them with false. Those must be outside of any other functions (but inside a script tag) to be global. And, again, we want it that way so that they'll keep their value after changed.

    If you want to simplify the previous example and just use the function to toggle the flag, it would be something like this (changing the name to something close to our example flags above):
    Code:
    function fieldFocus_Name()
    {
      if (!fieldFlag_Name)
      {
        fieldFlag_Name = true;
        document.getElementById('Name').style.backgroundColor = 'aqua';
      }
    }
    What happens is this: When the field is focused and the onfocus triggered, this function is run. If it's the first time the field has been focused, the variable fieldFlag_Name is false, so we enter the if statement, the global flag is changed to true, and the background color is set to aqua. If we go somewhere else and then come back to that same field, onfocus is triggered and we enter the function, but the variable fieldFlag_Name is true this time, so we don't enter the if statement, and nothing else happens... assuming I didn't make any mistakes.

    This simpler version assumes that your validation is done in another function somewhere. You'd need one of those functions for each flag, and one flag/function combo for each field. You also need to incorporate the correct handling of the onblur event.

    The whole thing can actually be simplified even more (with arrays, for example), but maybe this will help understand the basics.
    Hello Tom,
    If there is a word above thanks to let others know how grateful you are ..then that word applies to you from my side ..THANKYOU...I am quite sure that i can make this code for my case ..I sincerely apologize if i had hurt you in the previous quote...Once again..you have come down to basic level to explain the thing to me ..that 's what makes you unique in this materialistic world ...Thanks again -whole heartedly


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •