Question

I have a few pages from each other to interact with page with id load, as below:

inside process.html

<div id="guest_details"> </div>

<div id="first_start"> </div>
<script>
<! -
$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')
$('#guest_details').hide('slow');
$('#first_start').SlideUp('slow')
->
</Script>

inside guest_details.html

<form action="guest_details.php" <form method="POST" id="guest">
<!-- Some cell here -->
<a onclick="$('#guest').submit();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a>
</Form>

That I want is when the submit button is clicked then:

1. data sent to guest_details.php
2. If the data has been sent then hide < div id=”guest_details”> < /div>
3. showing the show < div id=”first_start”> < /div>

but when I make it like the above, that not work, Could someone give a clue how to correct?

Thanks a lot

Answer 1

Looking at your previous question and your tags, I assume you are not much aware of AJAX.

You need to

1.post the form asynchronously (without reloading the page, using AJAX).
2. On successfully sending the data, do the dom manipulations.

I suggest using jquery for doing an AJAX post.

Here is a sample code, using jquery:-

$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')

function ajaxPostForm()
{    
  $.post('guest_details.php', 

  function(data) {

    //Dom manipulation
    $('#guest_details').hide('slow');
    $('#first_start').SlideUp('slow')

  });

 }

And your form html inside guest_details.html needs to be like:-

<form method="POST" id="guest">
<!-- Some cell here -->
<a onclick="ajaxPostForm();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a>
</Form>

The $.post given above is a very basic AJAX post. You may add further features as give in Jquery Post.

Also if you want to post the entire form, you can refer jQuery Form Plugin

Updates
I think I understood your problem better this time. Inside your update where you say this-

by default guest_details.html is
showing and first_start.html is hiding

referring to the sections as guest_details and first_start would make more sense because guest_details.html may mean the page guest_details.html which you might have opened in another window.

Anyway, I am sure you mean the sections inside the page process.html as you have used jquery .load(). Let’s call the first_start.html and guest_details.html as sections first_start and guest_details respectively.

As per your updates do you mean the following:-

Initial state
Section guest_details is shown and first_start is hidden

Cases/Situations
When form inside guest_details section is submitted, then hide the section guest_details and show first_start section.

At this state when guest_details is hidden and first_start is shown, the button on first_start can be clicked and on doing so the guest_details section shows again.

During these states where one section is hidden and another is shown reloading/refreshing the page should preserve the states.

If above is the complete scenario, here is the code:-

<script>
<! -
initiateSections(<?php echo $this->session->data['display_state']; ?>);
//state can have "display_first_start" or "display_guest_details"
function initiateSections(state)
{
    $('#guest_details').load('?p=guest_details.html');
    $('#first_start').load('?p=first_start.html')


    if(state == "display_first_start")
    {
        displayFirstStart();
    }
    else
    {//If chosen or by default
        displayGuestDetails();
    }

}

function ajaxPostGuestDetails()
{    
  $.post('guest_details.php',  //In this post request - set $this->session->data['display_state'] = 'display_first_start'; in php

  function(data) 
  {
        //Dom manipulation
    displayFirstStart();
  });

}

function ajaxPostFirstStart()
{    
  $.post('first_start.php',  //In this post request - set  $this->session->data['display_state'] = 'display_guest_details'; 

  function(data) 
  {
    //Dom manipulation
        displayGuestDetails();
  });

}

function displayGuestDetails()
{
    $('#first_start').hide('slow');
    $('#guest_details').slideUp('slow');
}

function displayFirstStart()
{
    $('#guest_details').hide('slow');
    $('#first_start').slideUp('slow');
}
->
</Script>