Блог

Главная - Вопросы по программированию - Показать PDF, если captcha верна с помощью JS / jQuery

Показать PDF, если captcha верна с помощью JS / jQuery

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть простая форма, и я хочу показать URL-адрес pdf, если captcha верна. Таким образом, пользователь заполняет необходимые поля и вводит код captcha, после чего он нажимает отправить, который откроет pdf (только если код captcha верен).

Ниже приведен мой код вместе с captcha.

    $(window).on('load', function () {
            $('.lds-ellipsis').fadeOut();
            $('.preloader').delay(333).fadeOut('slow');
            $('body').delay(333);
        });
        $('#email').on('change', function () {
            if (!validateEmail($(this).val())) {
                $('#errEmail').html('<span style="color: red;"><i class="ion-close"></i> Invalid email address.</span>');
                $(this).val('');
            } else {
                $('#errEmail').html('');
            }
        });

        //password verification
        $('#cpwd').on('change', function () {
            if ($(this).val() != $('#pwd').val()) {
                $('#errPwd').html('<span style="color: red;"><i class="ion-close"></i> Password not matched.</span>');
                $(this).val('');
            } else {
                $('#errPwd').html('');
            }
        });


        //email validation
        function validateEmail(email) {
            var re = /^(([^<>()[]\.,;:s@"] (.[^<>()[]\.,;:s@"] )*)|(". "))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9] .) [a-zA-Z]{2,}))$/;
            return re.test(email);
        }

        //allow only number input
        function isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            return (charCode > 47 amp;amp; charCode < 58 || charCode == 8 || charCode == 9 || charCode == 46 || charCode > 36 amp;amp; charCode < 41);
        }


        //allow only number input
        function isAlpha(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            return (charCode > 64 amp;amp; charCode < 91 || charCode > 96 amp;amp; charCode < 123 || charCode == 8 || charCode == 9 || charCode == 46 || charCode > 36 amp;amp; charCode < 41);
        }

        //generate captcha
        function generateCaptcha(length, chars) {
            var result = '';
            for (var i = length; i > 0; --i) result  = chars[Math.round(Math.random() * (chars.length - 1))];
            return resu<
        }

        //default captcha
        $('.dynamic-code').text(generateCaptcha(5, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));

        $('.captcha-reload').on('click', function () {
            $('.dynamic-code').text(generateCaptcha(5, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));
        });

        //check captcha
        $('#captcha-input').on('change', function () {
            if ($(this).val() != $('.dynamic-code').text()) {
                $('#errCaptcha').html('<span style="color: red;"><i class="ion-close"></i> Code is wrong.</span>');
                $(this).val('');
            } else {
                $('#errCaptcha').html('');
            }
            
        }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 <div class="col-11 col-md-10 col-lg-9 col-xl-8 mx-auto">
                              
                                <form id="loginForm" method="post">
                                    <div class="form-group font-weight-500">
                                        <label for="docs">Number docs*
                                        </label>
                                        <input type="number" class="form-control bg-light border-light"
                                            id="docs" required placeholder="...">
                                    </div>
                                    <div class="form-group font-weight-500">
                                        <label for="other">Other number*
                                        </label>
                                        <input type="number" class="form-control bg-light border-light"
                                            id="other" required placeholder="...">
                                    </div>

                                    <div class="form-group font-weight-500">
                                        <label for="pwd">Code from image*:</label>

                                        <!-- input captcha -->
                                        <div class="captcha-code">
                                            <div class="code">
                                                <div class="dynamic-code"></div>
                                            </div>
                                            <div class="captcha-reload">
                                                <i class="ion-ios-loop-strong"></i>
                                            </div>
                                        </div>
                                        <div class="captcha-input">
                                            <input type="text" class="form-control form-control bg-light border-light"
                                                id="captcha-input" required autocomplete="off"
                                                placeholder="Enter code from image...">
                                            <span id="errCaptcha"></span>
                                        </div>

                                    </div>
                                    
                                    <button type="submit" class="btn btn-default">Submit</button>

                                </form>
                            </div>

Итак, мне было интересно, как я могу прикрепить к этому PDF-файл с помощью этой кнопки отправки, или, если есть лучший способ, не стесняйтесь рассказать мне, как этого добиться?

Может кто-нибудь попытаться помочь мне с этим?

Ответ №1:

Обновить HTML: добавить DIV внизу.

 <div id="#pdf"></div>

Обновить код jQuery:

 $('#captcha-input').on('change', function () {
            if ($(this).val() != $('.dynamic-code').text()) {
                $('#errCaptcha').html('<span style="color: red;"><i class="ion- 
                close"></i> Code is wrong.</span>');
                $(this).val('');
                $('#pdf').remove();
            } else {
                $('#pdf').append('<p>Show What Ever You want</p>');
                $('#errCaptcha').html('');
            }
            
        });
 
 $(window).on('load', function () {
            $('.lds-ellipsis').fadeOut();
            $('.preloader').delay(333).fadeOut('slow');
            $('body').delay(333);
        });
        $('#email').on('change', function () {
            if (!validateEmail($(this).val())) {
                $('#errEmail').html('<span style="color: red;"><i class="ion-close"></i> Invalid email address.</span>');
                $(this).val('');
            } else {
                $('#errEmail').html('');
            }
        });

        //password verification
        $('#cpwd').on('change', function () {
            if ($(this).val() != $('#pwd').val()) {
                $('#errPwd').html('<span style="color: red;"><i class="ion-close"></i> Password not matched.</span>');
                $(this).val('');
            } else {
                $('#errPwd').html('');
            }
        });


        //email validation
        function validateEmail(email) {
            var re = /^(([^<>()[]\.,;:s@"] (.[^<>()[]\.,;:s@"] )*)|(". "))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9] .) [a-zA-Z]{2,}))$/;
            return re.test(email);
        }

        //allow only number input
        function isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            return (charCode > 47 amp;amp; charCode < 58 || charCode == 8 || charCode == 9 || charCode == 46 || charCode > 36 amp;amp; charCode < 41);
        }


        //allow only number input
        function isAlpha(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            return (charCode > 64 amp;amp; charCode < 91 || charCode > 96 amp;amp; charCode < 123 || charCode == 8 || charCode == 9 || charCode == 46 || charCode > 36 amp;amp; charCode < 41);
        }

        //generate captcha
        function generateCaptcha(length, chars) {
            var result = '';
            for (var i = length; i > 0; --i) result  = chars[Math.round(Math.random() * (chars.length - 1))];
            return resu<
        }

        //default captcha
        $('.dynamic-code').text(generateCaptcha(5, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));

        $('.captcha-reload').on('click', function () {
            $('.dynamic-code').text(generateCaptcha(5, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));
        });

        //check captcha
        $('#captcha-input').on('change', function () {
            if ($(this).val() != $('.dynamic-code').text()) {
                $('#errCaptcha').html('<span style="color: red;"><i class="ion-close"></i> Code is wrong.</span>');
                $(this).val('');
                $('#pdf').html('');
            } else {
                $('#pdf').append('<p>WhatEver You want to show put here</p>');
                $('#errCaptcha').html('');
            }
            
        }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 <div class="col-11 col-md-10 col-lg-9 col-xl-8 mx-auto">
                              
                                <form id="loginForm" method="post">
                                    <div class="form-group font-weight-500">
                                        <label for="docs">Number docs*
                                        </label>
                                        <input type="number" class="form-control bg-light border-light"
                                            id="docs" required placeholder="...">
                                    </div>
                                    <div class="form-group font-weight-500">
                                        <label for="other">Other number*
                                        </label>
                                        <input type="number" class="form-control bg-light border-light"
                                            id="other" required placeholder="...">
                                    </div>

                                    <div class="form-group font-weight-500">
                                        <label for="pwd">Code from image*:</label>

                                        <!-- input captcha -->
                                        <div class="captcha-code">
                                            <div class="code">
                                                <div class="dynamic-code"></div>
                                            </div>
                                            <div class="captcha-reload">
                                                <i class="ion-ios-loop-strong"></i>
                                            </div>
                                        </div>
                                        <div class="captcha-input">
                                            <input type="text" class="form-control form-control bg-light border-light"
                                                id="captcha-input" required autocomplete="off"
                                                placeholder="Enter code from image...">
                                            <span id="errCaptcha"></span>
                                        </div>

                                    </div>
                                    
                                    <button type="submit" class="btn btn-default">Submit</button>

                                </form>
                            </div>
<div id="pdf"></div>