EDIT: PROBLEM SOLVED. MY SAVE BUTTON TYPE WAS BUTTON, WHILE IT SHOULD HAVE BEEN SUBMIT
EDIT: Using V2.0

Greetings!

I have a form in a modal window. This form is my databound form. I have all things in place just as defined in the couchcms databound form tutorial. But when i click "Save" to save the form, nothing happens.
How can I submit the form.

Here is the code:
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Add - Employees/Members' clonable='1'>
      <cms:editable name='dp' allowed_ext='jpg, jpeg, png, gif' max_size='2048' type='securefile' />
      <cms:ignore><cms:editable name='' label='' type='' /></cms:ignore>
      <cms:editable name='fname' label='First Name' type='text' />
      <cms:editable name='lname' label='Last Name' type='text' />
      <cms:editable name='designation' label='Designation' type='text' />
      <cms:ignore><cms:editable name='dob' label='Date of Birth' type='text' /></cms:ignore>
      <cms:ignore><cms:editable name='doa' label='Date of Anniversary' type='text' /></cms:ignore>
      <cms:editable name='mobofc' label='Mobile (Official)' type='text' />
      <cms:editable name='mobpers' label='Mobile (Personal)' type='text' />
      <cms:editable name='llofc' label='Landline (Office)' type='text' />
      <cms:editable name='llresi' label='Landline (Residence)' type='text' />
      <cms:editable name='webofc' label='Website (Official)' type='text' />
      <cms:editable name='webpers' label='Website (Personal)' type='text' />
      <cms:editable name='addofc' label='Address (Office)' type='textarea' height='110' />
      <cms:editable name='addresi' label='Address (Residence)' type='textarea' height='110' />
