CODEWITHSUNDEEP
jqueryeach
user2073143
user2073143

Reputation:

Can't get jQuery each() to work

I need to verify that each text input field is filled in (.question-editor-answer) when this form is submitted. I'm not clear on how to do this with each(). The items to iterate are not in a single container, as you can see from the html. Is there a way to iterate through the items in this situation? Note that the number of containers .question-editor-answer-container can vary. Thanks

<div class="question-editor-answers">
            <div class="question-editor-answer-container">
                <span class="question-answer">
                    <input type=text class="question-editor-answer" name="answers[]" />
                </span>
                <span class="question-correct">
                    <input type="radio" class="correct" name=correct value="0" />
                </span>
            </div>
            <div class="question-editor-answer-container">
                <span class="question-answer">
                    <input type=text class="question-editor-answer"  name="answers[]" />
                </span>
                <span class="question-correct">
                    <input type="radio" class="correct" name=correct value="1" />
                </span>
            </div>
            <div class="question-editor-answer-container">
                <span class="question-answer">
                    <input type=text class="question-editor-answer" name="answers[]" />
                </span>
                <span class="question-correct">
                    <input type="radio" class="correct" name=correct value="2" />
                </span>
            </div>
            <div class="question-editor-answer-container">
                <span class="question-answer">
                    <input type=text class="question-editor-answer" name="answers[]" />
                </span>
                <span class="question-correct">
                    <input type="radio" class="correct" name=correct value="3" />
                </span>
            </div>
        </div>


    $('#new-question-form').submit(function() {
         var question = $('#question-form-question').val();
         var emptyAnswer = 0;
         $('.question-editor-answer').each(function() {
             if ($(this) === '') {
                 $(this).css('border','2px solid red');
                 emptyAnswer = 1;
             }
         })
         if (emptyAnswer === '1'){
             return false;
         }
         if ( question === '' ) {
              $('#question-form-question').css('border','2px solid red')
              return false;
         }
     });

Upvotes: 1

Views: 39

Answers (2)

Ryuk Lee
Ryuk Lee

Reputation: 744

Just

$('.question-editor-answer .question-editor-answer-container').each(function() {
         if ($(this).val() === '') {
             $(this).css('border','2px solid red');
             emptyAnswer = 1;
         }
     })

or

$('.question-editor-answer-container').each(function() {
         if ($(this).val() === '') {
             $(this).css('border','2px solid red');
             emptyAnswer = 1;
         }
     })

Upvotes: 1

Eddie
Eddie

Reputation: 26844

$(this) refers the the jQuery object and not the value of the input.

You have to use $(this).val() to get the value. You might also want to add .trim() the white spaces.

Like:

$('.question-editor-answer').each(function() {
    if ( $(this).val().trim() === '' ) {
        $(this).css('border','2px solid red');
        emptyAnswer = 1;
    }
})

Upvotes: 0

Related Questions