If textarea contains this text then run query - Jquery

TheDestiny
March 14, 2023
271 views
3 votes
3 Answers

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.

Answers

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>

   $('#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>

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.

Please signup or login to give your own answer.

Click here to cancel reply.

If textarea contains this text then run query – Jquery

Answers