如何使用 javascript 而不是 Django 会话将表单数据（Django 表单）存储到浏览器的本地存储？

Question

I want to take the data from the user through a form (a Django form) and store it in the browser's local storage, using javascript and without using Django sessions.

My code looks like:

./forms.py :

class digitize(forms.Form):

    medicinename = forms.CharField(label='Medicinename', max_length=100)
    quantity = forms.CharField(label='Quantity', max_length=100)

./e_commerce.html :

<form id="digitizer_form" role="form" action="/MediciansDigitizer/Presc/" method="post" enctype="multipart/form-data">

   {% csrf_token %}

   <h3 class="prod_title">Add Detail</h3>

   {{iform.as_table}}{{ dform.as_p }}

   <div class="">
   <button type="Submit" class="btn btn-default btn-lg">Digitize</button>
   </div>

</form> 

<script>

        window.onload = function() {

        // Check for LocalStorage support.
        if (localStorage) {

            // Add an event listener for form submissions
            document.getElementById('digitizer_form').addEventListener('submit', function() {

            // Get the value of the MedicineName field :

Now, this is where I need help. Here I want to give in the 'MedicineName' 
field of the form defined above, So that
I can get the MedicineName entered by the user from the form
and store it in the browser storage. 
The logic should look something like this:

            // get the value of the MedicineName so that
               I can store it in a variable like this:

             var Medicine = document.getElementById('MedicineName').value; 

//but because I am using a django form, and linking it 
  in the e_commerce.html template through {%csrf_token%} ,
  {{iform.as_table}} and {{ dform.as_p }} 
  and have not assigned any id ('MedicineName') to any element (as 
  I didn't create any form element manually inside the html template, 
but has made a "form class" in forms.py), I can't follow
  this approach and so I am stuck here because I don't know how to 
  do it the other way round.

            // and then Save the variable in localStorage
              like this :
            localStorage.setItem('Medicine', MedicineName);
            });

          }

        }
</script>

So, how to use the MedicineName entered by the user from the Django form inside the javascript in the html template, to store the name in my browser's local storage through javascript?

It would be greatly appreciated if anyone could help me with this. Thanks in advance!

Answer 1

There is an error in your form rendering

<form id="digitizer_form" role="form" action="/MediciansDigitizer/Presc/" method="post" enctype="multipart/form-data">

   {% csrf_token %}

   <h3 class="prod_title">Add Detail</h3>

   {{iform.as_table}}

   <div class="">
   <button type="Submit" class="btn btn-default btn-lg">Digitize</button>
   </div>

</form> 

<form id="other_form" role="form" method="post" >

   {{ dform.as_p }}

   <div class="">
   <button type="Submit" class="btn btn-default btn-lg">Digitize</button>
   </div>

</form> 

These are two forms so they should be rendered as two different forms. Else you will find that server side form validation does not work. If you need one HTML form with fields from two django forms, have one django form extend the other.

Then since you have a form element named medicinename rendering the form will result in an HTML input element with an id of id_medicinename thus you can access it as

 document.getElementById('id_medicinename').value