How to use selector combination to get empty fields using Prototype.js

Question

How do I combine this selector and get output using prototype.js?

My HTML code:

 <input id="age" value="">
 <span id="movieSelection" class="defaultText">
 <button >addButton</button>

This is rough HTML code and when clicked on add button it will add one more row of age input id and span tag each time different id

Now

  $$('input[id*=age]:and[value=""]').length 

will give me empty age fields

  $$('span[id*=movieSelection]:and[class*=defaultText]').length

will give me empty selection.

Now I want to combine this two situation in one $$().length which will satisfy my requirement.

Suppose I have 10 rows, in that I filled 3 age values so selector should give me answer as 7 as combination of age and movieSelection column having empty value is 7

Please help me. Thanks in Advance.

Answer 1

Attribute selectors check only initial state of the element not the modified state. So your attribute selector for input element will not work. If you just want to ensure that it is not empty then you can use :valid selector & add required attribute to the element.

You should also consider wrapping both elements (input & span) under some other element. Right now, there doesn't seem to be any relation between span & input. If you have multiple spans & inputs it's hard to check which span corresponds to which input.

Finally to answer your question, you can use following selector. It will select span elements having defaultText class & preceded by empty input element. Remember though, it will return you only span elements. If your goal is just to check the length, this should suffice. Otherwise modify this selector to return all elements including input as well.

'input[id*=age]:not(:valid) + span[id*=movieSelection][class*=defaultText]'

I have modified fiddle created by wared. You can take a look at it here: http://jsfiddle.net/e6BdP/9/

Answer 2

Try this select query

$$('input[id*=age]:and[value=""],span[id*=movieSelection]:and[class*=defaultText]').length