CODEWITHSUNDEEP
javascripttextarea
Nicoletta
Nicoletta

Reputation: 57

Check if a textarea is empty, if not remove modal

my attempt in creating a modal containing a text area didn't go as planned.

I have this modal:

<div id="myModal" class="modal">

And it contains textarea and button:

 <div class="modal-content"> 
   <p>Write down a memory</p>
   <textarea id="txt"></textarea>
   <button class="btn">send</button>
 </div>
 </div>

I wanted this modal to appear when you open the page and I managed to do so. Next step was to detect if the textarea is empty. If empty I wanted the send button to do nothing, if text was written in the textarea I wanted the modal to close and display a message on the page.

window.addEventListener('load', 
function() {
var modal = document.getElementById("myModal");

var text;
var content = document.getElementById('txt').value;
modal.style.display = "block";

function send(){
if(content.length < 1){
 console.log ("empty");
}
 else {
  text = "thank you";
  $(document).on("click",".btn", function(){
    $('#myModal').hide();
    });
   }
document.getElementById("demo").innerHTML = txt; 
}
});


<div class="message" id="demo"><p></p></div>

what am i doing wrong?

Upvotes: 0

Views: 458

Answers (2)

SMAKSS
SMAKSS

Reputation: 10520

You are mixing things up together here. You need to consider some notes on your code.

  • First of all, please avoid using plain javascript and jQuery together. This is not very wise and suitable to use both plain javascript and jQuery together in the same function. So if you try to use jQuery please stick with its rules and selectors.
  • You are defining a function called send() to do some jobs after you clicking send button but never invoking it. Keep in mind to invoke a function you always need to invoke it somewhere with parentheses. The best way to do this in your particular case is to set an event listener to your button to make sure every time it gets clicked it will invoking your function. You just trying to do so but in the wrong place.
  • As @full-stack pointed out, you are getting the wrong element within your javascript selector. So since there is no element with id txt exists in your DOM you will face a reference error.

So with noting these points out your final code should be something like this:

$(document).on("click", ".btn", function() {
  var modal = $("#myModal");
  var content = $('#addMemory').val();

  if (content.length < 1) {
    console.log("empty");
  } else {
    modal.hide();
    console.clear();
    $("#demo p")[0].innerHTML = "thank you";
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Write down a memory</p>
    <textarea id="addMemory"></textarea>
    <button class="btn">send</button>
  </div>
</div>

<div class="message" id="demo">
  <p></p>
</div>

Upvotes: 0

Ben
Ben

Reputation: 624

1) As spotted in the comments, document.getElementById('txt') doesn't exist, you need to replace it by document.getElementById('addMemory').

2) Where you put it, the value of the textBox is only saved once, on load, but you want to check it when the user clicks on the "send" button, so you have to move it inside the send function:

function send() {
    var content = document.getElementById('addMemory').value;
    // [...]
}

3) Your send function will never be called if you don't set it anywhere, so you need to call it whenever a button is clicked:

<button class="btn" onclick="send()">send</button>

4) When you are in the send function, then the button has been clicked, so you don't need to add a click listener on document, you are already inside, you need either to close the pop-up or not.

function send(){
    var content = document.getElementById('addMemory').value;
    if(content.length < 1){
        console.log ("empty");
    }
   else {
       text = "thank you";
       $('#myModal').hide();
   }
}

5) Lastly, you call document.getElementById("demo").innerHTML = txt; outside of the send function, so it will be called only once, on load, and in addition txt doesn't exist. I guess you want to save it when you hide the modal, so we have to put it inside the send function:

function send(){
    var content = document.getElementById('addMemory').value;
    if(content.length < 1){
        console.log ("empty");
    }
    else {
       text = "thank you";
       $('#myModal').hide();
       document.getElementById("demo").innerHTML = content; 
    }
}

6) Since the send function will be called when the user clicks on the button, you don't need the load event listener anymore.

And there you have it: https://jsfiddle.net/6gu71sj2/

Upvotes: 1

Related Questions