</cms:template>
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>TDirectory - Employees/ Members</title>
      <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
      <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" href="genxcoders-custom/css/font-awesome.min.css" />
      <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">-->
      <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
      <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
        <link rel="stylesheet" href="genxcoders-custom/genxcoders.css">
        <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
        <link rel="stylesheet" href="genxcoders-custom/lightbox.min.css">
      <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
   </head>
   <!--
      BODY TAG OPTIONS:
          =================
          Apply one or more of the following classes to get the
          desired effect
          |---------------------------------------------------------|
          | SKINS         | skin-blue                               |
          |               | skin-black                              |
          |               | skin-purple                             |
          |               | skin-yellow                             |
          |               | skin-red                                |
          |               | skin-green                              |
          |---------------------------------------------------------|
          |LAYOUT OPTIONS | fixed                                   |
          |               | layout-boxed                            |
          |               | layout-top-nav                          |
          |               | sidebar-collapse                        |
          |               | sidebar-mini                            |
          |---------------------------------------------------------|
   -->
   <body class="hold-transition skin-blue sidebar-mini">
      <div class="wrapper">
         <!-- Main Header -->
         <header class="main-header">
            <!-- Logo -->
            <a href="index2.html" class="logo">
               <!-- mini logo for sidebar mini 50x50 pixels -->
               <span class="logo-mini"><b>T</b>D</span>
               <!-- logo for regular state and mobile devices -->
               <span class="logo-lg"><b>T</b>Directory</span>
            </a>
            <!-- Header Navbar -->
            <nav class="navbar navbar-static-top" role="navigation">
               <!-- Sidebar toggle button-->
               <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                  <span class="sr-only">Toggle navigation</span>
               </a>
               <!-- Navbar Right Menu -->
               <!-- Navbar Right Menu -->
               <div class="navbar-custom-menu">
                  <ul class="nav navbar-nav">
                     <!-- User Account Menu -->
                     <li class="dropdown user user-menu">
                        <!-- Menu Toggle Button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                           <!-- The user image in the navbar-->
                           <img src="dist/img/TDirectoryLogo.png" class="user-image" alt="User Image">
                           <!-- hidden-xs hides the username on small devices so only the image appears. -->
                           <span class="hidden-xs">aashish.handa@genxcoders.in</span>
                        </a>
                        <ul class="dropdown-menu">
                           <!-- The user image in the menu -->
                           <li class="user-header">
                              <img src="dist/img/TDirectoryLogo.png" class="img-circle" alt="User Image">
                              <p>
                                 Administrator
                                 <small>Account Validity: Oct 31, 2016</small>
                              </p>
                           </li>
                           <!-- Menu Footer-->
                           <li class="user-footer">
                              <div class="pull-left">
                                 <a href="profile.html" class="btn btn-default btn-flat"><i class="fa fa-user-secret"></i> Profile</a>
                              </div>
                              <div class="pull-right">
                                 <a href="#" class="btn btn-default btn-flat"><i class="fa fa-sign-out"></i> Logout</a>
                              </div>
                           </li>
                        </ul>
                     </li>
                                   <!-- Logout Button -->
                     <!--<li>
                        <a href="#" data-toggle="control-sidebar" alt="Logout"><i class="fa fa-sign-out"></i></a>
                     </li>-->
                  </ul>
               </div>
            </nav>
         </header>
         <!-- Left side column. contains the logo and sidebar -->
         <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
               <!-- Sidebar user panel (optional) -->
               <div class="user-panel">
                  <div class="pull-left image">
                     <img src="dist/img/TDirectoryLogo.png" class="img-circle" alt="User Image">
                  </div>
                  <div class="pull-left info">
                     <p>Welcome Admin!</p>
                     <!-- Status -->
                     <a><!--<i class="fa fa-circle text-success"></i>--> <div id="date-display" class="white-text pull-left"></div></a>
                  </div>
               </div>
               <!-- Sidebar Menu -->
               <ul class="sidebar-menu">
                  <li class="header">MAIN NAVIGATION</li>
                  <!-- Optionally, you can add icons to the links -->
                  <li><a href="index.html"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
                  <li><a href="departments.html"><i class="fa fa-folder"></i> <span>Department List</span></a></li>
                  <li class="active"><a href="employees-members.html"><i class="fa fa-users"></i> <span>Employees/ Members List</span></a></li>
                  <li><a href="notices.html"><i class="fa fa-file-text"></i> <span>Notice List</span></a></li>
                  <li><a href="profile.html"><i class="fa fa-user-secret"></i> <span>Profile Settings</span></a></li>
               </ul><!-- /.sidebar-menu -->
            </section><!-- /.sidebar -->
         </aside>

         <!-- Content Wrapper. Contains page content -->
         <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
               <h1>
                  Employees/ Members
                  <small>Add the list of your people</small>
               </h1>
            </section>
                   
                    <!-- Universal Search -->
                  <section class="content-header">
               <h1>
                  <small>Search all employees/ members</small>
               </h1>
                         <div class="content">
                            <div class="col-md-12">
                               <div class="row">
                                      <div class="example" id="multiple-datasets">
                                             <div class="demo">
                                                  <div class="input-group">
                                                     <input class="typeahead form-control" type="text" placeholder="Search - Employees/ Members">
                                                       <span class="input-group-btn">
                                                            <button class="btn btn-primary" style="margin-top: -5px;" type="button">Search</button>
                                                       </span>
                                                  </div>                             
                                         </div>
                                        </div>
                                   </div>         
                              </div>
                         </div>                         
            </section>
                   
                    <div class="divider"></div>
                   
                    <section class="content-header">
               <h1>
                            Employees/ Members - List View
                  <small>Add, edit, delete employees/ members</small>
               </h1>
                         <div class="content" style="min-height: 1%; overflow: hidden;">
                            <div class="col-md-12">
                               <div class="row">
                                      <div class="box box-primary">
                                           <div class="box-header">
                                              <div class="pull-right">
                                                     <!-- Modal Activation Button -->
                                                     <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addEmpMemModal">
                                                          Add Employee/ Member
                                                       </button>
                                                       <!-- Modal -->
                                                       <div class="modal fade" id="addEmpMemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                                          <div class="modal-dialog" role="document">
                                                             <div class="modal-content">
                                                   
                                          <cms:set submit_success="<cms:get_flash 'submit_success' />" />
                                          <cms:if submit_success >
                                             <h4>Success: Your application has been submitted.</h4>
                                          </cms:if>
                                          <cms:form masterpage=k_template_name name='addemp' mode='create' enctype='multipart/form-data' method="post" anchor="0" >
                                             <cms:if k_success >
                                                <cms:db_persist_form _invalidate_cache='0' _auto_title='1' />
                                                <cms:set_flash name='submit_success' value='1' />
                                                <cms:redirect k_page_link />
                                             </cms:if>

                                             <cms:if k_error >
                                                <div class="error">
                                                   <cms:each k_error >
                                                      <br><cms:show item />
                                                   </cms:each>
                                                </div>
                                             </cms:if>

                                             <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel">Add Employee/ Member</h4>
                                             </div>
                                             <div class="modal-body" style="min-height: 1%; overflow: hidden;">

                                             <div class="col-md-12">
                                                <img id="image" style="width: 132.283465px; margin: 0 auto 10px; display: block;"/>
                                                <cms:input name='dp' type="bound" id="files" />
                                                <div style="padding-top: 10px;"></div>
                                             </div>
                                             <div class="col-md-12">
                                                <!--<label>Department</label><br>
                                                <select>
                                                                                     <option>Select Department</option>
                                                                                     <option>Dept 1</option>
                                                                                     <option>Dept 2</option>
                                                                                </select>
                                                <br>
                                                <div style="padding-top: 10px;"></div>-->
                                                <label>First Name</label><br>
                                                <cms:input name="fname" type="bound" />
                                                <br>
                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Last Name</label><br>
                                                                                <cms:input name="lname" type="bound" />
                                                                                <br>
                                                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Designation</label><br>
                                                                                <cms:input name="designation" type="bound" />
                                                                                <br>
                                                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Date of Birth</label><br>
                                                                                <div class="input-group date">
                                                   <div class="input-group-addon">
                                                      <i class="fa fa-calendar"></i>
                                                   </div>
                                                   <cms:ignore><cms:input name="dob" type="bound" class="form-control pull-right" id="datepicker-dob" /></cms:ignore>
                                                </div>
                                                <br>
                                                <div style="padding-top: 10px;"></div>
                                                <label>Date of Anniversary</label><br>
                                                <div class="input-group date">
                                                   <div class="input-group-addon">
                                                      <i class="fa fa-calendar"></i>
                                                   </div>
                                                   <cms:ignore><cms:input name="doa" type="bound" class="form-control pull-right" id="datepicker-doa" /></cms:ignore>
                                                </div>
                                                <br>
                                                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Mobile (Official)</label><br>
                                                                                <cms:input name="mobofc" type="bound" />
                                                                                <br>
                                                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Mobile (Personal)</label><br>
                                                                                <cms:input name="mobpers" type="bound" />
                                                                                <br>
                                                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Landline (Office)</label><br>
                                                                                <cms:input name="llofc" type="bound" />
                                                                                <br>
                                                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Landline (Residence)</label><br>
                                                                                <cms:input name="llresi" type="bound" />
                                                                                <br>
                                                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Website (Official)</label><br>
                                                                                <cms:input name="webofc" type="bound" />
                                                                                <br>
                                                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Website (Personal)</label><br>
                                                                                <cms:input name="webpers" type="bound" />
                                                                                <br>
                                                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Address (Office)</label><br>
                                                                                <cms:input type="bound" name="addofc" cols="" rows="4"></cms:input>
                                                                                <br>
                                                                                <div style="padding-top: 10px;"></div>
                                                                                <label>Address (Residence)</label><br>
                                                                                <cms:input type="bound" name="addresi" cols="" rows="4"></cms:input>
                                                                                <div style="padding-top: 10px;"></div>
                                             </div>
                                          </div>
                                          <div class="modal-footer">
                                             <cms:if "<cms:not submit_success />" >
                                                <button type="button" class="btn btn-success">Save</button>
                                             </cms:if>
                                             <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                          </div>
                                       </cms:form>
                                                             
                                                          </div>
                                                       </div>
                                                  </div>
                                           </div>
                                           <div class="box-body">
                                                <div id="no-more-tables">
                                                       <table class="col-sm-12 table-bordered table-striped table-condensed cf">
                                                            <thead class="cf">
                                                                 <tr>
                                                                    <th width="10%">Photo</th>
                                                                      <th width="20%">Name</th>
                                                                      <th width="20%">Designation</th>
                                                                      <th width="20%">Department</th>
                                                                      <th width="15%">Edit</th>
                                                                      <th width="15%">Delete</th>
                                                                 </tr>
                                                            </thead>
                                                            <tbody>
                                                                 <tr>
                                                                    <td data-title="Photo">
                                                                         <a class="example-image-link" href="dist/img/user8-128x128.jpg" data-title="Aashish Handa<br>CTO" data-lightbox="example-1">
                                                                              <img src="dist/img/user8-128x128.jpg" class="img-circle" style="width: 25%;" />
                                                                           </a>
                                                                      </td>
                                                                    <td data-title="Name">Aashish Handa</td>
                                                                      <td data-title="Designation">CTO</td>
                                                                      <td data-title="Department">Development</td>
                                                                      <td data-title="Edit"><a href="#" class="btn btn-success btn-xs" data-toggle="modal" data-target="#editEmpMemModal"><i class="fa fa-edit"></i></a></td>
                                                                      <td data-title="Delete"><a href="#" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteEmpMemModal"><i class="fa fa-times"></i></a></td>
                                                                 </tr>
                                                                 <tr>
                                                                    <td data-title="Photo">
                                                                         <a class="example-image-link" href="dist/img/user4-128x128.jpg" data-title="Priya Rajput<br>Director, Sales" data-lightbox="example-2">
                                                                            <img src="dist/img/user4-128x128.jpg" class="img-circle" style="width: 25%;" />
                                                                         </a>
                                                                      </td>
                                                                    <td data-title="Name">Priya Rajput</td>
                                                                      <td data-title="Designation">Director, Sales</td>
                                                                      <td data-title="Department">Sales and Marketing</td>
                                                                      <td data-title="Edit"><a href="#" class="btn btn-success btn-xs" data-toggle="modal" data-target="#editEmpMemModal"><i class="fa fa-edit"></i></a></td>
                                                                      <td data-title="Delete"><a href="#" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteEmpMemModal"><i class="fa fa-times"></i></a></td>
                                                                 </tr>
                                                          </tbody>
                                                     </table>
                                                  </div>
                                             </div>
                                             <div class="box-footer">
                                                <div class="box-tools pull-right">
                                                     <ul class="pagination pagination-sm inline">
                                                        <li><a href="#">«</a></li>
                                                        <li class="active"><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">»</a></li>
                                                     </ul>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>         
                              </div>
                         </div>                         
            </section>
                   
         </div>
         <!-- /.content-wrapper -->

         <!-- Main Footer -->
         <footer class="main-footer">
            <!-- To the right -->
            <div class="pull-right hidden-xs">
               Secured Intra-Organization Communication Application
            </div>
            <!-- Default to the left -->
            <strong>Copyright &copy; 2016 - 2017 <a href="http://www.tdirectory.in/">TDirectory</a> by <a href="http://www.genxcoders.in/">GenXCoders</a>.</strong> All rights reserved.
         </footer>
      </div><!-- ./wrapper -->
         
          <!-- Edit Modal -->
          <div class="modal fade" id="editEmpMemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
               <div class="modal-dialog" role="document">
                    <div class="modal-content">
                         <div class="modal-header">
                              <h4 class="modal-title" id="myModalLabel">Edit Employee/ Member</h4>
                         </div>
                         <div class="modal-body" style="min-height: 1%; overflow: hidden;">
                              <form>
                                   <div class="col-md-12">
                                        <img id="image" style="width: 132.283465px; margin: 0 auto 10px; display: block;"/>
                                        <input type="file" id="files" />
                                        <div style="padding-top: 10px;"></div>
                                   </div>
                                   <div class="col-md-12">
                                        <label>Department</label><br>
                                        <select>
                                             <option>Select Department</option>
                                             <option>Dept 1</option>
                                             <option>Dept 2</option>
                                        </select>
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>First Name</label><br>
                                        <input name="fname" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Last Name</label><br>
                                        <input name="lname" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Designation</label><br>
                                        <input name="designation" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Date of Birth</label><br>
                                        <input name="dob" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Date of Anniversary</label><br>
                                        <input name="doa" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Mobile (Official)</label><br>
                                        <input name="mob-ofc" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Mobile (Personal)</label><br>
                                        <input name="mob-pers" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Landline (Office)</label><br>
                                        <input name="ll-ofc" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Landline (Residence)</label><br>
                                        <input name="ll-resi" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Website (Official)</label><br>
                                        <input name="web-ofc" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Website (Personal)</label><br>
                                        <input name="web-pers" type="text">
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Address (Office)</label><br>
                                        <textarea name="add-ofc" cols="" rows="4"></textarea>
                                        <br>
                                        <div style="padding-top: 10px;"></div>
                                        <label>Address (Residence)</label><br>
                                        <textarea name="add-resi" cols="" rows="4"></textarea>
                                        <div style="padding-top: 10px;"></div>
                                   </div>
                              </form>
                         </div>
                         <div class="modal-footer">
                              <button type="button" class="btn btn-success">Update</button>
                              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                         </div>
                    </div>
               </div>
          </div>
          <!-- Delete Modal -->
          <div class="modal fade" id="deleteEmpMemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
               <div class="modal-dialog" role="document">
                    <div class="modal-content">
                         <div class="modal-header">
                              <h4 class="modal-title" id="myModalLabel">Delete Employee/ Member</h4>
                         </div>
                         <div class="modal-body" style="min-height: 1%; overflow: hidden;">
                            Are you sure you want to delete employee/ member:
                              <br>
                              <!--<div style="padding-top: 10px;"></div>-->
                              <img src="dist/img/user8-128x128.jpg" class="img-circle" style="width: 20%; display: block; margin: 10px auto;">
                              <div class="text-center">
                                 <b>Aashish Handa</b>
                              </div>
                         </div>
                         <div class="modal-footer">
                              <button type="button" class="btn btn-success">Yes</button>
                              <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                         </div>
                    </div>
               </div>
          </div>         
         
      <!-- REQUIRED JS SCRIPTS -->
      <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
      <script src="bootstrap/js/bootstrap.min.js"></script>
      <script src="dist/js/app.min.js"></script>
          <script src="genxcoders-custom/typeahead.bundle.js"></script>
          <script src="plugins/datepicker/bootstrap-datepicker.js"></script>
          <script src="genxcoders-custom/lightbox.min.js"></script>
          <script>
         var nbaTeams = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            prefetch: 'https://twitter.github.io/typeahead.js/data/nba.json'
         });
         
         /*var nhlTeams = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            prefetch: 'https://twitter.github.io/typeahead.js/data/nhl.json'
         });*/
         
         $('#multiple-datasets .typeahead').typeahead({
            highlight: true
         },
         {
            name: 'nba-teams',
            display: 'team',
            source: nbaTeams,
            templates: {
               header: '<h3 class="league-name">Notices</h3>'
            }
         }/*,
         {
            name: 'nhl-teams',
            display: 'team',
            source: nhlTeams,
            templates: {
               header: '<h3 class="league-name">Members</h3>'
            }
         }*/);
         
         $('#addEmpMemModal').on('shown.bs.modal', function () {
            $('#myInput').focus()
         })
         $('#editEmpMemModal').on('shown.bs.modal', function () {
            $('#myInput').focus()
         })
         $('#deleteEmpMemModal').on('shown.bs.modal', function () {
            $('#myInput').focus()
         })
         
         //Date picker
         $('#datepicker').datepicker({
            autoclose: true
         });
         
         //Form Image
         document.getElementById("files").onchange = function () {
             var reader = new FileReader();
         
             reader.onload = function (e) {
               // get loaded data and render thumbnail.
               document.getElementById("image").src = e.target.result;
             };
         
             // read the image file as a data URL.
             reader.readAsDataURL(this.files[0]);
         };
         
         //Date picker
         $('#datepicker-dob').datepicker({
            autoclose: true
         });
         $('#datepicker-doa').datepicker({
            autoclose: true
         });
         
         <!-- Date Display -->
         var dt = new Date();
         document.getElementById("date-display").innerHTML = dt.toDateString();
      </script>
   </body>
</html>
<?php COUCH::invoke(); ?>