Hiding a div using javascript

Question

My HTML Code:

<div class="input-main">
    <div class="block">
        <div class="input-quest">What is your server OS</div>
        <div class="input-resp">
            <input onClick="os_others();" type="radio" name="button2" value="Yes" <?php if(!isset($_POST['button2']) || (isset($_POST['button2']) && $_POST['button2'] == 'Yes')) echo ' checked="checked"'?> checked /><label>Others</label>   
            <input onClick="os_hpux();" type="radio" name="button2" value="No" <?php if(isset($_POST['button2']) && $_POST['button2'] == 'No')  echo ' checked="checked"';?> /><label>HP-UNIX</label>
        </div>  
        </div>  

    <div id="lunidlist" >
        <div class="block-with-text-area">
        <div class="input-quest-with-text-area">Enter your LUN IDs in Hex(one ID in one line)</div>
        <div class="input-resp-with-text-area"><span><textarea  class="textarea" id="lunids" name="lunids" type="text"><?php if(isset($_POST['lunids'])) { echo htmlentities ($_POST['lunids']); }?></textarea></span> </div>   
        </div>
    </div>


<div id="hpux-details-lunlist"style="display:none;" >
    <div class="block-no-height">
            <div class="sub_headings">Enter your vbus,target and LUN ids(one in one line)</div>
        <div class="hupux-wrap-textarea">
            <div class="hpuxleft">      
                <div class="input-quest-hpux-vbus-textarea">Vbus<br/>( 0 - F )</div>
                <div class="input-resp-hpux-vbus-textarea"><span><textarea  class="textarea" id="vbus-id-list" name="vbus-id-list" type="text"><?php if(isset($_POST['vbus-id-list'])) { echo htmlentities ($_POST['vbus-id-list']); }?></textarea></span> </div>   
                </div>      

            <div class="hpuxright">
                <div class="input-quest-hpux-lun-textarea">LUN ID(In Hex)<br/>( 0 - 7 )</div>
                <div class="input-resp-hpux-lun-textarea"><span><textarea  class="textarea" id="lun-id-list" name="lun-id-list" type="text"><?php if(isset($_POST['lun-id-list'])) { echo htmlentities ($_POST['lun-id-list']); }?></textarea></span> </div>    
            </div>

            <div class="hpuxcenter">    
                <div class="input-quest-hpux-target-textarea">Target<br/>( 0 - F )</div>
                <div class="input-resp-hpux-target-textarea"><span><textarea  class="textarea" id="target-id-list" name="target-id-list" type="text"><?php if(isset($_POST['target-id-list'])) { echo htmlentities ($_POST['target-id-list']); }?></textarea></span> </div> 
            </div>
        </div>
    </div>
</div>
    <div id="error1" style="display:none;"></div>

</div>

In above code, I have 3 textareas in div id hpux-details-lunlist. If the count of lines in these three textareas are not equal the code will give an error message Mismatch between VBUS ID, Target ID and LUN ID Counts. This error message is echoing to a another div error1

javascript:

function os_hpux()  {
    $('#lunids').slideUp("fast");
    $('#hpux-details-lunlist').slideDown("fast");
    document.getElementById("lunids").value=""; 
    $('#lunids').attr("disabled","disabled");
    $('#hpux-details-lunlist').removeAttr("disabled");
}

function os_others()    {
    $('#lunids').slideDown("fast");
    $('#lunids').removeAttr("disabled");
    $('#hpux-details-lunlist').slideUp("fast");
    $('#hpux-details-lunlist').attr("disabled","disabled");
    document.getElementById("vbus-id-list").value="";
    document.getElementById("lun-id-list").value="";
    document.getElementById("target-id-list").value="";
}

function fun_vcount() {
    vcount = 0;
    var lines = $("#vbus-id-list").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > 0) vcount++;
    }
}

function fun_tcount() {
    tcount = 0;
    var lines = $("#target-id-list").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > 0) tcount++;
    }
}

function fun_lcount() {
    lcount = 0;
    var lines = $("#lun-id-list").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > 0) lcount++;
    }
}

$("#vbus-id-list").keyup(function () {
    fun_vcount()
    fun_tcount()
    fun_lcount()
    var message;

    if(((vcount ==tcount) && (vcount == lcount)) || (!$("#vbus-id-list").val()) || (!$("#target-id-list").val()) || (!$("#lun-id-list").val()) || ($("#hpux-details-lunlist").attr("disabled") == "disabled")) {
        $("#error1").slideUp("fast");
    }

    else{
        message ="Mismatch between VBUS ID, Target ID and LUN ID Counts";
        $("#error1").slideDown("fast");
        document.getElementById('error1').innerHTML=message;
    }
});

