Skip to content
Snippets Groups Projects
inputconfirm.html 6.9 KiB
Newer Older
<!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>Input Confirm Mock</title>


</head>
<body>
<label>Submit to
    <select name="submitTo" id="submitTo">
        <option>404 error</option>
        <option>save_error_matno.json</option>
        <option>save_error_geburtstag.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>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>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10 ">
            <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"><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' method='post'
          accept-charset='UTF-8' autocomplete='on' enctype='application/x-www-form-urlencoded'
          class='form-horizontal' data-toggle='validator'>

        <div class="form-group">
            <div class='col-md-3 qfq-label'><label for="personEmail" class="control-label">Email</label></div>
            <div class='col-md-6'><input type="email" class="form-control" id="personEmail" name="personEmail"
                                         placeholder="Email"
                                         title="Tooltip"
                                         data-toggle="tooltip" data-placement="right"></div>

            <div class="help-block">Email of the person.</div>
        </div>

        <div class="form-group">
            <div
                    class='col-md-3 qfq-label'><label for="personEmailRETYPE" class="control-label">please
                retype</label></div>
            <div class='col-md-6'>
                <input type="email" class="form-control" id="personEmailRETYPE"
                       name="personEmailRETYPE"
                       placeholder="Email" title="Tooltip"
                       data-toggle="tooltip" data-placement="right" data-match="#personEmail"></div>
            <div class="help-block with-errors"></div>
        </div>

        <div class="form-group">
            <div class='col-md-3 qfq-label'><label for="personEmail2" class="control-label">Email2</label></div>
            <div class='col-md-6'><input type="email" class="form-control" id="personEmail2" name="personEmail2"
                                         placeholder="Email"
                                         title="Tooltip"
                                         data-toggle="tooltip" data-placement="right"
Carsten  Rose's avatar
Carsten Rose committed
                    ></div>

            <div class="help-block">Email of the person.</div>
        </div>

        <div class="form-group">
            <div
                    class='col-md-3 qfq-label'><label for="personEmail2RETYPE" class="control-label">please
                retype</label></div>
            <div class='col-md-6'>
                <input type="email" class="form-control" id="personEmail2RETYPE"
                       name="personEmail2RETYPE"
                       placeholder="Email" title="Tooltip"
                       data-toggle="tooltip" data-placement="right"
                       data-match="[name=personEmail2]"></div>
            <div class="help-block with-errors"></div>
        </div>

    </form>
</div>

<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/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
    $(function () {
        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(),
        });

        $("#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();
        });

        $('#myForm').on('invalid', function () {
            console.log("Invalid event catched");
        });

        QfqNS.Log.level = 0;

    });
</script>
</body>
</html>