If textarea contains this text then run query

Question

This is my code:

$(document).ready(function () {
   if ($("#write_text_id").text() === "Saurav & Kunal Are God") {
      $(".submit_form_field").addClass('item-3');
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <textarea id="write_text_id" class="textarea small" tabindex="105" placeholder="Write Saurav &amp; Kunal Are God" rows="4" cols="50"></textarea>
  <input id="submit_btn_id" class="submit_form_field" type="submit" value="Submit">
</div>

I'm expecting that if I write "Saurav & Kunal Are God" in the textarea then submit button will add class item-3.

`textareaText.contains('Saurav & ...')` – Tushar Mar 14 '23 at 07:59 — Tushar, Mar 14 '23 at 07:59

Miss Skooter · Answer 1 · 2023-03-14T08:14:03.430

What you're looking for is an EventListener instead of document.ready to watch for changes to the textbox.

Notice that document.ready will only get called once from the console.log I added when the document is originally loaded:

$(document).ready(function() {
  console.log("test");
  if ($("#write_text_id").text() === "Saurav & Kunal Are God") {
    $(".submit_form_field").addClass('item-3');
  }
});

<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous"></script>
<div class="test">
  <textarea id="write_text_id" class="textarea small" tabindex="105" placeholder="Write Saurav &amp; Kunal Are God" rows="4" cols="50"></textarea>
  <input id="submit_btn_id" class="submit_form_field" type="submit" value="Submit">
</div>

However, upon using an EventListener you will get the desired result when clicking the submit button:

$("#write_text_id").on("change", (event) => {
  if ($("#write_text_id").val() === "Saurav & Kunal Are God") {
    console.log("in if condition");
    $(".submit_form_field").addClass('item-3');
  }
});

.item-3 {
  background-color: green
}

<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous"></script>
<div class="test">
  <textarea id="write_text_id" class="textarea small" tabindex="105" placeholder="Write Saurav &amp; Kunal Are God" rows="4" cols="50"></textarea>
  <input id="submit_btn_id" class="submit_form_field" type="submit" value="Submit">
</div>

It is also worth noting that I used $("#write_text_id").val() since the .text() was not returning anything.

score 0 · Accepted Answer · answered Mar 14 '23 at 08:02

You should check when input typing and not one time. For this, with jQuery, you can use on('input', function) as explained here.

I personally remove the class when it's wrong, to make it disappear when the text change again.

$(document).ready(function () {
    $("#write_text_id").on('input', function (e) {
        if (e.target.value === "Saurav & Kunal Are God") {
           $(".submit_form_field").addClass('item-3');
        } else
           $(".submit_form_field").removeClass('item-3');
    });
});

.item-3 {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test">
  <textarea id="write_text_id" class="textarea small" tabindex="105" placeholder="Write Saurav &amp; Kunal Are God" rows="4" cols="50"></textarea>
  <input id="submit_btn_id" class="submit_form_field" type="submit" value="Submit">
</div>

@TheDestiny With pleasure :) Can you accept my answer with the check mark on top left ? :) — Elikill58, Mar 14 '23 at 08:14

score 0 · Answer 3 · answered Mar 14 '23 at 08:04

   $('#write_text_id').on('keyup',function(){
        if ($('#write_text_id').val() === "Saurav & Kunal Are God") {
        
          $(".submit_form_field").addClass('item-3');
        }
        else
        {
         $(".submit_form_field").removeClass('item-3');
        }
    });

.item-3 {
  background-color: green;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="test">
    <textarea id="write_text_id" class="textarea small" tabindex="105" placeholder="Write Saurav &amp; Kunal Are God" rows="4" cols="50"></textarea>
    <input id="submit_btn_id" class="submit_form_field" type="submit" value="Submit">
    </div>

If textarea contains this text then run query

3 Answers3