Hide/show fields based on a choice-CodePudding

I am new to js (job description didn't mention it, but can't complain as I am second year cs student), and I am trying to show appropriate fields based on the option which user chooses.

That's how it looks

There are two options - "linear" and "non-linear". The second one should display cutoff, before cutoff, after cutoff, ID, and ADD NON-LINEAR ROW button. The first one should not display anything except the first row.

Select part:

<div >
    {{render_field(calculation_form.calculation_method,) }}
</div>

Whole html part:

<div >
                    <div >
                        <div >
                            {{render_field(calculation_form.calculation_name,) }}
                        </div>
                        <div >
                            {{render_field(calculation_form.calculation_date,,
                            value=current_project['project_date']|format_datetime)}}
                        </div>
                        <div >
                            {{render_field(calculation_form.calculation_method,) }}
                        </div>
                        <div >
                          {{render_field(calculation_form.calculation_type,) }}
                        </div>
                        <div class='col-xl-3'>
                          <form id="cutoff_form">
                            <label for="cutoff">Cutoff</label><br>
                            <input id ='cutoff', , placeholder="0.983">
                          </form>
                        </div>
                        <div class='col-xl-3'>
                          <form id="before_cutoff_form">
                            <label for="before_cutoff">Before cutoff</label><br>
                            <input id ='before_cutoff', , placeholder="0.6">
                          </form>
                        </div>
                        <div class='col-xl-3'>
                          <form id="after_cutoff_form">
                            <label for="after_cutoff">After cutoff</label><br>
                            <input id ='after_cutoff', , placeholder="0.4">
                          </form>
                        </div>
                        <div class='col-xl-3'>
                          <form id="row_id_form">
                            <label for="row_id">Row ID</label><br>
                            <input id ='row_id', , placeholder="115">
                          </form>
                        </div>
                        <div >
                          <input id='calculation_add_extra_args', , type="button", value="ADD NON-LINEAR ROW">
                        </div>
                    </div>

Any tip or link to similiar thread would be appreciated, as I couldn't find anything myself.

CodePudding user response：