IT Anawer: JavaScript help with forms?

So, I have a form that consists of 4 inputs, username, password, email, and name.

I am sick and tired of having to make a javascript function for each of them, because each input is a text input, and when a user clicks the input box I have it change the background of the input to a different color.

So heres how I coded:

The form inputs:

<input type="text" name="username" id="usernameInput" onclick="changeUsername(); return false;" onblur="changeUsernameback(); return false;">

<input type="text" name="password" id="passwordInput" onclick="changePassword(); return false;" onblur="changePasswordback(); return false;">

and the other two forms are the same, only with different names and different id's and javascript functions.

MY Javascript:

function changeUsername() {
 document.getElementById('usernameInput').style.background='#FFFF00';
}

function changeUsernameBack() {
 document.getElementById('passwordInput').style.background='#FFFF00';
}

and the other three are just like that only setup for their own specific id.

AND when creating CSS, I have to make different ID's for all 4 inputs.

What I want to know is: Is there a way I can only make one CSS id, and one javascript function to change all inputs? Because I know when you just use one function for all, javascript tries to change all at once..

I was thinking something like

document.getElementById('inputText'+[i]).style.background='#FFFF00';

and then when I give each input an id I could just automatically increment them on the page such as input1, input2, input3 etc.

But that doesn't seem to work? Maybe I am coding it wrong? Please help..

From stackoverflow

You COULD do this:
```
<input type="text" name="username" id="usernameInput" onfocus="change(this);" onblur="changeBack(this);">
<input type="text" name="password" id="passwordInput" onfocus="change(this);" onblur="changeBack(this);">
```
With this javascript:
```
function change(el) {
    el.style.background='#FFFF00';
}

function changeBack(el) {
    el.style.background='#FFFF00';
}
```
A couple of notes:
- You are using onclick - while that may work, I think what you want is onfocus.
- As far as I know, it is not necessary to return false; on either of these events.
While the above will work with plain Javascript, I am obligued to suggest the jQuery way:
```
<input type="text" name="username" id="usernameInput">
<input type="text" name="password" id="passwordInput">
```
And then do this with jQuery:
```
$(function() {
    $('input').focus(function() {
        $(this).css('background-color', '#FFFF00');
    }).blur(function() {
        $(this).css('background-color', '#FFFF00');
    });
});
```
I personally feel this is cleaner, as inline javascript events are ugly, but the first one should work.

Grant Wagner : I understand why you included the recommendation for jQuery (since everyone else is suggesting it). But this is a JavaScript author who had to ask how to make a function to change the background color of an input more generic. I think jQuery would just confuse him at this point.

Paolo Bergantino : I just thought I'd throw it in there, but you are definitely right.

TStamper : +1 i agree with your suggestion

<input type="text" name="whatever" id="uniqueVal" onclick="return gotFocus(this);" onblur="return lostFocus(this);">

function gotFocus(el) {
    el.style.background = 'Red';
    return false;
}

function lostFocus(el) {
    el.style.background = 'Blue';
    return false;
}

I personally like returning false from these types of functions to reduce the amount of code I have to write in the HTML element attribute.

You should try using jQuery - that's what we use. It would be very simple using jQuery.

<script>
$(document).ready(function(){
  $(".PrettyInput")
    .focus(function() { $(this).css("background-color", "#FFFF00"); })
    .blur(function() { $(this).css("background-color", "#FFFF00"); });
});
</script>

<html>
<body>
  Username: <input type="text" class="PrettyInput" />
  Password: <input type="text" class="PrettyInput" />
</body>
</html>

Here's a complete example using jQuery.

<html>   

  <head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
      $("input:text")
        .focus(function() { $(this).css("background-color", "#FFFF00"); })
        .blur(function() { $(this).css("background-color", "#FFFFFF"); });
      });
    </script>

  </head>         

  <body>

    <form>
      Username: <input type="text" /> 
      Password: <input type="text" />   
    </form>

  </body>

</html>

Is there a way I can only make one CSS id, and one javascript function to change all inputs?

Yes, you can attach one event handler to many elements simply by assigning it as a function; the subject element comes in as ‘this’. You don't even need an ID.

For completeness, since no-one else seems to have said it, it's quite possible to have the advantages of non-inline, unobtrusive event handlers without dragging in the whole of jQuery (which is probably a bit excessive if all you want is a few highlighting inputs):

<input type="text" name="username" />
<input type="text" name="password" />

<script type="text/javascript">
    function inputFocussed() {
        this.style.backgroundColor= 'yellow';
    };
    function inputBlurred() {
        this.style.backgroundColor= 'white';
    };

    // Bind to input[type=text]
    //
    var inputs= document.getElementsByTagName('input');
    for (var i= inputs.length; i-->0;) {
        if (inputs[i].type=='text') {
            inputs[i].onfocus= inputFocused;
            inputs[i].onblurred= inputBlurred;
    }   }
</script>

IT Anawer

Wednesday, April 20, 2011

JavaScript help with forms?

0 comments:

Post a Comment

Blog Archive