Submit button not working with fancybox

Question

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>

score 0 · Answer 1 · answered Oct 29 '17 at 04:54

0

redirect form action to the same page and check if(isset($_POST['submit'])) at first

answered Oct 29 '17 at 04:54

codebreaker

11
1

I am redirecting to the same page and even tried checking isset at first but on button click nothing happens. – Krishna Oct 29 '17 at 05:21
your div is hidden so you cant see submit button – codebreaker Oct 29 '17 at 05:53
After clicking on open demo link the div is visible but after clicking on the submit button on the div nothing happens. How to get hello on click of submit button either in fancybox or on the html page? – Krishna Oct 29 '17 at 06:04
try including form in the div – codebreaker Oct 29 '17 at 06:51
Thanks, I included the form in div which is hidden. What difference was it causing when I used form outside the div which is hidden. Also in this case it is showing me the php output on the html page. What changes should I make in the code to get the output of php in a new fancybox. – Krishna Oct 29 '17 at 07:32

score 0 · Accepted Answer · answered Oct 29 '17 at 10:04

0

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>

answered Oct 29 '17 at 10:04

Janis

8,593
1
21
27

In this case it is showing me the php output on the html page. What changes should I make in the code to get the output of php in a new fancybox. – Krishna Oct 30 '17 at 16:37
Add custom submit event handler -> send data using ajax -> display new fancyBox – Janis Oct 30 '17 at 20:15

score 0 · Answer 3 · answered Jun 28 '19 at 18:30

I had the same problem with .Net. You can attach FancyBox to your form with out moving your HTML.

FancyBox Documentation:

// Container is injected into this element
parentEl: "body",

So to answer the question use:

$('[data-fancybox]').fancybox({
    parentEl: 'form'
});

// Or better yet, use ID's
$('#ID_to_open_link').fancybox({
    parentEl: '#ID_of_form'
});

Submit button not working with fancybox

3 Answers3