Wsrtjtyk

I have a ChoiceField with 2 options and another CharField for key. I need the key field to only be editable or visible when the ChoiceField is set to private. My form in forms.py looks like this:

class CBNewForm(forms.Form):

CHOICES = (('public', 'Public',), ('private', 'Private',))

title = forms.CharField()

category = forms.ChoiceField(choices=[(x,x) for x in CBData.getAllcategory()])

visibility = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES)

key = forms.CharField(required=False)



def __init__(self, *args, **kwargs):

    super(CBNewForm, self).__init__(*args, **kwargs)

    self.initial['visibility'] = 'public'

So I need the 'key' to only be visible/editable if the visibility = 'private'.

I've looked at the comments here and they suggest that this needs to be done in javascript so I'm hoping someone can show me how to add javascript to my .html files and excatly what i'd need.

My html file is very simple:

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}

<h1>New Page</h1>

<form action="" method="post">

    {% csrf_token %}{{ form|crispy }}

    <button class="btn btn-info ml-2" type="submit">Update</button>

</form>

{% endblock content %}

Rendered html:

    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">





        <a class="navbar-brand dropdown-toggle" href="#" id="mainMenu" data-toggle="dropdown" aria-haspopup="true"

            aria-expanded="false">CorkBoard</a>

        <div class="dropdown-menu dropdown-menu-left" aria-labelledby="mainMenu">

            <a class="dropdown-item" href="/">Home</a>

            <a class="dropdown-item" href="/corkboards/dashboard/">Dashboard</a>

            <a class="dropdown-item" href="/corkboards/new/">New CorkBoard</a>

            <a class="dropdown-item" href="/corkboards/stats/">CorkBoard Stats</a>

            <div class="dropdown-divider"></div>

            <a class="dropdown-item" href="/corkboards/pin/4/">Pin Detail 4 test</a>

            <a class="dropdown-item" href="/corkboards/detail/3/">CB Detail 3 test</a>

        </div>



        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"

                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse">



        <ul class="navbar-nav ml-auto">

            <li class="nav-item">

                <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-toggle="dropdown" aria-haspopup="true"

                    aria-expanded="false">abcd</a>

                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">

                    <a class="dropdown-item" href="/users/password_change/">Change Password</a>

                    <div class="dropdown-divider"></div>

                    <a class="dropdown-item" href="/users/logout/">Log Out</a>

                </div>

            </li>

        </ul>



        </div>

    </nav>



    <div class="container">



    <h1>New corkboard</h1>

    <form action="" method="post">

        <input type="hidden" name="csrfmiddlewaretoken" value="I4sPqg8hnl7EfXgLAv0Mj0wPXtcjk4roADGAjjHx06TeovySQ0ENCcXEcWieS6KM">



<div id="div_id_title" class="form-group"> <label for="id_title" class="col-form-label  requiredField">

                Title<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="title" class="textinput textInput form-control" required id="id_title"> </div> </div> <div id="div_id_category" class="form-group"> <label for="id_category" class="col-form-label  requiredField">

                Category<span class="asteriskField">*</span> </label> <div 



    class=""> <select name="category" class="select form-control" id="id_category"> <option value="Education">Education</option> <option value="People">People</option> <option value="Sports">Sports</option> <option value="Other">Other</option> <option value="Architecture">Architecture</option> <option value="Travel">Travel</option> <option value="Pets">Pets</option> <option value="Food &amp; Drink">Food &amp; Drink</option> <option value="Home &amp; Garden">Home &amp; Garden</option> <option value="Photography">Photography</option> <option value="Technology">Technology</option> <option value="Art">Art</option>



    </select> </div> </div> <div id="div_id_visibility" class="form-group"> <label for="id_visibility_0" class="col-form-label  requiredField">

                    Visibility<span class="asteriskField">*</span> </label> <div class=""> <div class="form-check"> <label for="id_id_visibility_0_1" class="form-check-label"> <input type="radio" class="form-check-input" checked="checked" name="visibility" id="id_id_visibility_0_1" value="public" >

            Public

        </label> </div> <div class="form-check"> <label for="id_id_visibility_0_2" class="form-check-label"> <input type="radio" class="form-check-input" name="visibility" id="id_id_visibility_0_2" value="private" >

            Private

        </label> </div> </div> </div> <div id="div_id_password" class="form-group"> <label for="password_text" class="col-form-label ">

                Password

            </label> <div class=""> <input type="text" name="password" id="password_text" class="textinput textInput form-control"> </div> </div>



        <button class="btn btn-info ml-2" type="submit">Update</button>

    </form>



    <script>

        document.getElementById('private_box').onchange = function () {

            document.getElementById('password_text').disabled = !this.checked;

        };

    </script>



    </div>

From your rendered html, I think adding this to the end of your html template (or in a {% block page_js %} ) should give you the desired behavior:

<script

            src="https://code.jquery.com/jquery-3.3.1.min.js"

            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

            crossorigin="anonymous">

</script>

<script>

    $(document).ready(function () { //function will wait for the page to fully load before executing



        $("input[type=radio][name=visibility]").change(function () { //specifying onchange function for input of type radio and name visibility

            console.log("Change!")

            if (this.value == "private") { //if the new value is private

                $("#password_text").prop('disabled', true);//would recommend readonly instead of disable for form integrity

                console.log("Disabling");





            }else{ //if the new value is anything else

                    $("#password_text").prop('disabled', false);

                    console.log("Enabling");

                }

        });

    });

</script>

The first script will include jQuery, which is a popular library that you can also download and use (I use the CDN from here to include it in the example)

The second script is more-or-less explained in the comments!