.css property

JavaScript
1

.

Hi - I am probably overlooking something simple, but can’t tell why the following code fragment is not working :

$(document).ready(function(){
  $('#signup form:input').css('background-color', 'lemonchiffon')
});

      
<div id="signup">
        <h2>Sign up</h2>  
        <form action="">
          <div>
            <label for="name">Name:</label>
            <input name="name" id="name" type="text"/>
          </div>
          <div>
            <label for="email">Email:</label>
            <input name="email" id="email" type="text"/>
          </div>
          <div>
            <label for="website">Web site URL:</label>
            <input name="website" id="website" type="text" />
          </div>      
          <div>
            <label for="password">Password:</label>
            <input name="password" id="password" type="password" />
          </div>   
          <div>
            <label for="passconf">Confirm Password:</label>
            <input name="passconf" id="passconf" type="password" />
          </div>      
          <div>
          	<input type="submit" value="Submit" />
          </div>
        </form>
</div>

but when I hard wire the style into the css file, it works just fine.

.

2

This looks invalid to me (unless there’s some jQuery voodoo I’ve not heard of):

form:input

Try

form input
3

That :input voodoo is a perfectly cromulent jQuery selector that can serve to embiggen the flexibility of your code. It matches all form controls, such as input, textarea, select and button elements.

The problem is that there’s no gap, without which means that it’s looking for form elements that are also form controls, which are mutually exclusive.
Put a space in there and it will then match what you want correctly.

$('#signup form :input')

If you want to restrict it to only input fields (no other type of form control) then the suggestion from Ralph’s post will work too.

4

Ha ha, figured as much. Thanks Paul.

PS: thanks for teaching me a new word: “cromulent” (though I’m not sure if I should be endorsing Simpsons vocab). D’oh!

5

:slight_smile: thank you Paul, the space did the trick…

6

:slight_smile: thank you Paul, the space did the trick…

.

Apologies for posting this twice.

7

Once again if I understood you correctly, had the code been :


            <label id="signup" for="name">Name:</label>              //   <--------   id="signup"
<input name="name" id="name" type="text"/>

instead of :

<div id="signup">                                        //   <--------   original code
        <h2>Sign up</h2>  
        <form action="">
          <div>
            <label for="name">Name:</label>
            <input name="name" id="name" type="text"/>
          </div>

then the original code would have matched correctly, i.e without the space :

$('#signup form:input')

.

8

No, that understanding is not correct.

form:input is looking for a form element that is also a form control. Since a form element is not a form control, you get no match.
Whereas form :input is looking inside forms for elements that are form controls.

If it helps, consider div.header
That too is getting only div elements that also have that class name. Their descendants do not come in to things at this point.
With div .header though, that’s getting all elements within the div that contain the appropriate class.

9

thanks, I got confused when I saw the following code after your initial explanation, I was thinking along the right lines but got the example wrong in my previous post.

$('.check-all:checkbox').change(function() {
var group = ':checkbox[name=' + $(this).attr('name') + ']';
$(group).attr('checked', $(this).attr('checked'));
});