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:
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 © 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(); ?>