join working but needs improvement (form with title)

rowers/templates/workout_join_select.html

@@ -0,0 +1,164 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load rowerfilters %}
+
+{% block title %}Workouts{% endblock %}
+
+{% block content %}
+
+<script>
+  function toggle(source) {
+  checkboxes = document.querySelectorAll("input[name='workouts']");
+  for(var i=0, n=checkboxes.length;i<n;i++) {
+       checkboxes[i].checked = source.checked;
+  }
+ }
+</script>
+<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
+<script>
+  $(function() {
+  
+  // Get the form fields and hidden div
+  var modality = $("#id_modality");
+  var hidden = $("#id_waterboattype");
+
+  
+  // Hide the fields.
+  // Use JS to do this in case the user doesn't have JS 
+  // enabled.
+
+  hidden.hide();
+
+
+  
+  // Setup an event listener for when the state of the 
+  // checkbox changes.
+  modality.change(function() {
+    // Check to see if the checkbox is checked.
+    // If it is, show the fields and populate the input.
+  // If not, hide the fields.
+    var Value = modality.val();
+    if (Value=='water') {
+  // Show the hidden fields.
+  hidden.show();
+  } else {
+  // Make sure that the hidden fields are indeed
+  // hidden.
+  hidden.hide();
+      
+      // You may also want to clear the value of the 
+      // hidden fields here. Just in case somebody 
+      // shows the fields, enters data to them and then 
+      // unticks the checkbox.
+      //
+      // This would do the job:
+      //
+      // $("#hidden_field").val("");
+    }
+  });
+
+
+  });
+
+
+
+</script>
+
+
+<div class="grid_12 alpha">
+    {% include "teambuttons.html" with teamid=team.id team=team %}
+</div>
+<div class="grid_12 alpha">
+    <h3>{{ team.name }} Team Workouts</h3>
+</div>
+<div class="grid_12 alpha">
+  <div class="grid_6 alpha">
+
+    {% if team %}
+    <form enctype="multipart/form-data" action="/rowers/workouts-join-select/team/{{ team.id }}/" method="post">
+    {% else %}
+    <form enctype="multipart/form-data" action="/rowers/workouts-join-select/" method="post">
+      {% endif %}
+      <div class="grid_4 alpha">
+      <table>
+        {{ dateform.as_table }}
+      </table>
+      {% csrf_token %}
+      </div>
+  <div class="grid_2 omega">
+    <input name='daterange' class="button green" type="submit" value="Submit">	
+  </div>
+    </form>
+    {% if team %}
+    <form enctype="multipart/form-data" action="/rowers/workouts-join-select/team/{{ team.id }}/" method="post">
+    {% else %}
+    <form enctype="multipart/form-data" action="/rowers/workouts-join-select/" method="post">
+      {% endif %}
+      <div class="grid_4 alpha">
+      <table>
+        {{ modalityform.as_table }}
+      </table>
+      {% csrf_token %}
+      </div>
+  <div class="grid_2 omega">
+    <input name='modalityform' class="button green" type="submit" value="Submit">	
+  </div>
+    </form>
+  </div>
+<div class="grid_5 prefix_1 omega">
+  {% if team %}
+  <form id="searchform" action="/rowers/workouts-join-select/team/{{ team.id }}/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}"
+        method="get" accept-charset="utf-8">
+    {% else %}
+  <form id="searchform" action="/rowers/workouts-join-select/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}"
+        method="get" accept-charset="utf-8">
+{% endif %}    
+    <div class="grid_3 prefix_1 alpha">
+      <input class="searchfield" id="searchbox" name="q" type="text" placeholder="Search">
+    </div>
+    <div class="grid_1 omega">
+      <button class="button blue small" type="submit">
+        Search
+      </button>
+    </div>
+  </form>
+</div>
+
+</div>
+
+
+<form enctype="multipart/form-data" action="/rowers/workouts-join" method="post">
+  <div id="workouts_table" class="grid_8 alpha">
+
+
+  {% if workouts %}
+  
+  <input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
+
+  <table width="100%" class="listtable">
+    {{ form.as_table }}
+  </table>
+
+{% else %}
+<p> No workouts found </p>
+{% endif %}
+</div>
+  <div id="form_settings" class="grid_4 alpha">
+    <p><b>Warning: You are on an experimental part of the site. Use at your own risk.</b></p>
+    <p>Select two or more workouts on the left,
+      and press submit</p>
+  <div class="grid_1 prefix_2 suffix_1">
+    <p>
+  {% csrf_token %}
+      <input name='workoutselectform' class="button green" type="submit" value="Submit">
+      </p>
+  </div>
+  <div class="grid_4">
+    <p>You can use the date and search forms above to search through all
+      workouts from this team.</p>
+    </div>
+</div>
+</form>
+
+
+{% endblock %}