access form elements to render to the current html template
Date: April 5th 2016
Last updated: April 5th 2016
I have created a simple formula to calculate the volume of a surfboard. The input is length, width and thickness see analysis/analysis/mulitple regression. I want to provide a webpage where a user can enter the details and get an immediate response rather than being redirected to another page. My solution was to use JavaScript.
Urls.py
Provide the url for my test calculation page
from django.conf.urls import url
from . import views
app_name = 'surferprofile'
urlpatterns = [
url(r'^test/$', views.test_calculation_page, name='calcvolume'),
]
views.py
Simple request sent from urls.
def test_calculation_page(request):
return render(request, 'surferprofile/calcvolumeform.html')
html template (calcvolumeform.html)
This document has two parts to it. The top half is html and the second half is javascript. This html template extends base.html. Note that this template contains three input fields and NO submit button.
The submit button has been changed to a calculate button which calls my javascript functions. When the button is clicked, javascript gets the current text inside each input box (length width and thickness).
As the input fields are text and ask the user for fractions, I have added two functions that parse the data into type numeric. These functions are just basic ifelse statements. The result is an estimate of volume which is returned to the html tag "demo".
{% extends 'surferprofile/base.html' %}
{% block title_block %} Calc Vol {% endblock %}
{% block body_block %}
<div>
<h2>Surferprofile <i>(Testing 1, 2, 3 ...)</i></h2>
<br>
<h3>
To calculate board volume, enter length, width and thickness.
</h3>
Example entries:
<ul>
<li>Length <b>6 4</b></li>
<li>Width <b>18 1/2</b></li>
<li>Thickness <b>2 1/4</b></li>
</ul>
<br>
<form id="frm1" method="post">{% csrf_token %}
<p>
<div>
<label for="id_length">Length:</label>
<input id="len" type="text" maxlength="100"/>
</div>
</p>
<p>
<div>
<label for="id_width">Width:</label>
<input id="wid" type="text" maxlength="100"/>
</div>
</p>
<p>
<div>
<label for="id_thickness">Thickness:</label>
<input id="thick" type="text" maxlength="100"/>
</div>
</p>
</form>
<br>
<br>
</div>
<p>Click "Calculate" to display board volume </p>
<button onclick="myFunction()">Calculate</button>
<p id="demo"></p>
<!-- JAVASCRIPT -->
<script>
// USED TO EVALUATE WIDTH AND THICKNESS MEASUREMENTS
// e.g. form dom_object = document.getElementById("frm1");
// e.g. string_id = thick ---><input id="thick" type="text"/>
function parse_strings(y){
// if the dom object looks like 6 1/2
if(y.length > 1){
var z = y[1].split('/');
var v = (parseInt(y[0]) + (parseInt(z[0]) / parseInt(z[1])));
return v
}
else{
var z = y[0].split('/');
// parsed dom_object is a fraction like 1/2
if(z.length > 1){
var v = (parseInt(z[0]) / parseInt(z[1]));
return v
}
// parsed dom object is just an integer like 6
else{
var v = (parseInt(y[0]));
return v
}
}
}
// PARSE LENGTH MEASUREMENTS
function parse_length(y){
if(y.length > 1){
var v = (parseInt(y[0]) + (parseInt(y[1]) / 12));
return v
}
else{
var v = (parseInt(y[0]));
return v
}
}
function myFunction() {
// get the dom form object
var x = document.getElementById("frm1");
// Extract the values for each measurement
// Also split each string on white space
var l = x.len.value.split(" ");
var w = x.wid.value.split(" ");
var t = x.thick.value.split(" ");
// parse the form input boxes
var len = parse_length(l)
var width = parse_strings(w)
var thickness = parse_strings(t)
// calculate volume
var volume = -74.679 + -1.8222 + 6.284218 * len
+ 2.877587 * width
+ 4.978518 * thickness
// return the volume to the html tag "demo"
document.getElementById("demo").innerHTML = volume;
}
</script>
{% endblock %}
Navigate to 127.0.0.1:8080/test
Useful resources