Issue with fancybox form

Question

With reference from here see 5. Display login form.

After clicking on try now.

A fancy box should open with name and password.
If both the fields are blank and I click on login it should show a error message.
If I enter name and password it should show me the same in a fancybox.

For my code below 2nd and 3rd point are not working. What is wrong with my code?

    <html>
    <head>

        <link rel="stylesheet" type="text/css" href="fancybox-master/dist/jquery.fancybox.min.css">

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script src="fancybox-master/dist/jquery.fancybox.min.js"></script>
        <script type = "text/javascript">
            $("#tip5").fancybox({
            'scrolling'     : 'no',
            'titleShow'     : false,
            'onClosed'      : function() {
                $("#login_error").hide();
            }
        });

        </script>

        <script>

        $("#login_form").on("submit", function() {

    if ($("#login_name").val().length < 1 || 
   $("#login_pass").val().length < 1) {
            $("#login_error").show();
            $.fancybox.resize();
            return false;
        }

        $.fancybox.showActivity();

        $.ajax({
            type        : "POST",
            cache   : false,
            url     : "/data/login.php",
            data        : $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });

        return false;
    });
            </script>

        </head>

        <body>

                <a data-fancybox id="tip5" title="Login"  href="#login_form">Try now</a>
                <div style="display:none">
                <form id="login_form" method="post" action="">
                    <p id="login_error">Please, enter data</p>
                <p>
                    <label for="login_name">Login: </label>
                    <input type="text" id="login_name"  name="login_name" size="30" />
                </p>
                <p>
                    <label for="login_pass">Password: </label>
                    <input type="password" id="login_pass" name="login_pass" size="30" />
                </p>
                <p>
                    <input type="submit" value="Login" />
                </p>
                <p>
                    <em>Leave empty so see resizing</em>
                </p>
        </form>
    </div>
        </body>
    </html>

score 0 · Answer 1 · answered Oct 28 '17 at 20:53

0

try $("#login_form input[type='submit']").on("click", function() { instead of $("#login_form").on("submit", function() {

answered Oct 28 '17 at 20:53

lijnam

85
10

Thanks for your reply, I tried $("#login_form input[type='submit']").on("click", function() { instead of $("#login_form").on("submit", function() { but the effect is the same. If possible please try at your end and let me know. – Krishna Oct 29 '17 at 04:27
I tried the above code mentioned by you in the jsfiddle but nothing happens on the click of submit button. Browsers tried are chrome and edge. Also why you havent entered the first script ($("#tip5").fancybox({) in the code which you have written in jsfiddle – Krishna Oct 30 '17 at 17:10

Issue with fancybox form

1 Answers1