[FIXED] Handling many text input fields in Django?

Issue

I'm using Django 3 (still) on my resume website. I'm working on a Sudoku Solver as an example personal project, so I have 81 text input fields in a grid. I'm trying to find the least painful way to handle up to 81 inputs in Django, so I can pass the inputs to my Python function(s) that handle the sudoku logic. How would I go about getting the user input into my views.py and handling all of them?

I'm wanting to take whichever cells in which the user inputs numbers, process them through my Python function(s), and then send the full puzzle back into the cells once processed. I'm not super experienced with forms and form data in HTML just yet. For reference, here is my HTML that handles the grid. I know I'll need to add in maximum text length for the input fields, to ensure the user can only enter 1 digit per cell.

<section class="resume-section">
    <div class="d-lg-grid" id="grid">
        <div id="grid-1">
            <input type="text" size="3" id="cell1">
            <input type="text" size="3" id="cell10">
            <input type="text" size="3" id="cell19">
            <input type="text" size="3" id="cell28">
            <input type="text" size="3" id="cell37">
            <input type="text" size="3" id="cell46">
            <input type="text" size="3" id="cell55">
            <input type="text" size="3" id="cell64">
            <input type="text" size="3" id="cell73">
        </div>
        <div id="grid-2">
            <input type="text" size="3" id="cell2">
            <input type="text" size="3" id="cell11">
            <input type="text" size="3" id="cell20">
            <input type="text" size="3" id="cell29">
            <input type="text" size="3" id="cell38">
            <input type="text" size="3" id="cell47">
            <input type="text" size="3" id="cell56">
            <input type="text" size="3" id="cell65">
            <input type="text" size="3" id="cell74">
        </div>
        <div id="grid-3">
            <input type="text" size="3" id="cell3">
            <input type="text" size="3" id="cell12">
            <input type="text" size="3" id="cell21">
            <input type="text" size="3" id="cell30">
            <input type="text" size="3" id="cell39">
            <input type="text" size="3" id="cell48">
            <input type="text" size="3" id="cell57">
            <input type="text" size="3" id="cell66">
            <input type="text" size="3" id="cell75">
        </div>
        <div id="grid-4">
            <input type="text" size="3" id="cell4">
            <input type="text" size="3" id="cell13">
            <input type="text" size="3" id="cell22">
            <input type="text" size="3" id="cell31">
            <input type="text" size="3" id="cell40">
            <input type="text" size="3" id="cell49">
            <input type="text" size="3" id="cell58">
            <input type="text" size="3" id="cell67">
            <input type="text" size="3" id="cell76">
        </div>
        <div id="grid-5">
            <input type="text" size="3" id="cell5">
            <input type="text" size="3" id="cell14">
            <input type="text" size="3" id="cell23">
            <input type="text" size="3" id="cell32">
            <input type="text" size="3" id="cell41">
            <input type="text" size="3" id="cell50">
            <input type="text" size="3" id="cell59">
            <input type="text" size="3" id="cell68">
            <input type="text" size="3" id="cell77">
        </div>
        <div id="grid-6">
            <input type="text" size="3" id="cell6">
            <input type="text" size="3" id="cell15">
            <input type="text" size="3" id="cell24">
            <input type="text" size="3" id="cell33">
            <input type="text" size="3" id="cell42">
            <input type="text" size="3" id="cell51">
            <input type="text" size="3" id="cell60">
            <input type="text" size="3" id="cell69">
            <input type="text" size="3" id="cell78">
        </div>
        <div id="grid-7">
            <input type="text" size="3" id="cell7">
            <input type="text" size="3" id="cell16">
            <input type="text" size="3" id="cell25">
            <input type="text" size="3" id="cell34">
            <input type="text" size="3" id="cell43">
            <input type="text" size="3" id="cell52">
            <input type="text" size="3" id="cell61">
            <input type="text" size="3" id="cell70">
            <input type="text" size="3" id="cell79">
        </div>
        <div id="grid-8">
            <input type="text" size="3" id="cell8">
            <input type="text" size="3" id="cell17">
            <input type="text" size="3" id="cell26">
            <input type="text" size="3" id="cell35">
            <input type="text" size="3" id="cell44">
            <input type="text" size="3" id="cell53">
            <input type="text" size="3" id="cell62">
            <input type="text" size="3" id="cell71">
            <input type="text" size="3" id="cell80">
        </div>
        <div id="grid-9">
            <input type="text" size="3" id="cell9">
            <input type="text" size="3" id="cell18">
            <input type="text" size="3" id="cell27">
            <input type="text" size="3" id="cell36">
            <input type="text" size="3" id="cell45">
            <input type="text" size="3" id="cell54">
            <input type="text" size="3" id="cell63">
            <input type="text" size="3" id="cell72">
            <input type="text" size="3" id="cell81">
        </div>
    </div>
</section>

Solution

Modify your input field by adding name attribute to input element:

sudoku.html:

<form method="POST">
{% csrf_token %}
...
<input type="text" size="3" id="cell1" name="grid">
...
</form>

views.py:

def sudoku(request):
    grid = []
    if request.method == 'POST':
        grid = request.POST.getlist('grid')
    context = {'grid': grid}
    return render(request, 'sudoku.html' context=grid)

grid is a list of 81 elements. Now you can handle the interaction with simple HTML using form element or use ajax to query your view method.

Answered By - Corralien