-
Rafael Ostertag authoredRafael Ostertag authored
qfqform.html 15.06 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.bootstrap.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>QFQ Form</title>
</head>
<body>
<label>Submit to
<select name="submitTo" id="submitTo">
<option id="save-404-error">404 error</option>
<option id="save-field-error">save_error_firstname.json</option>
<option>save_no_redirect.json</option>
<option>save_server_redirect.json</option>
<option>save_client_redirect.json</option>
</select>
</label>
<label>Delete URL
<select name="deleteUrl" id="deleteUrl">
<option id="delete-404-error">404 error</option>
<option>delete_client_redirect.json</option>
<option>delete_error.json</option>
<option>delete_no_redirect.json</option>
<option>delete_server_redirect.json</option>
</select>
</label>
<label>Upload to
<select name="uploadTo" id="uploadTo">
<option>404 error</option>
<option>uploadhandler.php</option>
<option>uploadhandler_error.php</option>
</select>
</label>
<label>File Delete Url
<select name="fileDeleteUrl" id="fileDeleteUrl">
<option>404 error</option>
<option>delete_file_ok.json</option>
<option>delete_file_error.json</option>
</select>
</label>
<label>Dirty
<select name="dirtyUrl" id="dirtyUrl">
<option>404 error</option>
<option>dirty_success.json</option>
<option>dirty_denied.json</option>
</select>
</label>
<div class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-12">
<h1>Title with a long text</h1>
</div> </div>
<div class="row">
<div class="col-md-10">
<ul id="myTabs" class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#person" data-toggle="tab">Person</a></li>
<li role="presentation"><a id="link-tab-person2" href="#person2" data-toggle="tab">Person2</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
more <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#arbeitsgruppe" data-toggle="tab">Arbeitsgruppe</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-md-2 ">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button id="save-button" type="button" class="btn btn-default navbar-btn"
data-class-on-change="wdc"><span
class="glyphicon glyphicon-ok"></span></button>
<button id="close-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="btn-group" role="group">
<button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="btn-group" role="group">
<a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</div>
<form id="myForm" class="form-horizontal" data-toggle="validator" data-enable-save-button="false"
data-disable-return-key-submit="false">
<input type="hidden" name="s" value="badcaffee1234">
<div class="tab-content">
<!--pill: Person-->
<div role="tabpanel" class="tab-pane active" id="person">
<div class="form-group">
<div class="col-md-2">
<label for="id" class="control-label">id</label>
</div>
<div class="col-md-6 ">
<p id="id" class="form-control-static">12345678</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="name" class="control-label">Name</label>
</div>
<div class="col-md-6">
<input id="name" name="name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="firstname" class="control-label">Vorname</label>
</div>
<div class="col-md-6">
<input id="firstname" name="firstname" type="text" class="form-control" required>
<div class="help-block with-errors hidden"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="nameShort" class="control-label">Vorname Kurz</label>
</div>
<div class="col-md-6">
<input id="nameShort" name="shortname" type="text" class="form-control" required
data-error="Short name is required">
<div class="help-block with-errors"></div>
</div>
<div class="col-md-4">
<p class="help-block ">Abgekürzter Vorname. Für "Christian" z.B. "Ch."</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="personTitle" class="control-label">Titel</label>
</div>
<div class="col-md-6">
<select id="personTitle" class="form-control" name="persontitle">
<option id="personTitle-none"></option>
<option id="personTitle-dr">Dr.</option>
<option id="personTitle-prof-dr">Prof. Dr.</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Gender
</b>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="gender" required id="gender-male">male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" required id="gender-female">female
</label>
</div>
</div>
<div class="col-md-4">
<p class="help-block"></p>
</div>
</div>
<!-- This must be outside the form-group. -->
<input name="gender" value="" type="hidden">
<div class="form-group">
<div class="col-md-2">
<label for="personGeburtstag" class="control-label">Geburtstag</label>
</div>
<div class="col-md-6">
<div id="personGeburtstag" class="jqw-datetimepicker"
data-control-name="personGeburtstag" data-format-string="dd.MM.yyyy HH:mm"
data-show-time-button="true"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="anotherDate" class="control-label">Another Date</label>
</div>
<div class="col-md-6">
<div id="anotherDate" class="jqw-datetimepicker"
data-control-name="anotherDate" data-format-string="dd.MM.yyyy"
data-show-time-button="false"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="combobox1" class="control-label">Combobox 1</label>
</div>
<div class="col-md-6">
<div id="combobox1" class="jqw-combobox"
data-control-name="combobox1"></div>
</div>
</div>
</div>
<!--Pill: Person2-->
<div role="tabpanel" class="tab-pane" id="person2">
<div class="form-group">
<div class="col-md-2">
<label for="personDisplay" class="control-label">Display Name</label>
</div>
<div class="col-md-6">
<input id="personDisplay" type="text" class="form-control">
</div>
<div class=" col-md-4">
<p class="help-block">Optional: Wird anstelle von 'titel / vorname / name / zusatz' auf der
Kontaktseite und der 'persoenlichen Page' angezeigt. Wiki</p>
</div>
</div>
<!--subrecord: account-->
<!--subrecord: bilder zur person-->
<div class="form-group">
<div class="col-md-2">
<label for="notes-editor" class="control-label">Notes</label>
</div>
<div class="col-md-6">
<textarea id="notes-editor" class="form-control qfq-tinymce"
data-control-name="notesField" name="notesField" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<!--pill: Arbeitsgruppe-->
<div role="tabpanel" class="tab-pane" id="arbeitsgruppe">
<div class="form-group">
<div class="col-md-2">
<label for="fileupload" class="control-label">File upload</label>
</div>
<div class="col-md-6">
<div class="col-md-6">
<div class="uploaded-file "><span class="uploaded-file-name">john.doe.png</span>
<button class="delete-file" data-sip="filedeletesip"
name="trash-picture:1" type="button"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<input id="fileupload" name="picture:1" disabled="disabled" class="hidden" type="file"
data-sip="fileuploadsip">
<div class="help-block with-errors"></div>
</div>
</div>
<div class=" col-md-4">
<p class="help-block"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="mytextarea" class="control-label">Text area</label>
</div>
<div class="col-md-6">
<textarea class="form-control" id="mytextarea" name="mytextarea"></textarea>
</div>
<div class=" col-md-4">
<p class="help-block"></p>
</div>
</div>
<!--Sekretariat fuer Arbeitsgruppe (subrecord)-->
<!--Arbeitsgruppe (subrecord)-->
</div>
</div>
</form>
<a href="https://www.google.ch">away</a>
</div>
<script type="application/jqw-combobox-source" id="combobox1_source">
[
{ "value": 1, "text": "item 1" },
{ "value": 2, "text": "item 2" },
{ "value": 3, "text": "item 3" }
]
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/globalize.js"></script>
<script src="../js/tinymce.min.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
// Do not remove, or selenium tests will fail.
QfqNS.QfqPage.prototype.beforeUnloadHandler = function (evt) {
// intentionally empty
};
var qfqPage = new QfqNS.QfqPage({
tabsId: 'myTabs',
formId: 'myForm',
submitTo: 'api/' + $("#submitTo").val(),
deleteUrl: 'api/' + $("#deleteUrl").val(),
fileUploadTo: 'api/' + $("#uploadTo").val(),
fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val(),
dirtyUrl: 'api/' + $("#dirtyUrl").val(),
});
$("#submitTo").on("change", function (evt) {
qfqPage.settings.submitTo = 'api/' + $(evt.target).val();
qfqPage.qfqForm.submitTo = 'api/' + $(evt.target).val();
});
$("#deleteUrl").on("change", function (evt) {
qfqPage.settings.deleteUrl = 'api/' + $(evt.target).val();
qfqPage.qfqForm.deleteUrl = 'api/' + $(evt.target).val();
});
$("#uploadTo").on("change", function (evt) {
qfqPage.settings.fileUploadTo = 'api/' + $(evt.target).val();
qfqPage.qfqForm.fileUploader.targetUrl = 'api/' + $(evt.target).val();
});
$("#fileDeleteUrl").on("change", function (evt) {
qfqPage.settings.fileDeleteUrl = 'api/' + $(evt.target).val();
qfqPage.qfqForm.fileDeleter.targetUrl = 'api/' + $(evt.target).val();
});
$("#dirtyUrl").on("change", function (evt) {
qfqPage.settings.dirtyUrl = 'api/' + $(evt.target).val();
qfqPage.qfqForm.dirtyUrl = 'api/' + $(evt.target).val();
qfqPage.qfqForm.dirty.dirtyUrl = 'api/' + $(evt.target).val();
});
$('#myForm').on('invalid', function () {
console.log("Invalid event catched");
});
QfqNS.Log.level = 0;
});
</script>
</body>
</html>