CODEWITHSUNDEEP
javascripthtmlajaxjquery
user2846500
user2846500

Reputation:

Hide & Clear the TextBox when the checkbox is unchecked?

When i check the checkbox the textbox is displayed else it will be in hidden. But the value is not clearing. Help me someone. Thanks in advance

HTML

<div class="munna">                    
    <input id="chk_1"  type="checkbox"  value="1" onClick="document.getElementById('cutting_price').focus();chk_box(this.id);"  onChange="chk_box(this.id)">Cutting
    <div id="chk_1_box" style="display:none ;">
        Price :<input type="text" value="" size="5"  name="cutting_price" id="cutting_price" onChange="post_production()" />            
    </div>
</div>

<div class="munna">                    
    <input id="chk_2"  type="checkbox"  value="1" onClick="document.getElementById('lamination_price').focus();chk_box(this.id);">Lamination
    <div id="chk_2_box" style="display:none;">
        Price :
        <input type="text" size="5" value=""  name="lamination_price" id="lamination_price" onChange="post_production()" />
    </div>
</div>

<div class="munna">                    
    <input id="chk_3"  type="checkbox"  value="1" onChange="chk_box(this.id);" onClick="document.getElementById('die_making_price').focus();chk_box(this.id);">Die Making
    <div id="chk_3_box" style="display:none;">
        Price :
        <input type="text" size="5" value=""  name="die_making_price" id="die_making_price" onChange="post_production()" />
    </div>
</div>

JavaScript

function chk_box(chk)
{
    if(document.getElementById(chk).checked)
    {
        var chk2 = chk+'_box';
        document.getElementById(chk2).style.display='block';
    }
    else
    {
        var chk2 = chk+'_box';
        document.getElementById(chk2).style.display='none';
        document.getElementById(chk2).value='';
    }
}

Upvotes: 0

Views: 7616

Answers (2)

Amit
Amit

Reputation: 15387

Try this

HTML

<div class="munna">                    
<input id="chk_1"  type="checkbox"  value="1" onClick="document.getElementById('cutting_price').focus();" >Cutting
<div id="chk_1_box" style="display:none ;">
Price :<input type="text" value="" size="5"  name="cutting_price" id="cutting_price" onChange="post_production()" />            
</div>
</div>

<div class="munna">                    
<input id="chk_2"  type="checkbox"  value="1" onClick="document.getElementById('lamination_price').focus();">Lamination
<div id="chk_2_box" style="display:none;">
Price :
<input type="text" size="5" value=""  name="lamination_price" id="lamination_price" onChange="post_production()" />
</div>
</div>

<div class="munna">                    
<input id="chk_3"  type="checkbox"  value="1" onClick="document.getElementById('die_making_price').focus();">Die Making
<div id="chk_3_box" style="display:none;">
Price :
<input type="text" size="5" value=""  name="die_making_price" id="die_making_price" onChange="post_production()" />
</div>
</div>

JS

$(function(){
    $("input[type='checkbox']").change(function(){

        if($(this).is(":checked"))
        {
            $("#"+$(this).attr("id")+"_box").show();
        }
        else{
          $("#"+$(this).attr("id")+"_box").find("input[type='text']").val("")  ;
          $("#"+$(this).attr("id")+"_box").hide(); 
        }
    });
});

Demo

Upvotes: 2

niksvp
niksvp

Reputation: 5563

Fetch the textbox element that is nested under div

modify your code to clear the value as

document.getElementById(chk2).getElementsByTagName('input')[0].value='';

Upvotes: 1

Related Questions