Integrate a multioption dropdown list in calculator Django - python-3.x

Question

I will try to explain this issue the better I can.
So I built a calculator using django. The user can put the desired input, and then he sees all the results in a table, only by pressing the button: 'select'. 
If the user only wants this result, the user see the result output in the table. 
However, if the user selects one of the options presented in the dropdowns, then the result should be different. Meaning that the dropdown list, has specific calculus. 
This is the part that I don't understand,I know that I have to use JS to this, but I don't know in which module this should be added. 
Here is my code:
models.py
class CalcAnalyzer(models.Model):
sequence = models.TextField()
gc_calc = models.CharField(max_length=2000000)
person_of = models.ForeignKey(User,null=True,on_delete=models.CASCADE)
def save(self, *args, **kwargs):# new
if self.sequence != None:
self.gc_calc = gc_calc(self.sequence)
super(CalcAnalyzer,self).save(*args, **kwargs)
def __str__(self):
return self.sequence
class addcalc_1(models.Model):
name_sequence = models.ForeignKey(OligoAnalyzer, on_delete=models.SET_NULL, null=True)
Option1_5 = models.FloatField(default=0)
def save(self, *args, **kwargs):
self.Option1_5 = Option1_5(self.sequence)
class addcalc_3(models.Model):
name_sequence = models.ForeignKey(OligoAnalyzer, on_delete=models.SET_NULL, null=True)
optional_3
def save(self, *args, **kwargs):
self.optional_3 = optional_3(self.sequence)
views.py
def calc_sequence(request):
sequence_items=Calanalisis.objects.filter(person_of=request.user)
form=AddSequenceForm(request.POST)
if request.method=='POST':
form=AddSequenceForm(request.POST)
if form.is_valid():
profile=form.save(commit=False)
profile.person_of = request.user
profile.save()
return redirect('calc_sequence')
else:
form=AddSequenceForm()
myFilter=SequenceFilter(request.GET,queryset=sequence_items)
sequence_items=myFilter.qs
context = {'form':form,'sequence_items':sequence_items,'myFilter':myFilter}
return render(request, 'Add_Calc.html', context)
How can I insert this in the view.py? If the user selects the 5 or 3 box, the result should appear in the table bellow, if not, the result will stay the same.

Answer 1

Sofia, hi!
To subscribe on the dropdown's events you need a piece of javascript.
HTML and static files
So, you need to attach your new script.js file to your project. You can check what you need to serve static files (it's not a "one-click" solution, especially if you want to deploy your code for external users) docs
When your static file is ready you can include it in the front-end.
Let's imagine that you have index.html where your controls live.
Add the link to the file in your html (before closing </body> tag):
<script type="text/javascript" src="/static/script.js"></script>
static.js
This example shows you how to make an event listener and listen to the dropdown changes.
Use values from the selected options of your dropdowns to make a URL for the request. Ex. /calc/api/?param=1, so you will be able to catch param=1 in your view and react properly.
dropdown example:
<select id="param" name="here_name">
<option value="">Select …</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
API
Create an additional view to handle the requests that will be sent on events. Make it accessible with urls.py.
Use the proper URL to the endpoint in the javascript. Here you can find how to make requests from the JS to your Django back-end.
The param that was chosen will be in the request.GET of your view (if you've chosen GET method to send the data). So make a proper answer and send it back to the JS. You can use JSON format for this.
Parse the answer in the JS and change your page with updated information.