Show the content of a field while submitting

How to display form field content in a lightbox during submission.

Overview

The issue occurs when a form is submitted, and the user needs to show the entered content in a modal lightbox instead of a standard loading element.
Use JavaScript to capture the field value and trigger the Joomla modal lightbox (SqueezeBox) on form submission, ensuring the modal behavior is enabled with the appropriate PHP code.

Answered
Gl Glauser 15 Jul, 2015
(I create this topic to continue the discussion of this topic which auto-locks when I try to post an answer.)

I couldn't make it work with Max's code, but using JavaScript was the right way. After lots and lots of attempts, I found this topic (second post) that helped me (also with the updated version of the FAQ indicated by GreyHead) to find the solution to show the content of a field while loading. Here is something that works :

function showLoader() {
  var content;
jQuery(document).ready(function(jQ) {
  content = jQ('#field_id').val();
});

  jQuery('#loading').html(content);
  jQuery('#loading').show();
  jQuery('#submit_btn').prop('disabled', true);
  jQuery('#chronoform-my_form_name div:not(:last-child)').hide();
}


But now remains the problem of the lightbox. I would like to show this content in a lightbox... The FAQ is about creating a link that opens a lightbox, but my problem is how to open this lightbox directly from the Javascript code above ? Do you have an idea ?

Thank you for your help so far 🙂
Gl Glauser 18 Jul, 2015
Answer
OK, the FAQ that GreyHead indicated for the lightbox also put me on the right way. Here is a way that works to show the content of a form in a lightbox while submitting :

function showLoader() {
  var content;
jQuery(document).ready(function(jQ) {
  content = jQ('#field_id').val();
});

  var element = new Element('p');
  element.setAttribute("align", "center");
  var node = document.createTextNode(content);
  element.appendChild(node);

  SqueezeBox.resize({x: 700, y: 50});
  SqueezeBox.fromElement(element);

  jQuery('#submit_btn').prop('disabled', true);
  jQuery('#chronoform-my_form_name div:not(:last-child)').hide();
}


Don't forget to put anywhere on the page the following php code :

<?php
JHtml::_('behavior.modal');
?>


Finally both Max's and GreyHead's posts put me on the right way. Thank you !
This topic is locked and no more replies can be posted.