CODEWITHSUNDEEP
javascripthtml
QKWS
QKWS

Reputation: 1109

Check if textarea already exist

How to check if a textarea already exists in javascript:

I have a 2 radio button:

YES and NO

if Yes is click it will call a javascript function showTxtbox(); and if no it will call the removeTxtbox();

showTxtBox() - Creates a Textarea if radio button YES is clicked. removeTxtbox() - Remove a Textarea if radio button NO is clicked.

<script type="text/javascript">
    function showTxtbox()
        {
            var p = document.getElementById("txtArea");
            var textarea = document.createElement('textarea');
            textarea.id = "txtRelativeAns";
            textarea.setAttribute('rows', '4');
            textarea.setAttribute('cols', '50');
            p.appendChild(textarea);
        }
    function removeTxtbox()
        {
            var p = document.getElementById("txtArea");
            var textarea = document.getElementById('txtRelativeAns');
            p.removeChild(textarea);
        }

</script>

My problem is, when radio button YES is click twice. It will create 2 textarea.. How can I check if textarea already exist.. then if yes it will no longer create a textarea.

thanks!

Upvotes: 0

Views: 1755

Answers (8)

Hetal Shukla
Hetal Shukla

Reputation: 41

Replace with the following function.

function showTxtbox()
        {
            if($("#txtRelativeAns").length){
                return;
            }
            var p = document.getElementById("txtArea");
            var textarea = document.createElement('textarea');
            textarea.id = "txtRelativeAns";
            textarea.setAttribute('rows', '4');
            textarea.setAttribute('cols', '50');
            p.appendChild(textarea);

        }

Check the example on the following link : http://jsfiddle.net/8UqdV/2/

Upvotes: 3

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Working Demo http://jsfiddle.net/cse_tushar/up3TT/

HTML

<div id="txtArea"></div>
<input type="radio" name="choice" value="yes">Yes
<input type="radio" name="choice" value="no">No

JS

$(document).ready(function () {
    function showTxtbox() {
        var p = document.getElementById("txtArea");
        if (!document.getElementById("txtRelativeAns")) {
            var textarea = document.createElement('textarea');
            textarea.id = "txtRelativeAns";
            textarea.setAttribute('rows', '4');
            textarea.setAttribute('cols', '50');
            p.appendChild(textarea);
        }
    }

    function removeTxtbox() {
        var p = document.getElementById("txtArea");
        var textarea = document.getElementById('txtRelativeAns');
        p.removeChild(textarea);
    }
    $("input[name='choice']").change(function(){
        if($(this).prop("checked") === true){
            if($(this).attr('value') == 'yes'){
                showTxtbox();
            }else if($(this).attr('value') == 'no'){
                removeTxtbox();
            }
        }
    });
});

Upvotes: 2

YD1m
YD1m

Reputation: 5905

Replace some code with jQuery style:

    var p = $("#txtArea");

    function showTxtbox()
    {    
        if($('#txtRelativeAns').length === 0) {
            var new = $('<textarea></textarea>').attr({ 'rows' : '4', 'cols': '50', 'id' : 'txtRelativeAns' });
            p.appendChild(new);
        }
    }

    function removeTxtbox()
    {
        $('#txtRelativeAns').remove();
    }

If you need just hide/show taxtarea, you can create it once on page load with display: hidden style and use .hide() and .show() methods:

    $('<textarea></textarea>')
         .attr({ 'rows' : '4', 'cols': '50', 'id' : 'txtRelativeAns' })
         .appendTo("#txtArea")
         .hide();

function showTxtbox()
{
    $('#txtRelativeAns').show();
{

function removeTxtbox()
{
    $('#txtRelativeAns').hide();
}

Upvotes: 1

Ganesh Rengarajan
Ganesh Rengarajan

Reputation: 2006

Create radio button as Radio button group

<input type="radio" name="radio_group_name" id="radio_group_name" value="Yes" class="valuetext" >Yes
<input type="radio" name="radio_group_name" id="radio_group_name" value="No" class="valuetext" >No

This function can be called on the onClick or the onChange event.

function buttonGroupChange(){
    var radioElements = document.getElementsByName("radio_group_name");
    for(var i = 0; i < radioElements.length; i++){
        if(radioElements[i].checked == true){

          if(radioElements[i].value=="yes")
             {
               //create textarea
             }
          else
             {
               //remove textarea
             }
        }
        else{
            //do something
        }
    }
}

Upvotes: 1

mohkhan
mohkhan

Reputation: 12335

you can say...

if (!document.getElementById('txtRelativeAns') ){
    // Add your textarea
}

Upvotes: 4

FosterZ
FosterZ

Reputation: 3911

$('textarea').length this will give you the count of textarea

Upvotes: 2

OptimusCrime
OptimusCrime

Reputation: 14863

To get number of elements with an id, you can use:

$('#txtArea').length

Upvotes: 2

Maxim Zhukov
Maxim Zhukov

Reputation: 10140

<script type="text/javascript">
    function showTxtbox()
        {
            var p = document.getElementById("txtArea");
            if(!document.getElementById("txtRelativeAns")) {
                var textarea = document.createElement('textarea');
                textarea.id = "txtRelativeAns";
                textarea.setAttribute('rows', '4');
                textarea.setAttribute('cols', '50');
                p.appendChild(textarea);
            }
        }
    function removeTxtbox()
        {
            var p = document.getElementById("txtArea");
            var textarea = document.getElementById('txtRelativeAns');
            p.removeChild(textarea);
        }

</script>

Upvotes: 4

Related Questions