jQuery/ajax load php form in toggle layer..need to stay open on form submit.

You need to show the form validation too
Also you need to use Ajax if you do not want to refresh the page
Alternatively submit to a hidden iframe

Can you or anyone else give a little more explantion.

You need to show the form validation too
The form works fine but I didn't post as it is pretty ugly stuff, you can see it here (and I have ammended to the version in the solution).
Also you need to use Ajax if you do not want to refresh the page.
I don't mind refreshing the page if the layer can remain open and the messages/validation will appear.
Maybe a solution using cookies?
So not PHP at all or on top of? I'm confused
Alternatively submit to a hidden iframe
Again I've used iframes but a hidden iframe, please provide more information if it will be a suitable solution.

I am keen to get the current setup working with a few addtions but if it can't be achieved could a solution be provided in more detail please.
Regards
Lee

I may have misunderstood

When the user submits, you return a message and you want that message to stay open for the remainder of the stay?

If so, a cookie or a session is needed - if you use either you can load the message from the server.

When the user submits, you return a message and you want that message to stay open for the remainder of the stay?

No not really.
When a user submits if it isn't the toggle/hidden layer it works fine and vlidation message are left on submit.

But having within a toggle layer and loading on request of the layer opening, on submit the page reutrns to state of toggle layer closed and the form has to load again therefore any validation has been cleared.

I need on form submit the toggle layer to remain open and therefore the form validation messages to appear.

p.s form used in one found in this solution for now:
https://www.experts-exchange.com/questions/27530531/PHP-experts-Need-my-code-debugged-as-it-doesn't-work.html

So what is the code that toggles the layer of the form?

I do not see an obvious toggle, except the

$('#topPanelHandle').click(function() {
  $('#topPanel').slideToggle(400);
  return false;
});

which can be called on document ready if a cookie is set

if ($.cookie("toggled")) $('#topPanel').slideToggle(400);

Tha's it, the toggle, but how do I set/create a cookie?

Also as it is on every page it should only remain open on the page that the form is sumbitted and only until user clicks another page. ON return it shouldn't be open as on any other page.

Try this

$('#topPanelHandle').click(function() {
  $('#topPanel').slideToggle(400);
  var toggled = $.cookie("toggled_on_page1");
  $.cookie("toggled_on_page1",toggled?null,true); // delete if toggling off, set if toggling on
  return false;
});

if ($.cookie("toggled_on_page1")) $('#topPanel').slideToggle(400);

thanks for the help but it appears to create a script error.

here's my script in full (before your edit which produces) error:

 <script language="javascript" type="text/javascript">
      <!--
saveReferrer();
// -->
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready (a little sooner that page load)
$('#topPanel').hide();
// shows and hides and toggles the slickbox on click
$('#topPanelHandle').click(function() {
$('#topPanel').slideToggle(400);
return false;
}); 



var panelDuration = 150; //time in miliseconds
var panelJumpHeight = "0.45em";

      $('#topPanelHandle').hover(function() {
          $(this).animate({ 'padding-top': 12, bottom : "-="+panelJumpHeight }, panelDuration);
          $('img.topPanelImg').animate({ top : "-10px" }, panelDuration); 
          
      }, function() {
          $(this).animate({  'padding-top': 2, bottom : "-20px"}, panelDuration);
          $('img.topPanelImg').animate({  top : "-20px"}, panelDuration);
      });

 $("#topPanelHandle").click(function(){  
      $("#topPanel div.wrap").load("ee.php");  
    });  
			$(".msgBox").find(".close").click(function(){
				$(this).parent(".msgBox").slideUp(300);
			});
			$('.tabs_holder').skinableTabs({
    effect: 'slide_left',
    skin: 'skin7',
    position: 'top'
  });
});

   </script>

Select allOpen in new window

I will look later. Away from computer

cheers

I had a comma instead of a colon.


I tried to clean your code a little

<script language="javascript" type="text/javascript">
saveReferrer();
$(document).ready(function() {
  var panelDuration = 150; //time in miliseconds
  var panelJumpHeight = "0.45em";

  // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
  if ($.cookie("toggled_on_page1")) $('#topPanel').slideToggle(400);
  else $('#topPanel').hide(); 

  // shows and hides and toggles the slickbox on click
  $('#topPanelHandle').click(function() {
    $("#topPanel div.wrap").load("ee.php");  
    $('#topPanel').slideToggle(400);
    var toggled = $.cookie("toggled_on_page1");
    $.cookie("toggled_on_page1",toggled?null:true); // delete if toggling off, set if toggling on
    return false;
  }).hover(function() {
      $(this).animate({ 'padding-top': 12, bottom : "-="+panelJumpHeight }, panelDuration);
      $('img.topPanelImg').animate({ top : "-10px" }, panelDuration); 
    }, function() {
      $(this).animate({  'padding-top': 2, bottom : "-20px"}, panelDuration);
      $('img.topPanelImg').animate({  top : "-20px"}, panelDuration);
  });

  $(".msgBox").find(".close").click(function(){
    $(this).parent(".msgBox").slideUp(300);
  });
  $('.tabs_holder').skinableTabs({
    effect: 'slide_left',
    skin: 'skin7',
    position: 'top'
  });
  
  
});
</script>

