Yoshita Arora Yoshita Arora - 1 month ago 16
Javascript Question

How to store Form Data (a Django form) to browser's local storage, using javascript and not Django sessions?

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

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
Comments