使用javascript隐藏，加载并显示div

Question

我彼此之间有几页要与具有ID加载的页面进行交互，如下所示：

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>

我想要的是，然后单击提交按钮时：

1. 发送到guest_details.php的数据
2. 如果已发送数据，则隐藏
   div>
3. 显示节目
   div>

   但是当我像上面那样操作时，那行不通，有人可以提供一个提示来纠正它吗？

   非常感谢

   我彼此之间有几页要与具有id加载的页面进行交互，如下所示：inside process.html

Answer 1

查看您先前的问题和标签，我想您不太了解AJAX。

您需要

1。异步发布表单（不使用AJAX重新加载页面）。2.成功发送数据后，请执行dom操作。

我建议使用jquery进行AJAX发布。

这里是使用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')

  });

 }

并且您在guest_details.html中的html表单必须类似于：-
<form method="POST" id="guest">
<!-- Some cell here -->
<a onclick="ajaxPostForm();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a>
</Form>

上面给出的$ .post是一个非常基本的AJAX帖子。您可以按照Jquery Post中的说明添加更多功能。 
此外，如果您想发布整个表格，可以参考jQuery Form Plugin
更新我想这次我更了解您的问题。在您的更新中，您说的是这个]->
默认情况下，guest_details.html是显示，并且first_start.html隐藏
将这些部分称为guest_details和first_start会更有意义，因为guest_details.html可能意味着您可能已经在另一个窗口中打开的页面guest_details.html。
[无论如何，我确定您是指页面process.html内的部分，因为您使用了jQuery .load()。让我们分别将first_start.html和guest_details.html分别称为first_start和guest_details部分。
根据您的更新，您的意思是：-
初始状态
显示了guest_details部分，并隐藏了first_start
案例/情况
提交guest_details部分中的表单后，隐藏guest_details部分并显示first_start部分。在隐藏guest_details并显示first_start的状态下，可以单击first_start上的按钮，然后单击guest_details部分。 
在隐藏一个部分而显示另一个部分的这些状态期间，重新加载/刷新页面应保留状态。
如果上面是完整的场景，则代码如下：-
<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>

Answer 2

您需要实现ajax才能将数据发布到php