Struggling to incorporate hidden and visible features using Django framework

Question

Struggling to incorporate hidden and visible features using Django framework

One of my unique functionalities is that I contain a radio button in my form. If the user clicks "Yes," an error message will be displayed on the screen indicating that this is not the correct place to submit data, and suggesting that they visit another website.

However, if the user clicks "No," all other fields in the form should become visible and mandatory.

One issue I currently face is that when the user clicks "No" and attempts to submit the form without filling in all the required fields, the form gets reloaded and the fields are hidden once again. While the data is not saved in the database, upon clicking "No" again, the fields are displayed with errors highlighted.

The main concern is that when the user clicks "No" and all fields are displayed, I do not want them to be hidden again until the form is successfully submitted or the user clicks "Yes." I am seeking a solution that will only reload the form when all fields are correctly filled and submitted to the database.

Below, I have included the code I have written so far for better understanding:

1) models.py

 // Code for models.py

2) forms.py

 // Code for forms.py

3) Javascript / jQuery logic

 // Code for Javascript / jQuery logic

Any assistance or advice on this matter would be greatly appreciated!

javascript jquery css django python-3.x

Answer 1

Answer №1

If you want dynamic logic after your template has loaded, you will need to use JavaScript instead of Django. Django processes your request once and sends it to your web browser, so if you only use Django to show and hide things, you will have to reload your page each time.

Create a JavaScript function (or use jQuery if you're a beginner, as it is easier to grasp) to implement the logic for showing or hiding inputs.

https://www.w3schools.com/jS/default.asp

https://www.w3schools.com/Jquery/default.asp

EDIT: To prevent your form from continuously sending data to the backend without validation, you should stop the default action. Here's how you can do it:

$("#btn_submit").click((e) => {
    e.preventDefault(); // This will prevent the button from submitting
    ... // Validate your logic here
    $("#form_id").submit()
});

When it comes to hiding and showing elements, it's quite simple to achieve:

$("#chk_a").click(function(e){
    if(this.checked) {
        $(".group_b").hide(); // hide everything from group B

        $("#input_a").show();
        $("#button_a").show();
        $("#somethingelse_a").show();
    }
});

// Same logic for group B elements

<input id="chk_a">
<input id="input_a" class="group_a">
<input id="button_a" class="group_a">
<input id="somethingelse_a" class="group_a">

<input id="chk_b">
<input id="input_b" class="group_b">
<input id="button_b" class="group_b">
<input id="somethingelse_b" class="group_b">

Answer 2

If you want dynamic logic after your template has loaded, you will need to use JavaScript instead of Django. Django processes your request once and sends it to your web browser, so if you only use Django to show and hide things, you will have to reload your page each time.

Create a JavaScript function (or use jQuery if you're a beginner, as it is easier to grasp) to implement the logic for showing or hiding inputs.

https://www.w3schools.com/jS/default.asp

https://www.w3schools.com/Jquery/default.asp

EDIT: To prevent your form from continuously sending data to the backend without validation, you should stop the default action. Here's how you can do it:

$("#btn_submit").click((e) => {
    e.preventDefault(); // This will prevent the button from submitting
    ... // Validate your logic here
    $("#form_id").submit()
});

When it comes to hiding and showing elements, it's quite simple to achieve:

$("#chk_a").click(function(e){
    if(this.checked) {
        $(".group_b").hide(); // hide everything from group B

        $("#input_a").show();
        $("#button_a").show();
        $("#somethingelse_a").show();
    }
});

// Same logic for group B elements

<input id="chk_a">
<input id="input_a" class="group_a">
<input id="button_a" class="group_a">
<input id="somethingelse_a" class="group_a">

<input id="chk_b">
<input id="input_b" class="group_b">
<input id="button_b" class="group_b">
<input id="somethingelse_b" class="group_b">

Answer 3

Answer №2

I successfully addressed my concern by introducing an additional hidden field into the solution implementation. Feel free to refer to the following steps for the resolution:

1) To include a hidden field in forms.py, use the code snippet below:

source = forms.CharField(max_length=50, widget=forms.HiddenInput(), required=False)

2) Revised JavaScript / jQuery logic:

