[SOLVED] Submit button not working with fancybox

Submit button not working with fancybox

I am opening a fancybox on click of a link.

This fancy box is having username and password which I want to authenticate on submit button click.(To simplify I have changed the fancybox to a submit button only as of now)

I have written a php code which should have displayed hello, either in fancybox or on the html page (not sure exactly where) but it is not being displayed.

How to get hello on click of submit button either in fancybox or on the html page?

I don't want to use ajax call, but if it is not possible without ajax call, how to use ajax in this case?

//p.php

<html>
<head>

    <style>
    #hidden-content-b 
    {
    /* Custom styling */
    max-width: 850px;
    border-radius: 40px;

    /* Custom transition - slide from top*/
    transform: translateY(-50px);
    transition: all .33s;
    }

    .fancybox-slide--current #hidden-content-b
    {
    transform: translateY(0);
    }

    </style>

    <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>

</head>

<body>

    <h2>fancyBox v3.1 - Inline content</h2>
    <form action = "p.php" method = "post">
        <div class="grid">

            <p>
            <a data-fancybox data-src="#hidden-content-a" 
            href="javascript:;" class="btn">Open demo</a>
            </p>

            <div style="display: none;" id="hidden-content-a">
                <center>
                <h1><b>HTML</b></h1>
                    <input type = "submit" value = "Submit" name = "submit"> 
                </center>
            </div>

            <?php
                if(isset($_POST['submit']))
                echo "hello";
            ?>

        </div>

    </form>
</body>
</html>

Solution

When you display some content using fancyBox, then it gets moved from its position and therefore it is not inside your form. You just have to change order of the elements so that your content contains the form, for example:

<div class="grid">

  <p>
    <a data-fancybox data-src="#hidden-content-a" 
       href="javascript:;" class="btn">Open demo</a>
  </p>

  <div style="display: none;" id="hidden-content-a">
    <form action="p.php" method="post">
      <center>
        <h1><b>HTML</b></h1>
        <input type="submit" value="Submit" name="submit"> 
      </center>
    </form>
  </div>

</div>