CODEWITHSUNDEEP
javascriptjqueryfunctionthis
Fernando Souza
Fernando Souza

Reputation: 1779

'this' not selecting on jquery function

I have a function that is triggered when .btn is clicked, it will check if the input and text area with the class .req are filled or not. If not, its suppose to select only the empty elements and add a class .warning. The conditional function is working well, but I can't select the elements using "this". Why? What's the right way?

      <form id="form1" name="form1" method="post" action="./confirm.php">
            <table>
             <tr>
                <th>お名前*</th>
               <td>
                <input class="req" type="text" name="f_name" value="" placeholder="山田 太郎">
              </td>
            </tr>
            <tr>
              <td>
        <textarea class="req" id="f_request" name="f_request" data-validation-engine="validate[required]"></textarea>
              </td>
            </tr>
        </table>
        <div class="btn">
            <input class="submit" type="hidden" name="input_flag" value="true">
            <input class="submit" type="submit" value="お問い合わせ内容を確認">
        </div>
     </form>
     <script>   
        function check(){
                if(!$(".req").val()){
                    $('.submit').addClass('null');
                    console.log("null");
                } else{
                    $('.submit').removeClass('null');
                    console.log("normal");
                };
            };
            check();

        $('.btn').click(function(){
         check();
            if($('.req').val() != '') {
                $(this).removeClass('warning');

            }else{
                $(this).addClass('warning');
            }
         });

</script>

Upvotes: 2

Views: 69

Answers (4)

Mohit Tiwari
Mohit Tiwari

Reputation: 165

If HTML code is something like that : 

        <div>
        <input type="text" class="req" value=""/>
        <input type="text" class="req" value=""/>
        <input type="text" class="req" value=""/>
        <input type="text" class="req" value=""/>
        </div>
        Then you can check all elements with req class, you can use .each()

        $('.btn').click(function(){
           $('.req').each(function(){
             if($(this).val() != '') {
              $(this).removeClass('warning');
             }else{
              $(this).addClass('warning');
             }
           });
        });

In your mentioned code $(this) targeting for .btn class not for input.

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115222

You are checking the value of the first element always instead of that check count of empty elements by using filter() method with a callback, which iterates and within callback this refers to the element.

$('.btn').click(function(){
    if($('.req').filter(function(){ return $(this).val() === ''; }).length === 0) {
        $(this).removeClass('warning');

    }else{
        $(this).addClass('warning');
    }
 });

UPDATE : If you want to apply style on the input then you can use each() method to iterate and toggleClass() method to toggle the class based on condition.

$('.btn').click(function(){
    // iterate over elements
    $('.req').each(function(){ 
      // toggle class based on value
      $(this).toggleClass('warning', this.value === '');
    });
 });

Upvotes: 1

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

To check all elements with req class, you can use .each() and $(this)

$('.btn').click(function(e){
   e.preventDefault();
    $('.req').each(function(){
        if($(this).val() != '') {
            $(this).removeClass('warning');
        }else{
            $(this).addClass('warning');
        }
    });
});

Working snippet:-

$('.btn').click(function(e){
  e.preventDefault();
  var emptyCounter = 0;
  $('.req').each(function(){
    if($(this).val() != '') {
      $(this).removeClass('warning');
    }else{
      $(this).addClass('warning');
      emptyCounter++;
    }
  });
  if(emptyCounter > 0){
    $('.submit').addClass('null');
    console.log("null");
  } else{
    $('.submit').removeClass('null');
    console.log("normal");
  };
});
.warning{
 border-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post" action="./confirm.php">
        <table>
         <tr>
            <th>お名前*</th>
           <td>
            <input class="req" type="text" name="f_name" value="" placeholder="山田 太郎">
          </td>
        </tr>
        <tr>
          <td>
    <textarea class="req" id="f_request" name="f_request" data-validation-engine="validate[required]"></textarea>
          </td>
        </tr>
    </table>
    <div class="btn">
        <input class="submit" type="hidden" name="input_flag" value="true">
        <input class="submit" type="submit" value="お問い合わせ内容を確認">
    </div>
 </form>

Upvotes: 3

Kiran Shinde
Kiran Shinde

Reputation: 5982

What I understand , you have to loop through all .req and then check condition:

 $('.btn').click(function(){
    $('.req').each(function(index, elem) {
       if($(elem).val() != '') {
          $(elem).removeClass('warning');
       }else{
          $(elem).addClass('warning');
       }
    }
 });

Upvotes: 1

Related Questions