Developing (v7+)

Concrete5.7.5.6 - Featherlight ajax php form submission - page not found

Permalink February 11, 2016 at 8:01 AM

Hello,

I am using the Featherlight library to have a lightbox form to pop up. An exactly the same form on a contact page without a lightbox works fine. But when I put it all within the Featherlight, nothing happens.

Here's the view.php bit:

<div class="ccm-block-page-list-book">
    <?php $bookId = uniqid(); ?>
    <a href="#" data-featherlight="#content-<?php echo $bookId; ?>">
    <?php echo "Booking Form"; ?>
    <div class="lightbox" id="content-<?php echo $bookId; ?>">
        <div class="row">
            <?php
                $form = Loader::helper('form');
                $formAction = $view->action('submit_form').$bookId;
            ?>
            <form id="book_form" 
                enctype="multipart/form-data" 
                action="<?php echo $formAction?>" 
                method="post" 
                accept-charset="utf-8">

Viewing 15 lines of 37 lines. View entire code block.

 
<div class="ccm-block-page-list-book">
    <?php $bookId = uniqid(); ?>
    <a href="#" data-featherlight="#content-<?php echo $bookId; ?>">
    <?php echo "Booking Form"; ?>
    <div class="lightbox" id="content-<?php echo $bookId; ?>">
        <div class="row">
            <?php
                $form = Loader::helper('form');
                $formAction = $view->action('submit_form').$bookId;
            ?>
            <form id="book_form" 
                enctype="multipart/form-data" 
                action="<?php echo $formAction?>" 
                method="post" 
                accept-charset="utf-8">
 
                <div class="form-group">
                    <?php 
                        echo $form->label('name', $entry_name);
                        echo $form->text('name', $name, array ('maxlength'=>"50"));
                    ?>
                </div>
 
                <div class="form-group">
                    <?php 
                        echo $form->label('email', $entry_email);
                        echo $form->text('email', $email, array ('maxlength'=>"100"));
                    ?>
                </div>
 
                <div class="form-group">
                    <?php 
                        echo $form->submit('submit', $button_book, array ('class'=>"form_btn")); 
                    ?>
                </div>
            </form>
        </div>
    </div>
    </a>                   
</div>

Here's the controller.php bit:

public function action_submit_form() {
        if ($this->isPost() and $this->validate_form()) {
            $txt_message = "Test email";
            $mh = Core::make('helper/mail');
            $mh->to($this->email_to, $this->site_name);
            $mh->from($this->email, $this->name);
            $mh->replyto($this->email, $this->name);
            $mh->setSubject($this->subject);
            $mh->setBody($txt_message);
            @$mh->sendMail();
        }        
        $this->view();
    }
    public function validate_form() {
        return true;

Viewing 15 lines of 16 lines. View entire code block.

 
    public function action_submit_form() {
        if ($this->isPost() and $this->validate_form()) {
            $txt_message = "Test email";
 
            $mh = Core::make('helper/mail');
            $mh->to($this->email_to, $this->site_name);
            $mh->from($this->email, $this->name);
            $mh->replyto($this->email, $this->name);
            $mh->setSubject($this->subject);
            $mh->setBody($txt_message);
 
            @$mh->sendMail();
        }        
        $this->view();
    }
 
    public function validate_form() {
        return true;
    }

And here's the view.js bit:

$(document).ready(function (e) {
    $('#book_form').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success: function(data)
        });
    }));
});

So, when I press the Submit button, it loads a 'mysite.com/submit_form/100856bc8255e2091' page and says the Page Not Found. But it works fine on its own - after the form submission, it loads the page and displays the form and content and all.

Or maybe there's another easier way to make a lightboxed form in Concrete5 with jQuery?

I will really appreciate it if anyone could help figure out what's wrong. Thank you.

MrKDilkington replied on Feb 11, 2016 at 9:12 am Permalink Reply

Hi linuxoid,

I recommend looking into Magnific Popup. It is a high quality tool and is included by default with concrete5.
http://dimsemenov.com/plugins/magnific-popup/...

linuxoid replied on Feb 13, 2016 at 1:11 am Permalink Reply

Ok, I've changed to the Magnific Popup based on the Documentation:
http://dimsemenov.com/plugins/magnific-popup/documentation.html#inl...

view.php:

<?php $bookId = uniqid(); ?>
<a href="#book-form-<?php echo $bookId; ?>" class="book-form-a"><?php echo "Book"; ?></a>
<div class="row mfp-hide book-form-block" id="book-form-<?php echo $bookId; ?>">
                        <?php
                            $form = Loader::helper('form');
                            $formAction = $view->action('submit_form').$bookId;
                        ?>
                        <form 
                            enctype="multipart/form-data" 
                            action="<?php echo $formAction?>" 
                            method="post" 
                            accept-charset="utf-8">
                            <div class="form-group">
                                <?php 
                                    echo $form->label('name', $entry_name);

