CODEWITHSUNDEEP
jqueryhtml
sanjana
sanjana

Reputation: 85

how to stop displaying textarea if the previous text area is empty?

I have a div that is displaying textareas onclick.

I want it to:

Html codde:

    <div class= "flex-container">    
        <div id= "cardarea" class ="parent2">
            <span><b id ="cardtitle">Stuff To Try (this is a list)</b>
   </span>
            <span>
          <i class ="fa fa-ellipsis-h" title ="List Actions" tabindex="0" 
     data-trigger ="focus" data-toggle="popover" ></i>
            </span>
            <div id="popover-content" style="display:none;">
                    <ul style ="margin:0; padding:0; list-style: none;" 
      class ="pop-over-list" >
                        <li >
                            <a id = "newcard" href="#" onclick="addcard()" >
                            <b style ="color: #444444">Add Card...</b>
                            </a>

                       </li>
         </ul>
         </div>
         </div>

My jQuery code:

   function addcard() {

  var counter = 0;

  var newTextBoxDiv = $(document.createElement('textarea'))
    .attr("id", 'TextBoxDiv' + counter);
  var button = $(document.createElement('button'));

  newTextBoxDiv.css("margin-top", "6px");
  newTextBoxDiv.css("width", "210px");
  newTextBoxDiv.css("margin-left", "8px");
  newTextBoxDiv.css("margin-bottom", "6px");
  newTextBoxDiv.css("border-radius", "5px");
  newTextBoxDiv.appendTo("#cardarea").insertAfter('#cardtitle');
  button.appendTo("#cardarea").insertAfter(newTextBoxDiv);
  button.css("margin-left", "8px");
  button.css("height", "30px");
  button.css("width", "55px");
  button.css("margin-bottom", "6px");
  button.addClass("btn btn-success");
  button.text("Add");
  button.css("font-weight", "bold");
  //button.appendTo("#cardarea").insertAfter(" <span class='glyphicon 
  glyphicon - remove '</span>");

  if ($(newTextBoxDiv).val().length != 0) {
    alert("hello1");
  } else if ($(newTextBoxDiv).val().length === 0) {
    $('#newcard').hide();
  }
}

Upvotes: 0

Views: 377

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157364

Your code is pretty messy. You are using jQuery but not in the jQuery way. It looks like you are mixing vanilla JavaScript and jQuery. Also, you are appending a lot of CSS using jQuery, if you want to style it, style it using CSS. As far as the issue goes, you want to append a new textarea element only if the previous one has few characters in that.

So I've wrote some code from scratch as yours was very messy. Here, before I add a new textarea, I select the last appended textarea using wrapper.find('textarea').last().val().length, if it returns more than 0, it will append a new textarea else it will just ignore.

var wrapper = $('#show-textarea');
$('#add-textarea').on('click', function() {
  if(wrapper.find('textarea').last().val().length) {
    wrapper.append('<textarea></textarea>');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-textarea">
  <textarea></textarea>
</div>
<input type="button" id="add-textarea" value="Add Textarea">

Note: Am not using .trim() here, but I would recommend using it. If you don't, user can create a new textarea by adding a blank space in the previous textarea element and it will happily return the length of 1.

Upvotes: 2

Dipak Prajapati
Dipak Prajapati

Reputation: 528

// Global variable so you can check length of previous textarea
var counter =0;
function addcard() {  
if(counter>0){
// Checkfor previous textarea
var oldValue=$('#TextBoxDiv'+counter).val();
//Check for null or empty
if(!oldValue){
return;
}
}
var newTextBoxDiv = $(document.createElement('textarea')) .attr("id", 'TextBoxDiv' + counter); var button = $(document.createElement('button')); newTextBoxDiv.css( "margin-top","6px"); newTextBoxDiv.css("width","210px"); newTextBoxDiv.css( "margin-left","8px"); newTextBoxDiv.css( "margin-bottom","6px"); newTextBoxDiv.css( "border-radius","5px"); newTextBoxDiv.appendTo("#cardarea").insertAfter('#cardtitle'); button.appendTo("#cardarea").insertAfter(newTextBoxDiv); button.css("margin-left","8px"); button.css("height","30px"); button.css("width","55px"); button.css( "margin-bottom","6px"); button.addClass("btn btn-s`enter code here`uccess"); button.text("Add"); button.css("font-weight","bold"); //button.appendTo("#cardarea").insertAfter(" <span class='glyphicon glyphicon-remove '</span>"); 
counter++;
 }

Here when addcard funtion is call its first check for function is call for first time then no need to check for previous textarea and add new textarea otherwise it will check for previous textarea is empty or null if its is then exit from function otherwise add neww

Upvotes: 0

Mittal Patel
Mittal Patel

Reputation: 2762

Pass the "counter" from where "addcard" is being called. Maintain it's value on the global level. 

function addcard(counter) {

    var oldTextBoxDiv = $("#TextBoxDiv" + counter);
    if (oldTextBoxDiv.val().length != 0) {
        var newTextBoxDiv = $(document.createElement('textarea')).attr("id", 'TextBoxDiv' + counter);
        var button = $(document.createElement('button'));

        newTextBoxDiv.css("margin-top", "6px");
        newTextBoxDiv.css("width", "210px");
        newTextBoxDiv.css("margin-left", "8px");
        newTextBoxDiv.css("margin-bottom", "6px");
        newTextBoxDiv.css("border-radius", "5px");
        newTextBoxDiv.appendTo("#cardarea").insertAfter('#cardtitle');
        button.appendTo("#cardarea").insertAfter(newTextBoxDiv);
        button.css("margin-left", "8px");
        button.css("height", "30px");
        button.css("width", "55px");
        button.css("margin-bottom", "6px");
        button.addClass("btn btn-success");
        button.text("Add");
        button.css("font-weight", "bold");
        button.appendTo("#cardarea").insertAfter(" <span class='glyphicon glyphicon - remove '</span>");

       // Increase the value of counter
       counter++;
    }
    else
    {
        alert("Please enter the data into the previous text area");
    }
}

Upvotes: 0

Related Questions