Select allOpen in new window

Many thanks. Appreciate the effort.
 Do I need to install
https://github.com/carhartl/jquery-cookie
before?To handle cookies?

Becuase that doesn't work, creates error.

what is the error?

Yes you do.

Sorry

https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js

Ok Today was first chance to get back to this I copied your code and same issue.
Toggle layer closes and form reloads again!
Any thoughts?

Have a look on test site:
http://bit.ly/xaIlag

You may need to change

$('#topPanelHandle').click(function() {
    $("#topPanel div.wrap").load("ee.php");  

to

$('#topPanelHandle').click(function() {
    if (!$.cookie("toggled_on_page1")) $("#topPanel div.wrap").load("ee.php");  

but hard to test without your page

Ok last part didn't seem to work.
Whilst I have now got the div layer to stay open the form (loaded via ee,php) still disappears.
But I think I now have the panel staying open thanks to the cookie as I can now see text appearing that only appears if the form hasn't been loaded.

I had to change the code a bit to even achieve this but still fact remains that form isn't staying open to parse any messages and displaying them which is what I am trying to acheive. here the code:

saveReferrer();
$(document).ready(function() {
  var panelDuration = 150; //time in miliseconds
  var panelJumpHeight = "0.45em";
  if($.cookie('form_visible') == 'true') {
        $('#topPanel').show();
    } else {
        $('#topPanel').hide();
    }
  $('#topPanelHandle').click(function() {
    $("#topPanel div.wrap").load("ee.php"); 
    $('#topPanel').slideToggle(400);
    $.cookie('form_visible', $('#topPanel').is(':visible').toString());
    return false;
  }).hover(function() {
      $(this).animate({ 'padding-top': 12, bottom : "-="+panelJumpHeight }, panelDuration);
      $('img.topPanelImg').animate({ top : "-10px" }, panelDuration); 
    }, function() {
      $(this).animate({  'padding-top': 2, bottom : "-20px"}, panelDuration);
      $('img.topPanelImg').animate({  top : "-20px"}, panelDuration);
  });

  $(".msgBox").find(".close").click(function(){
    $(this).parent(".msgBox").slideUp(300);
  });
  $('.tabs_holder').skinableTabs({
    effect: 'slide_left',
    skin: 'skin7',
    position: 'top'
  });
  
  
});

Select allOpen in new window

P.S Really appreciate you sticking with this and hope you can work this out.
Many thanks
Lee

I am flying a little blind here.

Can you try this

$(document).ready(function() {
  var panelDuration = 150; //time in miliseconds
  var panelJumpHeight = "0.45em";
  $("#topPanel div.wrap").load("ee.php"); // assuming we load the form regardless if we show it or not

  if($.cookie('form_visible') == 'true') { $('#topPanel').slideDown(); } // no need to hide it, it is always hidden via css

  $('#topPanelHandle').click(function() {
    $('#topPanel').slideToggle(400);
    $.cookie('form_visible', $('#topPanel').is(':visible').toString());
    return false;
  }).hover(function() {
    $(this).animate({ 'padding-top': 12, bottom : "-="+panelJumpHeight }, panelDuration);
    $('img.topPanelImg').animate({ top : "-10px" }, panelDuration);
  }, function() {
    $(this).animate({  'padding-top': 2, bottom : "-20px"}, panelDuration);
    $('img.topPanelImg').animate({  top : "-20px"}, panelDuration);
  });

Hi Thanks for trying again but a couple of issues with this:
1. It loads form and makes visible without a call to action to open it (I only want it to open if someone triggers the toggle window).
2. It still reloads the form after submitting rather than showing form results.

If you can help or you need something else from me please let me know and I'll provide it.
Cheers
Lee

Can you show me the form submission code?

You need to AJAX that and RETURN FALSE!!!

Form is php and loaded looks very clunky (I didn't do it) but it works.

It is attached as ee.php (which is the file that is loaded via the jquery)

What it does:
Form sends email with info based on results of serial number they add.
Other than that just some validation if input fields aren't filled in correctly.

Cheers for the help
Lee
ee.php

Hi and thanks,
I can see an iframe would work though it creates other issues for me.
I guess from what you are saying I need to validate form using jquery?
The reason I haven't done this is because I don't know how to customise form to use jquery - any links to sites you can send me that might help?

I'll send points but it's not really what I wanted, I really wand it loading as part of the page rather than within an iframe.

I am saying you need to POST using jQuery - then return success or errors from the php too since you do not want to remove the validation from the server.

You can change the submit to a button and bind
  $.post("ee.php", $("#topPanel form").serialize());

to the click

Simple as that?!
No need to change the rest of the php form?

Possibly not more than that :)

You may want to show the result somewhere

If you are happy, you can close
https://www.experts-exchange.com/questions/27540323/jquery-cookie-show-php-form-results.html