Added multiple name fields

edivorce/apps/core/static/js/ajax.js

@@ -4,7 +4,7 @@ var ajaxOnChange = function () {
     // show/hide additional information if needed
     reveal(el);
     var question = el.prop('name');
-    var value = getValue(el, question, '');
+    var value = getValue(el, question);
     var isValid = true;
 
     // Check if date is in valid format DD/MM/YYYY

edivorce/apps/core/static/js/controllers.js

@@ -68,14 +68,15 @@ var radioWithTextboxControl = function(el){
 
     // when textbox is clicked, update associated radio button response with its value
     else if (el.is(".other-textbox")){
-        var radioTextbox = el.siblings(".radio_with_textbox");
+        var radioTextbox = el.parents().find(".radio_with_textbox");
         ajaxCall(radioTextbox.prop('name'), radioTextbox.val());
     }
 };
 
 // Get value from various input fields
 // If input is checkbox, get all checked items' value and separate them by ;
-var getValue = function(el, question, value){
+var getValue = function(el, question){
+    var value = [];
     // if checkbox, get list of values.
     if (el.is("input[type=checkbox]")){
         // special behaviour for question children_financial_support
@@ -83,10 +84,18 @@ var getValue = function(el, question, value){
             childSupportCheckboxControl(el);
         }
         $(".checkbox-group").find("input[type=checkbox]:checked").each(function(){
-            value += $(this).val() + '; ';
+            value.push($(this).val());
         });
         // to remove last space and semi-colon
-        return value.slice(0, -2);
+        return JSON.stringify(value);
+    }
+    else if (question == "other_name_you" || question == "other_name_spouse"){
+        var aliasType;
+        $('#other_names_fields').find("input[type=text]").each(function () {
+            aliasType = $(this).siblings(".alias-type").val();
+            value.push([aliasType, $(this).val()]);
+        });
+        return JSON.stringify(value);
     }
     else{
         return el.val();

edivorce/apps/core/static/js/main.js

@@ -1,36 +1,49 @@
 // Reveal sections as the form is loading
-$('input:radio, input:checkbox').each(function() {
-  if($(this).is(':checked')) {
+$('input:radio, input:checkbox').each(function () {
+    if ($(this).is(':checked')) {
         reveal($(this));
         // apply css class to big round buttons
         if ($(this).parent().hasClass('btn-radio')) {
             $(this).parent().addClass('active');
         }
-  }
+    }
 });
 
 $(function () {
     $('[data-toggle="tooltip"]').tooltip({trigger: 'click'});
 
     // when user click textbox beside radio button, check the associated radio button
-    $(".other-textbox").on("click focus", function(){
-       $(this).siblings(".radio_with_textbox").prop('checked', true);
+    $(".other-textbox").on("click", function () {
+        $(this).parents().find(".radio_with_textbox").prop('checked', true);
     });
 
     $("input[type=radio], input[type=checkbox], input[type=text], .response-textarea, .response-dropdown").on("change", ajaxOnChange);
 
+    // Add name button adds new input field for adding other name
+    $("#btn_add_other_names").on('click', function () {
+        $('#other_names_fields').append($('#other_names_group').children().clone(true));
+    });
+
+    // Delete button will remove field and update user responses
+    $(".btn-delete").on('click', function () {
+        // store neighbour input text to trigger change event to update list after delete
+        var neighbour = $(this).parent('div').prev().find("input:text");
+        $(this).parent('div').remove();
+        neighbour.triggerHandler('change');
+    });
+
     // Configuration for datepicker
     $(".date-picker-group").datepicker({
-            format: "dd/mm/yyyy",
-            endDate: "today",
-            autoclose: true
+        format: "dd/mm/yyyy",
+        endDate: "today",
+        autoclose: true
     });
 
     // On step_03.html, update text when user enters separation date
-    $("#separated_date").on("change", function(){
+    $("#separated_date").on("change", function () {
         $("#separation_date_span").text(" on " + $(this).val());
         // if separation date is less than one year, show alert message
-        if (checkSeparationDateLessThanYear($(this).val())){
+        if (checkSeparationDateLessThanYear($(this).val())) {
             $('#separation_date_alert').show();
         }
         else {
@@ -41,8 +54,8 @@ $(function () {
 
 // Expand More Information boxes
 // TODO this is fragile and really just a place holder until the sidebar is revised
-$( "#more_information" ).click(function() {
-    if($(this).hasClass("active")) {
+$("#more_information").click(function () {
+    if ($(this).hasClass("active")) {
         $(this).removeClass("col-md-4 active");
         $(".container-wrapper .col-md-8").addClass("col-md-offset-2");
     } else {

edivorce/apps/core/templates/partials/alias_field.html

@@ -0,0 +1,11 @@
+{% load input_field %}
+<div style="display: inline-flex">
+    <select class="alias-type" name={{name}}>
+        <option value="also known as" {% if alias_type == 'also known as' %} selected {% endif %}>Also known as</option>
+        <option value="often called" {% if alias_type == 'often called' %} selected {% endif %}>Often called</option>
+    </select>
+    {% input_field type="text" name=name value=value class="form-block input-wide response-textbox" %}
+    {% if delete_button == "true" %}
+        <button class="btn-delete">Delete</button>
+    {% endif %}
+</div>

edivorce/apps/core/templates/question/02_claimant.html

@@ -79,14 +79,27 @@
 
                     <div id="enter_name" hidden>
                         <h3>Please enter the name</h3>
-                        {% input_field type="text" name="other_name_you" class="form-block input-wide response-textbox" %}
-                        <input type="button" value="Add name"/>
+                        <!-- This is used for adding a new other name field when add button is clicked -->
+                        <div id="other_names_group" hidden>
+                            {% include "partials/alias_field.html" with name="other_name_you" value=' ' delete_button="true" %}
+                        </div>
+                        <div id="other_names_fields">
+                            {% if other_name_you %}
+                                {% multiple_values_to_list source=other_name_you as values %}
+                                {% for alias_type, value in values %}
+                                    {% include "partials/alias_field.html" with name="other_name_you" alias_type=alias_type value=value delete_button="true" %}
+                                {% endfor %}
+                            {% else %}
+                                 {% include "partials/alias_field.html" with name="other_name_you" %}
+                            {% endif %}
+                        </div>
+                        <input type="button" id="btn_add_other_names" value="Add name" data-add-for="you"/>
                     </div>
                 </div>
 
                 <div>
                     <h3>What was your last name when you were born?</h3>
-                    {% input_field type="text" name="last_name_born_you" class="form-block input-wide response-textbox" %}
+                    <div>{% input_field type="text" name="last_name_born_you" class="form-block input-wide response-textbox" %}</div>
                     <p>This is often referred to as Family name or Surname</p>
                 </div>
 
@@ -113,7 +126,7 @@
                     <h3>How long have you lived in British Columbia?</h3>
                     <p>Please select one</p>
                     <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="lived_in_bc_you" value="Since birth" %}Since birth</label></div>
-                    <div class="radio"><label>{% input_field type="radio" class="radio-with-other radio_with_textbox" name="lived_in_bc_you" value="Moved to British Columbia on" %}Moved to British Columbia on <span class="date-picker-group">{% input_field type="text" name="moved_to_bc_date_you" id="moved_date" class="date-picker-group date-picker other-textbox input-inline" tabindex="-1" placeholder="DD/MM/YYYY" %} <i class="fa fa-calendar circle" aria-hidden="true"></i></span></label></div>
+                    <div class="radio"><label>{% input_field type="radio" class="radio-with-other radio_with_textbox" name="lived_in_bc_you" value="Moved to British Columbia on" %}Moved to British Columbia on <span class="date-picker-group">{% input_field type="text" name="moved_to_bc_date_you" id="moved_date" class="date-picker other-textbox input-inline" tabindex="-1" placeholder="DD/MM/YYYY" %} <i class="fa fa-calendar circle" aria-hidden="true"></i></span></label></div>
                     <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="lived_in_bc_you" value="Do not live in British Columbia" %}Do not live in British Columbia</label></div>
 
                     <p>In order to apply for a divorce in British Columbia, you or your spouse must have been a regular resident in B.C (the legal term is ordinarily resident

edivorce/apps/core/templates/question/03_respondent.html

@@ -80,8 +80,21 @@
 
                     <div id="enter_name" hidden>
                         <h3>Please enter the name</h3>
-                        {% input_field type="text" name="other_name_spouse" class="form-block input-wide response-textbox" %}
-                        <input type="button" value="Add name"/>
+                        <!-- This is used for adding a new other name field when add button is clicked -->
+                        <div id="other_names_group" hidden>
+                            {% include "partials/alias_field.html" with name="other_name_spouse" value=' ' delete_button="true" %}
+                        </div>
+                        <div id="other_names_fields">
+                            {% if other_name_spouse %}
+                                {% multiple_values_to_list source=other_name_spouse as values %}
+                                {% for alias_type, value in values %}
+                                    {% include "partials/alias_field.html" with name="other_name_spouse" alias_type=alias_type value=value delete_button="true" %}
+                                {% endfor %}
+                            {% else %}
+                                 {% include "partials/alias_field.html" with name="other_name_spouse" value='' %}
+                            {% endif %}
+                        </div>
+                        <input type="button" id="btn_add_other_names" value="Add name" data-add-for="spouse"/>
                     </div>
 
                 </div>

edivorce/apps/core/templatetags/input_field.py

@@ -1,4 +1,5 @@
 from django import template
+import json
 
 register = template.Library()
 
@@ -20,14 +21,17 @@ def input_field(context, type, name='', value='', **kwargs):
         tag.append('</textarea>')
     else:
         # set initial value for textbox
-        if type == "text":
+        if type == "text" and value == '':
             value = context.get(name, '')
         tag = ['<input type="' + type + '" name="' + name + '" value="' + value + '"']
 
         tag = additional_attributes(tag, **kwargs)
 
         # check if buttons should be selected by default
-        value_list = context.get(name, '').split('; ')
+        if type == 'checkbox':
+            value_list = json.loads(context.get(name, '[]'))
+        else:
+            value_list = context.get(name, '')
 
         if value in value_list and value != '':
             tag.append(' checked')
@@ -50,4 +54,10 @@ def check_list(source, value):
     """
     Check if given value is in the given source
     """
-    return value in source.split('; ')
+    return value in json.loads(source)
+
+
+@register.assignment_tag
+def multiple_values_to_list(source):
+    json_list = json.loads(source)
+    return json_list