如何记住复选框/单选按钮选择在多页形式 [英] How to Remember Checkbox/Radio-button Selection in a mulit-page form

问题描述

我们有一个跨越多个页面的窗体，窗体中有多个复选框和单选按钮。要求是，当用户浏览表单的多个页面时，用户应该能够在按下表单提交按钮之前看到他已经选中的复选框和单选按钮。

我复制用于生成表单中复选框的代码段 - 这是一个仅示例代码。

 < form action =car_model.phpmethod =postname =car_formid =car_form> 
 
 $ q10 =SELECT ... 
 $ r10 = mysqli_query（$ dbc，$ q10）; 
 if（mysqli_num_rows（$ r10）> 0）{
 while（$ row10 = mysqli_fetch_array（$ r10，MYSQLI_ASSOC））
 {
 echo'< p class =normal_text>< input type =checkboxname =model_selection [] value ='。 $ row10 ['model_id']。 ''onclick =return KeepCount（）; />'。$ row10 ['car_model_name']。< / p>< / br>'; 
} 
} 
 
< / form> 
 
 
 if（$ pages> 1）{
 
 echo'< br />< p> ;'; 
 
 //确定脚本所在的页面：
 $ current_page =（$ start / $ display）+ 1; 
 
 //不是第一页，做一个Previous按钮：
 if（$ current_page！= 1）{
 echo'< a href =car_model.php？s ='。 （$ start  -  $ display）。 '& p ='。 $页。 '>上一页< / a>'; 
} 
 
 //创建所有编号的页面：
 for（$ i = 1; $ i < ; $ i ++）{
 if（$ i！= $ current_page）{
 echo'< a href =car_model.php？s ='。 （（$ display *（$ i-1）））。 '& p ='。 $页。 ''>'。$ i。'< / a>'; 
} else {
 echo $ i。''; 
} 
} 
 b $ b //如果不是最后一页，请创建一个Next按钮：
 if（$ current_page！= $ pages）{
 echo'< a href =car_model.php？s =' 。 （$ start + $ display）。 '& p ='。 $页。 ''>下一页< / a>'; 
} 
 
 echo'< / p>'; 
 
} 
  
 
 
 
我理解JQuery是一个很好的工具，如何使用它？
解决方案
如果使用服务器端会话变量不是一个选项，那么你可以这样实现它，当你单击下一步，而不是加载一个新的页面，你只是隐藏当前
 
 
 
这可以很容易地用jQuery完成，这里是一个非常简单的例子让你开始：
  $（＃next b $（＃page1）。hide（）; 
 $（＃page2）show（）; 
}）; 
 
 $ ）.click（function（）{
 $（＃page1）。show（）; 
 $（＃page2）。hide（）; 
}）; 
  
  Fiddle  
 
 
 
祝你好运！
 
We have a form that Span Across multiple pages and the form is full of checkboxes and radio-buttons. Requirement is that when a user navigates across multiple pages of the form, the user should be able to see the checkboxes and radio-buttons he has already Selected before the form Submit button is pressed.

I am copying the code segement that is used to generate the Checkboxes in the form - this is a Sample code Only.
 <form action="car_model.php" method="post" name="car_form" id="car_form">

     $q10 = "SELECT ...
 $r10 = mysqli_query ($dbc, $q10); 
 if (mysqli_num_rows($r10) > 0) {    
       while ($row10 = mysqli_fetch_array($r10, MYSQLI_ASSOC)) 
       {
         echo '<p class="normal_text"><input type="checkbox" name="model_selection[]" value="' . $row10['model_id'] . '" onclick="return KeepCount()"; />' . $row10['car_model_name'] . '</p></br>';      
       }
     }

  </form>


    if ($pages > 1) {

        echo '<br /><p>';

        // Determine what page the script is on:    
        $current_page = ($start/$display) + 1;

        // If it's not the first page, make a Previous button:
        if ($current_page != 1) {
            echo '<a href="car_model.php?s=' . ($start - $display) . '&p=' . $pages . '">Previous</a> ';
        }

        // Make all the numbered pages:
        for ($i = 1; $i <= $pages; $i++) {
            if ($i != $current_page) {
                echo '<a href="car_model.php?s=' . (($display * ($i - 1))) . '&p=' . $pages . '">' . $i . '</a> ';
            } else {
                echo $i . ' ';
            }
        }  

        // If it's not the last page, make a Next button:
        if ($current_page != $pages) {
            echo '<a href="car_model.php?s=' . ($start + $display) . '&p=' . $pages . '">Next</a>';
        }

        echo '</p>';  

    }       
I understand that JQuery is a Good tool for this purpose - how to use it?
解决方案
If using server side session variables is not an option then you could implement it in such a way that when you click "next" instead of loading a new page you just hide the current content place holder of the visible part of the form and show the next one at it's place and the same when clicking back.

This can easily be done with jQuery. Here is a very simple example to get you started:
$("#next").click( function () {
    $("#page1").hide();
    $("#page2").show();
});

$("#back").click( function () {
    $("#page1").show();
    $("#page2").hide();
});
Fiddle

Good luck!

                        
这篇关于如何记住复选框/单选按钮选择在多页形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！