<script>
    $(document).ready(function () {
        //hide all
        if($("#id_source").val()!="postback" ) {
            $(".hidden-md").hide();
            $(".hidden-lg").hide();
            $(".hidden-xs").hide();
            $("#id_source").val("postback");
        }

        if ($('#id_field2_0').is(':checked') || $("input[name='field2']").is(':checked') == false) {
            $(".hidden-md").hide();
            $(".hidden-lg").hide();
            $(".hidden-xs").hide();
            $("input[name='field5']").prop('checked', false);
            $("input[name='field7']").prop('checked', false);   
        }

        if ($("input[name='field5']").is(':checked') == false || $('#id_field5_1').is(':checked')) {
            $(".hidden-lg").hide(); 
            $("#id_field6").html('');
        }

        if ($("input[name='field7']").is(':checked') == false || $('#id_field7_1').is(':checked')) {
            $(".hidden-xs").hide(); 
            $("#id_field8").html('');
        }

        $("input[name='field2']").click(function () {//change event on radio button
            if (this.value == 'No') {
                $(".hidden-md").show();     
            }
            else {
                $(".hidden-md").hide();
                $(".hidden-lg").hide();
                $(".hidden-xs").hide(); 
                $("input[name='field5']").prop('checked', false);
                $("input[name='field7']").prop('checked', false);
            }
        });

         $("input[name='field5']").click(function () {//click event on radio button
            if (this.value == 'Yes') {
                $(".hidden-lg").show();
            }
            else {
                $(".hidden-lg").hide();
                $("#id_field6").html('');
            }
        });

        $("input[name='field7']").click(function () {//click event on radio button
            if (this.value == 'Yes') {
                $(".hidden-xs").show();
            }
            else {
                $(".hidden-xs").hide();
                $("#id_field8").html('');
            }
        });
    });
</script>

By utilizing the above approach, I have effectively integrated hide and show capabilities using jQuery and Django. Despite the form being reloaded, this method resolves my issue and meets the desired functionality requirements.

Best regards,

Amey Kelekar

Answer 4

I successfully addressed my concern by introducing an additional hidden field into the solution implementation. Feel free to refer to the following steps for the resolution:

1) To include a hidden field in forms.py, use the code snippet below:

source = forms.CharField(max_length=50, widget=forms.HiddenInput(), required=False)

2) Revised JavaScript / jQuery logic:

<script>
    $(document).ready(function () {
        //hide all
        if($("#id_source").val()!="postback" ) {
            $(".hidden-md").hide();
            $(".hidden-lg").hide();
            $(".hidden-xs").hide();
            $("#id_source").val("postback");
        }

        if ($('#id_field2_0').is(':checked') || $("input[name='field2']").is(':checked') == false) {
            $(".hidden-md").hide();
            $(".hidden-lg").hide();
            $(".hidden-xs").hide();
            $("input[name='field5']").prop('checked', false);
            $("input[name='field7']").prop('checked', false);   
        }

        if ($("input[name='field5']").is(':checked') == false || $('#id_field5_1').is(':checked')) {
            $(".hidden-lg").hide(); 
            $("#id_field6").html('');
        }

        if ($("input[name='field7']").is(':checked') == false || $('#id_field7_1').is(':checked')) {
            $(".hidden-xs").hide(); 
            $("#id_field8").html('');
        }

        $("input[name='field2']").click(function () {//change event on radio button
            if (this.value == 'No') {
                $(".hidden-md").show();     
            }
            else {
                $(".hidden-md").hide();
                $(".hidden-lg").hide();
                $(".hidden-xs").hide(); 
                $("input[name='field5']").prop('checked', false);
                $("input[name='field7']").prop('checked', false);
            }
        });

         $("input[name='field5']").click(function () {//click event on radio button
            if (this.value == 'Yes') {
                $(".hidden-lg").show();
            }
            else {
                $(".hidden-lg").hide();
                $("#id_field6").html('');
            }
        });

        $("input[name='field7']").click(function () {//click event on radio button
            if (this.value == 'Yes') {
                $(".hidden-xs").show();
            }
            else {
                $(".hidden-xs").hide();
                $("#id_field8").html('');
            }
        });
    });
</script>

By utilizing the above approach, I have effectively integrated hide and show capabilities using jQuery and Django. Despite the form being reloaded, this method resolves my issue and meets the desired functionality requirements.

Best regards,

Amey Kelekar

Struggling to incorporate hidden and visible features using Django framework

Answer №1

Answer №2

Similar questions

Obtaining a roster of file names with the help of the Glob

What is the recommended approach for embedding scripts within Angular templates?

Strategies for iterating over an array in React with TypeScript

Functionality limited to Firefox browser

Django view returns incorrect HTML template after receiving AJAX GET request from jQuery

Enhancing fancybox with dynamic scrollbars as the window size changes

Php/JavaScript Error: Identifier Not Found

Invoking Jquery on the server side in an asp.net environment

The phrase 'nodemon' is not identified as a valid cmdlet, function, script file, or executable program

Interacting with a non-stringified object displayed in the browser console using TestCafe

When attempting to load the table from JSON, the error message "Cannot read property 'name' of null" occurs in the fooplugins/Footable plugin

how can I use jQuery to disable clickable behavior in HTML anchor tags?

How can I schedule a recurring task in celery once a task is completed?

Sorting columns containing English, Japanese entries, and null values using a customized sorting algorithm in MUI Data Grid is a straightforward process

Update the label for the weekday on Material UI picker

Issue detected in JSONP request EXCLUSIVELY BY Firefox extension

Discover instances of a string within an array using JQuery

Using an AJAX request to edit a record directly without the need for a

Is there an optimal method for transforming HTML to PostScript in Java?

Display the full price when no discount is available, but only reveal the discounted price when Vue.js is present