Využití formuláře js do klasického formu

jAkErCZ
Člen | 321
+
-1
-

Zdravím,
mám Modální form který ale využívá prvky js a rád bych ho využil pro nette dle formu ale nevím jak upravit ten js aby mi to fungovalo jak má.

Tady je ten prvek ve kterém mám manuální vykreslení formu ale rád bych aby to fungovalo i s těmi js prvky.

<div class="feedback left">
    <div class="tooltips">
        <div class="btn-group dropup">
            <button type="button" class="btn btn-primary dropdown-toggle btn-circle btn-lg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-bug fa-2x" title="Report Bug"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-form">
                <li>
                    <div class="report">
                        <h2 class="text-center">Nahlášení chyb</h2>

                        <form n:name="contactBugForm" class="doo" method="post" id="contact_form">
                            <div class="col-sm-12">
                                <textarea required n:name="comment" class="form-control" placeholder="Prosím, řekněte nám, o jakou chybu nebo problém se jedná a poskytněte nám co nejvíce podrobností."></textarea>
                                <input n:name="y" type="text" class="form-control" placeholder="Zadejte aktuální rok" autofocus>
                                <!--<input name="screenshot" type="hidden" class="screen-uri">
                                <span class="screenshot pull-right"><i class="fa fa-camera cam" title="Take Screenshot"></i></span>-->
                            </div>
                            <div class="col-sm-12 clearfix">
                                <button n:name="submit" class="btn btn-primary btn-block">Nahlásit</button>
                            </div>
                        </form>

                    </div>
                    <div class="loading text-center hideme">
                        <h2>Please wait...</h2>
                        <h2><i class="fa fa-refresh fa-spin"></i></h2>
                    </div>
                    <div class="reported text-center hideme">
                        <h2>Thank you!</h2>
                        <p>Your submission has been received, we will review it shortly.</p>
                        <div class="col-sm-12 clearfix">
                            <button class="btn btn-success btn-block do-close">Close</button>
                        </div>
                    </div>
                    <div class="failed text-center hideme">
                        <h2>Oh no!</h2>
                        <p>It looks like your submission was not sent.<br><br><a href="mailto:">Try contacting us by the old method.</a></p>
                        <div class="col-sm-12 clearfix">
                            <button class="btn btn-danger btn-block do-close">Close</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

js

(function ( $ ) {
    $.fn.feedback = function(success, fail) {
        self=$(this);
        self.find('.dropdown-menu-form').on('click', function(e){e.stopPropagation()})

        self.find('.screenshot').on('click', function(){
            self.find('.cam').removeClass('fa-camera fa-check').addClass('fa-refresh fa-spin');
            html2canvas($(document.body), {
                onrendered: function(canvas) {
                    self.find('.screen-uri').val(canvas.toDataURL("image/png"));
                    self.find('.cam').removeClass('fa-refresh fa-spin').addClass('fa-check');
                }
            });
        });

        self.find('.do-close').on('click', function(){
            self.find('.dropdown-toggle').dropdown('toggle');
            self.find('.reported, .failed').hide();
            self.find('.report').show();
            self.find('.cam').removeClass('fa-check').addClass('fa-camera');
            self.find('.screen-uri').val('');
            self.find('textarea').val('');
        });

        failed = function(){
            self.find('.loading').hide();
            self.find('.failed').show();
            if(fail) fail();
        }

        self.find('form').on('submit', function(){
            self.find('.report').hide();
            self.find('.loading').show();
            $.post( $(this).attr('action'), $(this).serialize(), null, 'json').done(function(res){
                if(res.result == 'success'){
                    self.find('.loading').hide();
                    self.find('.reported').show();
                    if(success) success();
                } else failed();
            }).fail(function(){
                failed();
            });
            return false;
        });
    };
}( jQuery ));

$(document).ready(function () {
    $('.feedback').feedback();
});

Když tam napíšu zprávu tak mi po odeslání vyhodí

<div class="failed text-center hideme">
                        <h2>Oh no!</h2>
                        <p>It looks like your submission was not sent.<br><br><a href="mailto:">Try contacting us by the old method.</a></p>
                        <div class="col-sm-12 clearfix">
                            <button class="btn btn-danger btn-block do-close">Close</button>
                        </div>
                    </div>

Soubor se kterým to funguje:

<?php

$comment = isset($_REQUEST['comment']) ? $_REQUEST['comment'] : '';
$screenshot =  isset($_REQUEST['screenshot']) ? $_REQUEST['screenshot'] : false;

/* convert screen shot to tmp file in current folder */
if($screenshot) $screenshot = base64_to_jpg($screenshot, time().'_'.rand(0,30).'.jpg');


/*
*
* Since you have a lot of options for mail, and you're better off not using mail()
* it will be up to you on how you want to send this e-mail, I use laravel, if not I use phpmailer directly - so attaching files is easy.
*
* $comment = what was typed
* $screenshot = the tmp file created for the screen shot.
*
* Be sure to unlink the screenshot after you send it.
*
*/



echo json_encode(array('result' => 'success'));

/* comment out if you want to see the file */
//if($screenshot) unlink($screenshot);


/* function to conver base64 to jpg image */
function base64_to_jpg($string, $file) {
  $fp = fopen($file, "wb");
  $data = explode(',', $string);
  fwrite($fp, base64_decode($data[1]));
  fclose($fp);
  return $file;
}

Ale přitom mi to data co jsem tam napsal vrátí… jak tedy upravím ajax aby při chybě ve formu vyhodilo <div class=„failed text-center hideme“> a když se to povede tak <div class=„reported text-center hideme“>

Díky všem za pomoc.

Editoval jAkErCZ (23. 4. 2018 10:30)

jAkErCZ
Člen | 321
+
0
-

Opraveno:

$this->sendResponse(new \Nette\Application\Responses\JsonResponse(array('result' => 'success')));

Přidal jsem si výstup.