Viewing 15 lines of 29 lines. View entire code block.

 
<?php $bookId = uniqid(); ?>
<a href="#book-form-<?php echo $bookId; ?>" class="book-form-a"><?php echo "Book"; ?></a>
<div class="row mfp-hide book-form-block" id="book-form-<?php echo $bookId; ?>">
                        <?php
                            $form = Loader::helper('form');
                            $formAction = $view->action('submit_form').$bookId;
                        ?>
                        <form 
                            enctype="multipart/form-data" 
                            action="<?php echo $formAction?>" 
                            method="post" 
                            accept-charset="utf-8">
 
                            <div class="form-group">
                                <?php 
                                    echo $form->label('name', $entry_name);
                                    echo $form->text('name', $name, array ('maxlength'=>"50"));
                                ?>
                            </div>
 
                            <div class="form-group">
                                <?php 
                                    echo $form->label('email', $entry_email);
                                    echo $form->text('email', $email, array ('maxlength'=>"100"));
                                ?>
                            </div>
                            <div class="form-group">
                                <?php 
                                    echo $form->submit('submit', $button_book, array ('class'=>"form_btn")); 
                                ?>
                            </div>

controller.php:

public function view()
    {
        $this->requireAsset('javascript', 'core/lightbox/launcher');
        $this->requireAsset('javascript', 'core/lightbox');
        $this->requireAsset('css', 'core/lightbox');
    }
    public function action_submit_form() {
        if ($this->isPost()) {
            $txt_message = "Test email";
            $mh = Core::make('helper/mail');
            $mh->to($this->email_to, $this->site_name);
            $mh->from($this->email, $this->name);
            $mh->replyto($this->email, $this->name);
            $mh->setSubject($this->subject);
            $mh->setBody($txt_message);

Viewing 15 lines of 19 lines. View entire code block.

 
    public function view()
    {
        $this->requireAsset('javascript', 'core/lightbox/launcher');
        $this->requireAsset('javascript', 'core/lightbox');
        $this->requireAsset('css', 'core/lightbox');
    }
 
    public function action_submit_form() {
        if ($this->isPost()) {
            $txt_message = "Test email";
 
            $mh = Core::make('helper/mail');
            $mh->to($this->email_to, $this->site_name);
            $mh->from($this->email, $this->name);
            $mh->replyto($this->email, $this->name);
            $mh->setSubject($this->subject);
            $mh->setBody($txt_message);
 
            @$mh->sendMail();
        }        
        $this->view();
    }

view.js:

$(document).ready(function() {
   $('.book-form-a').magnificPopup({
      type: 'inline',
      preloader: false,
      focus: '#name',
      // When elemened is focused, some mobile browsers in some cases zoom in
      // It looks not nice, so we disable it:
      callbacks: {
         beforeOpen: function() {
            if($(window).width() < 700) {
               this.st.focus = false;
            } else {
               this.st.focus = '#name';
            }
         }

Viewing 15 lines of 18 lines. View entire code block.

 
$(document).ready(function() {
   $('.book-form-a').magnificPopup({
      type: 'inline',
      preloader: false,
      focus: '#name',
 
      // When elemened is focused, some mobile browsers in some cases zoom in
      // It looks not nice, so we disable it:
      callbacks: {
         beforeOpen: function() {
            if($(window).width() < 700) {
               this.st.focus = false;
            } else {
               this.st.focus = '#name';
            }
         }
      }
   });
});

The form displays fine. But when I submit the form, it still goes to the same page as before 'mysite.com/submit_form/100856bc8255e2091' which gives me an Error 404 Page Not Found.

I have to add that I'm loading dynamic content each having a button on pressing which the form pops up, so I have to keep IDs different and the form having no id, otherwise the jquery won't know what the form id is.

What else am I doing wrong?

linuxoid replied on Feb 13, 2016 at 6:17 am Permalink Reply

I think the error is from something else. I deleted everything. Added my working form block to the page - everything works just fine. I removed the form block. Copied my working form from my form package into the view.php of the block I'm developing, one to one copy. I press the submit button - and it gives me the Page Not Found error.

What could be wrong? The piece of code works in another block but not in my new block. I'm puzzled.

<div class="row">
    <?php
            $form = Loader::helper('form');
            $formAction = $view->action('submit_form').'#formblock'.$bID;
    ?>
    <div id="formblock<?php  echo $bID; ?>" class="ccm-block-type-form">
    <form id="contact_form" 
            enctype="multipart/form-data" 
            action="<?php echo $formAction?>" 
            method="post" 
            accept-charset="utf-8">
            <div class="form-group">
                    <?php 
                            echo $form->label('name', $entry_name);
                            echo $form->text('name', $name);

Viewing 15 lines of 31 lines. View entire code block.

 
<div class="row">
    <?php
            $form = Loader::helper('form');
            $formAction = $view->action('submit_form').'#formblock'.$bID;
    ?>
    <div id="formblock<?php  echo $bID; ?>" class="ccm-block-type-form">
    <form id="contact_form" 
            enctype="multipart/form-data" 
            action="<?php echo $formAction?>" 
            method="post" 
            accept-charset="utf-8">
            <div class="form-group">
                    <?php 
                            echo $form->label('name', $entry_name);
                            echo $form->text('name', $name);
                    ?>
            </div>
            <div class="form-group">
                    <?php 
                            echo $form->label('email', $entry_email);
                            echo $form->text('email', $email);
                    ?>
            </div>
            <div class="form-group">
                    <?php 
                            echo $form->submit('submit', $button_book, array ('class'=>"btn-default")); 
                    ?>
            </div>
    </form>
    </div>
</div>

P.S. I'm overriding a Page List block - adding a button to each page listing which pops up a form

Forums

Developing (v7+)

Concrete5.7.5.6 - Featherlight ajax php form submission - page not found

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?