$("#target-id-list").keyup(function () {
    fun_vcount()
    fun_tcount()
    fun_lcount()
    var message;
    if(((vcount ==tcount) && (vcount == lcount)) || (!$("#vbus-id-list").val()) || (!$("#target-id-list").val()) || (!$("#lun-id-list").val()) || ($("#hpux-details-lunlist").attr("disabled") == "disabled")) {
        $("#error1").slideUp("fast");
    }

    else{
        message ="Mismatch between VBUS ID, Target ID and LUN ID Counts";
        $("#error1").slideDown("fast");
        document.getElementById('error1').innerHTML=message;
    } 
});

$("#lun-id-list").keyup(function () {
    fun_vcount()
    fun_tcount()
    fun_lcount()
    var message;
    if(((vcount ==tcount) && (vcount == lcount)) || (!$("#vbus-id-list").val()) || (!$("#target-id-list").val()) || (!$("#lun-id-list").val()) || ($("#hpux-details-lunlist").attr("disabled") == "disabled")) {
        $("#error1").slideUp("fast");
    }

    else{
        message ="Mismatch between VBUS ID, Target ID and LUN ID Counts";
        $("#error1").slideDown("fast");
        document.getElementById('error1').innerHTML=message;
    }   
});

The issue I am facing :

I am able display the error code for the line count mismatch between textareas vbus-id-list, target-id-list and lun-id-list. But when when I am trying to hide these textareas using the first radio button (on selection of os_others(), hiding the hpux-details-lunlist) I am able to hide the textarea, but the error message is not hiding. It will still show the message Mismatch between VBUS ID, Target ID and LUN ID Counts

If you see my above code, I have included ($("#hpux-details-lunlist").attr("disabled") == "disabled")) and if this true hiding the div error1. But this is not working for me. the error message keep showing there ? How can I hide that ?

Please correctly indent your code! It's hard to read.

ComFreek
– ComFreek

2013-10-18 16:55:10 +00:00
Commented Oct 18, 2013 at 16:55 — ComFreek
– ComFreek, Commented Oct 18, 2013 at 16:55
You should indent your JS, with 2 (or 4) spaces.

dezman
– dezman

2013-10-18 17:06:40 +00:00
Commented Oct 18, 2013 at 17:06 — dezman
– dezman, Commented Oct 18, 2013 at 17:06

iambriansreed · Accepted Answer · 2013-10-18 17:20:12Z

1

Change:

($("#hpux-details-lunlist").attr("disabled") == "disabled"))

to:

$("#hpux-details-lunlist").prop("disabled")

The .prop() method should be used to get/set disabled instead of the .attr() method.

Bad: $('#hpux-details-lunlist').attr("disabled","disabled");

Good: $('#hpux-details-lunlist').prop("disabled",true);

Bad: $('#lunids').removeAttr("disabled");

Good: $('#lunids').prop("disabled", false);

There are actually a few more issues in your code that should be altered.

Source: http://api.jquery.com/prop/

edited Oct 18, 2013 at 17:20

answered Oct 18, 2013 at 17:12

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

acr Over a year ago

It giving me error Uncaught TypeError: Object #<Object> has no method 'prop' on console

iambriansreed Over a year ago

@acr .prop() was added to jQuery in version 1.6. You should be using an updated version.

acr Over a year ago

I have updated the jQuery to the latest version. Now I am not getting any errors in console, but the error1 still showing up when I select other option

iambriansreed Over a year ago

I noted you have quite a few more issues - more best practice kinds of things but without an adequate code sampling which can duplicate your errors I can't help.

Community · Accepted Answer · 2017-05-23 10:31:46Z

1

I guess that it is because you use attr instead of prop :

if( ... || $("#hpux-details-lunlist").prop("disabled"))

See for example this answer : https://stackoverflow.com/a/5876747/1127669 and see http://api.jquery.com/prop/ for reference.

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Oct 18, 2013 at 17:09

Samuel Caillerie

8,2652 gold badges29 silver badges34 bronze badges

Collectives™ on Stack Overflow

Hiding a div using javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related