CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4782429
user4782429

Reputation:

Hide or Show div based on input field value

I'm trying to hide a div based on the input value. From the database, I generate many documents, I have a hidden input field with id=form_type which can have 2 different values: typeA and typeB. Documents that are displayed some have value typeA and some value typeB.

In my case if input with id=form_type, class="form-type" have value typeA I want to hide div with id=hide else if form_type have value typeB I don't want that div to be displayed.

I tried this code but it only takes value only for the first input with id form_type , for example if in first document value=typeA , it takes for all documents like that even that in other documents value can be different:

   var hide_fiels = $('.form-type').attr("value");           
        if (hide_fiels == "typeA"){ 
            $('#hide').css('display','none');
        }
        else{ 
            $('#hide').css('display','block');
        }

My html code looks something like this: 

{% if doc_report_all.results %}
{% for doc_report in doc_report_all.results%}
    <table align="center" class="table table-striped " >
    <input type="hidden"  class="form-type" id="form_type" value="{{ doc_report.form_type }}">
    <tbody> 
    <tr> <td>  //code </td></tr>
    <tr> <td> //code </td></tr>
    <tr> <td> //code </td></tr>
    <tr> <td> //code </td></tr>
    <div id="hide" style="display: none;"> 
    <tr> <td> //code </td></tr>
    <tr> <td> //code </td></tr>
    </div>
    </body                            

{% endfor %}
{% endif %}

Upvotes: 0

Views: 4133

Answers (2)

ZiNNED
ZiNNED

Reputation: 2650

The most important thing is you should make use of classes instead of ids when handling multiple forms where elements would otherwise have the same id. Also, you should move your hidden input outside of the table element, since this is not considered valid HTML. Point 3 is you cannot have a div element inside a tbody element. Only tr is allowed.

To make things easier you can wrap the whole table and hidden input inside a wrapper div for easier looping.

Then your HTML should look something like this:

{% if doc_report_all.results %}
{% for doc_report in doc_report_all.results%}
<div class="form">
    <input type="hidden" class="form_type" value="{{ doc_report.form_type }}">
    <table align="center" class="table table-striped " >
        <tbody> 
            <tr> <td> </td></tr>
            <tr> <td> </td></tr>
            <tr> <td> </td></tr>
            <tr> <td> </td></tr>
            <tr class="toggle" style="display: none;"> <td> </td></tr>
            <tr class="toggle" style="display: none;"> <td> </td></tr>
            <tr class="toggle" style="display: none;"> <td> </td></tr>
        </tbody>
    </table>
</div>
{% endfor %}
{% endif %}

And your JavaScript could be like this:

$(".form").each(function()
{
    if ($(this).find(".form_type").val() == "typeA")
        $(this).find(".toggle").hide();
    else
        $(this).find(".toggle").show();
});

Upvotes: 2

Martin at Mavrix
Martin at Mavrix

Reputation: 254

You can’t have multiple elements with the same id.

See spec: http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

Upvotes: 0

Related Questions