CODEWITHSUNDEEP
jqueryjquery-selectors
Sam Carleton
Sam Carleton

Reputation: 1398

using jQuery to finding a specific input

I am working on an assessment system. There are many 'questionItem' blocks on the page. the goal is to identify the ones where the answers[2].SetAnswer or answers[2].Answer are set to either an empty string or ? and high light the title (item). When the user changes the question, remove the highlight.

It works, I am simply looking for how I might be able to improve it. Here is one block:

$<div class="questionItem">
    <input data-val="true" data-val-number="The field MappingId must be a number." data-val-required="The MappingId field is required." id="answers_2__MappingId" name="answers[2].MappingId" type="hidden" value="24" />
    <input id="answers_2__Item" name="answers[2].Item" type="hidden" value="B0300" />
    <input id="answers_2__OldAnswer" name="answers[2].OldAnswer" type="hidden" value="^" />
    <input id="answers_2__SetAnswer" name="answers[2].SetAnswer" type="hidden" value="^" />
    <h3 class="item">B0300</h3>
    Hearing aid<br/>
    <select class="hyperSwap" id="answers_2__Answer" name="answers[2].Answer">
        <option selected="selected" value="?">(select item)</option>
        <option value="0">(0) No</option>
        <option value="1">(1) Yes</option>
        <option value="-">(-) Not assessed</option>
    </select>
</div>

<div class="questionItem">
    <input data-val="true" data-val-number="The field MappingId must be a number." data-val-required="The MappingId field is required." id="answers_11__MappingId" name="answers[11].MappingId" type="hidden" value="228" />
    <input id="answers_11__Item" name="answers[11].Item" type="hidden" value="C0900A" />
    <input id="answers_11__OldAnswer" name="answers[11].OldAnswer" type="hidden" value="0" />
    <input id="answers_11__SetAnswer" name="answers[11].SetAnswer" type="hidden" value="?" />
    <h3 class="item">C0900A</h3>
    Staff asmt mental status: recall current season <br/>
    <div class="questionCheckbox"><input id="C0900A_0" name="answers[11].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
    <div class="questionCheckbox"><input id="C0900A_1" name="answers[11].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
    <div class="questionCheckbox"><input id="C0900A_-" name="answers[11].Answer" type="radio" value="-" /> (-) Not assessed</div>
</div>

And here is the jQuery code I have came up with:

$function highlightUnanswered() {
    var coll = $(".questionItem").filter(function () {
        return $(this).find(":input").filter(function () {
            return (/^answers\[\d+\]\.SetAnswer$/.test(this.name) && this.value == "?") ||
                           ((/^answers\[\d+\]\.Answer$/.test(this.name) && this.value == "?") &&
                            (/^answers\[\d+\]\.Answer$/.test(this.name) && this.value == ""));
        }).length > 0;
    });

    coll.find(".item").addClass("unanswered");
    coll.find(":input").change(function (e) { $(this).parent().find(".item").removeClass("unanswered"); });
}

There are two questions:

Q1: the very last line, if I am not mistaken the handler is being added to ALL the inputs, including the hidden ones. How to I just wire it up to the answers[#].Answer input?

Q2: Someone on this form gave me the first query that comes up with the initial collection for a different feature. I understand what it is doing, but I don't understand how: What is up with /^answers[\d+].Answer$/.test(this.name)? Why is there a .length() > 0 at the end?

Upvotes: 0

Views: 294

Answers (1)

biziclop
biziclop

Reputation: 14596

Q1:

coll.find(":input").filter(function(){
  return (/^answers\[\d+\]\.Answer$/.test(this.name);
}).addClass('unanswered');

Q2:

http://api.jquery.com/filter/ says: "For each element, if the function returns true (or a "truthy" value)", so the filter function could simply return .length: 0 is falsy, other numbers are truthy.

/^answers[\d+].Answer$/ is a regular expression:

https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions

.test(this.name) checks if the currently processed input's name matches the required format.

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp/test

Upvotes: 1

Related Questions