FPU Packet Pickup Form

Return to Financial Peace University Packet Pickup Project.

Below is the form used for the FPUPacketPickup sample project. This was built with bootsnipp form builder. Following the form is an explanation of important items to note.

Note

This file should be located under Admin > Special Content > Text tab, and be named FPUPacketForm.html. It goes under the Text tab because, the HTML tab uses a special editor which will reformat your document and could cause problems. The text tab will remain intact—however you create and format your document.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<form id="wandform" class="form-horizontal">
  <fieldset>
    <!-- Form Name -->
    <legend>Financial Peace University Packet Pickup</legend>

    <!-- Paid Options -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="paidoption">Pay Options</label>
      <div class="col-md-4">
        <div class="radio">
          <label for="paidnochange">
            <input type="radio" name="paidoption" id="paidnochange" value="paidnochange" checked="checked">
            No Change
          </label>
        </div>
        <div class="radio">
          <label for="markpaid">
            <input type="radio" name="paidoption" id="markpaid" value="markpaid">
            Mark Paid
          </label>
        </div>
        <div class="radio">
          <label for="marknotpaid">
            <input type="radio" name="paidoption" id="marknotpaid" value="marknotpaid">
            Mark Not Paid
          </label>
        </div>
      </div>
    </div>

    <!-- Picked Up Options -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="pickedup">Pickup Options</label>
      <div class="col-md-4">
        <div class="radio">
          <label for="pickedup">
            <input type="radio" name="pickedup" id="pickedup" value="pickedup" checked="checked">
            Mark Picked Up
          </label>
        </div>
        <div class="radio">
          <label for="notpickedup">
            <input type="radio" name="pickedup" id="notpickedup" value="notpickedup">
            Mark Not Picked Up
          </label>
        </div>
      </div>
    </div>

    <!-- Clear and Action Buttons -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="clear"></label>
      <div class="col-md-8">
        <button id="clear" name="clear" class="btn btn-default">Clear</button>
        <button id="action" name="action" class="btn btn-success">Action</button>
      </div>
    </div>

    <!-- Wand Target -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="wandtarget">Wand Target</label>
      <div class="col-md-4">
        <input type="hidden" name="pyscript" value="{{pyscript}}" />
        <input id="wandtarget" name="wandtarget" type="text" placeholder="OrgId-PeopleId" 
               class="form-control input-md" 
               value="{{wandtarget}}">
        <span class="help-block">Keep your cursor blinking in this box before you scan your barcode</span>
      </div>
    </div>

    <!-- Notice Area -->
    <div class="form-group">
      <div id="output" class="col-md-4 col-md-offset-4"></div>
    </div>

  </fieldset>
</form>
Lines 12, 18, 24

When using bootsnipp to build this form, pay close attention to the name and id for these various input elements for the Pay Options radio buttons. The name of all three radio buttons is paidoption. The individual ids are paidnochange, markpaid, and marknotpaid. The javascript and python code both use these values.

Lines 37, 43

When using bootsnipp, pay close attention to the name and id for these two input elements for the Pickup Options radio buttons. The name of both radio buttons is pickedup. The individual ids are pickedup and notpickedup. The javascript and python code both use these values.

Lines 54 and 55

When using bootsnipp, make sure the id for these two buttons are correct and correspond to the javascript. The ids are clear and action. The javascript uses these.

Line 63

This line must be added to the code you get from bootsnipp. It is a hidden form element to contain the name of the python script. You see {{pyscript}} which will be replaced with the name of the Python script file. model.Data.pyscript is set internally to the name of the Python Script file. Any time you use a form like this in a project that posts its results, this hidden element is required.

Note

The double curly braces are known as handlebar notations (think of bicycle handle bars).

Handlebars is the library we use to replace values for HTML content.

Anything in the model.Data object is available for use with the Handlebars. In addition to any values you assign to this object, all form variables are posted to this object as well.

Line 64

The name of the input textbox should be wandtarget to match the javascript and the python code that uses this value.

Line 66

The value of the input textbox for the wandtarget is set from the post event with the {{wandtarget}} handlebar directive. model.Data.wandtarget is set when the form is posted by the user.

Lines 71-74

These contain the div which will be used to display any messages you return using the print statement. The div must have an id of output for this to work.

Section to be added:

<!-- Notice Area -->
<div class="form-group">
  <div id="output" class="col-md-4 col-md-offset-4"></div>
</div>