如何从checkbox和下拉list中读取信息，并用于查询数据库呢？

Question

我是新手，可能会问到对这里大牛来说简单的基础问题，请多多赐教。
问题是：如下图一个简单页面，
该页面第一行是一个可选择过去时间的日期选择表(计划用datepicker)，下面是我从数据库读取的各个记录并用表格的形式列出。每条记录后面都有一个<input type="checkbox">这样的一个checkbox。在该表的下方，我预计设定一个按钮（按钮没有画出，预计采用<input type="button" value="change">的形式，针对下面实现的功能是不是有更好的button实现代码？）。
我想实现的功能是：点击两个checkbox，并且限定只能点击两个checkbox（否则跳出一个alert的警告窗），再点击按钮，改变这两个记录的位置(序号不变)。预想的功能过程是：点击按钮后，此时把该记录的No.的数值和date下拉表中的日期变量传递出来，据此查询数据库，并对调这两个记录的序号，再在前台列表展现出。我的主要困难是：在一个完整的页面上肯定有多个类似Car 1的列表，这意味着有很多checkbox。如何从被点击checkbox的这条记录中读取No.数值，并且获取下拉表中的日期数值，并用于查询数据库？查询数据库的后台程序我应该能做到，其实也很简单。但前台如何从页面抓取这两个数据，对我是个问题。请大牛们多多帮忙。因为小弟刚接触js\ajax\jquery，一直很头疼，所以小弟在这里恳求：如果可以的话，能否给出核心问题的关键代码片段或者指出类似网上案例，这样方便小弟临摹。
万分感谢啊！

Answer 1

<input type="checkbox" name=??? value=???>
name 用于服务器端识别对象
value 应为数据库中的唯一识别标识

Answer 2

谢谢版主过来指教。
针对我给的例子，比如说第二条记录，是否我应该写成<input type="checkbox" name="record_2" value="2">？
目前还存在这几个细节问题：
1.这些记录的数目是变动的，所以name的命名也必须变动，有困难，该如何实现？用一个循环设置变动的名称？
2. 如果点击第二个记录的checkbox，那该值通过怎么样标识或者方法传递给js程序，并且由怎么样典型的语句来处理呢？我是新新手，别怪我问的这么细，因为你不点，我这里就不通啊。
3.还有个下拉表的变量问题，该如何引入该js程序中呢？暂时想到我不懂的这些细节问题，求指导。

Answer 3

我最近正好做一个东西  跟你上次跟我提到的需求还有这次的问题有点接近...不过显示效果还没做好,操作也略复杂.......就不给你看demo了你说的这个 我大致看了下  是不是说 有不定数量的值要传给后台,而且name啊什么的可能都不同我是这样做的(直接拿我的代码给你看吧,,,//向数据库提交添加完的数据
function queding_item(item_id,obj){
var shuxing_str = "";
$.each($("input.shuxing_col"),function(i ,n ){
var shuxing_col = $(n).attr("shuxing_col");
var num = $(n).val();
if(i == 0){
shuxing_str += '{';
}
shuxing_str += '"'+shuxing_col+'":"'+num+'"';
if(i < $("input.shuxing_col").length -1){
shuxing_str += ',';
}else{
shuxing_str += '}';
}
});
$.ajax({
type:"post",
url:"select.php",
data:{
shuxing_str:shuxing_str,
item_id:item_id,
action:"queding_item"
},
success:function(msg){
if(msg > 0){
xuanding(msg);
}
}
});
}
我获得所有符合要求的元素,即input并且class为shuxing_col
然后用$.each()来循环这个符合要求的元素的集合然后将需要的值拼成一个json字符串(可以转化成数组的那种json字符串比如你可以用name做键名,value做键值传递给PHP PHP拿到后,用json_decode转化成数组循环这个数组然后进行查询..
extract($_POST);
//用户自己添加属性提交
if($_POST && $_POST['action']=="queding_item"){
$shuxingArr = json_decode($shuxing_str,true); //将字符串转化为数组
$ziduan_str = "item_id"; //要插入的字段
$ziduanzhi_str = "'".$item_id."'"; //要插入的字段的值
if($shuxingArr){
$i = 1;
$ziduan_str .= ","; //要插入的字段
$ziduanzhi_str .= ","; //要插入的字段的值
foreach($shuxingArr as $key=>$each){
$ziduan_str .= $key;
$ziduanzhi_str .= "'".$each."'";
if($i < count($shuxingArr)){
$ziduan_str .= ",";
$ziduanzhi_str .= ",";
}
$i ++;
}
}
$sql = "insert into bigitem ($ziduan_str) values($ziduanzhi_str)";
if(mysql_query($sql)){
echo mysql_insert_id();
}else{
echo 0;
}
}
恩可能有一些无用代码     不过这个思路我觉得你可以试试(用$.each()来循环未知个数的符合条件的元素,拼成字符串传递给PHP,PHP转化为数组来处理)

Answer 4

获得Car 1然后再把checkbox一行的另一个字段和日期传人服务器

Answer 5

我仔细看了你的程序，你提出的一些技术点，即ajax传回值得组织问题，以及采用$.each()的方式对不定量的记录进行处理，很好，事实上自从第一次与你沟通到现在，我一直使用foreach函数来操作。但我遇到的难题是事实上是在这些环节之前，一个如何把页面没有显示出来的值传到后台ajax.php文件中的基本问题。问题可以这样详细描述（抱歉啊，这个问题包括大致2-3个细分问题，我都有困难，我只能一个一个请教，敬请指导。另外别担心分数和结贴问题，分数不够我会通过其他问题再补）：通常，在js部分的程序大致如下：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".LeftTruck").click(function(){
            $(this).css("background","#A8A8A8");
            $(this).siblings().css("background","white");
            var n = $(this).text();
            $.ajax({
                type:"get",
                url:"main/ajax.php",
                data:{
                    tankID:n
                },
                success:function(msg){
                    msg = eval("("+msg+")"); 
                             //因为仅仅是示例，这里我删除了很多重复代码部分
                    $("#showTank_5> input").val(msg.brand);
                              }
        });
    });});    
</script>
其中，从页面获取最重要的信息就是var n = $(this).text()，如果我理解不错的话，应该是指定区域的文本以text的形式传给n,并且用n 把值传递给后台ajax.php。但我现在遇到的问题是我需要的最关键的值是不出现在指定区域的页面上的，于是我就想采取采用php直接echo 的方式传，我的思路是：tankID：<?php  echo $id; ?>其中$id 是从数据库读取记录时取得的该记录的关键量。 但这个时候我又遇到了一个问题是：左边的记录列表是通过循环语句得到的，代码是： <?php 
                   $sQuery ="";
                   $sCustomer = com_getReqParamStr("search_cus");
                   $sOrderTime = com_getReqParamStr("search_date");
//函数com_getReqParamStr是我自己写的函数，用来获得search_cus和search_date的post值
                   $sQuery = "SELECT * FROM transport.dingdan";
                    $data = getAll($sQuery);
                   
                   foreach($data as $each)
                   {
//获得ajax.php传来的记录后对每条记录的字段取值
                    $status = $each['status'];
                    $customer = $each['customer'];
                    $depart = $each['locationPick'];
                    $arrival = $each['locationUnload'];
                    $product = $each['productName'];
                   ?>
                      <table class="LeftTask"><tr><td width="20px"><img src="
                   <?php 
//下面是在记录前面加红、绿、黄球的图
                    if ($status == 1)
                    {
                    $ball = "Images/bullet_red.png";
                    }
                    elseif ($status == 2)
                    {
                    $ball = "Images/bullet_yellow.png";
                    }
                    elseif ($status == 3)
                    {
                    $ball = "Images/bullet_green.png";
                    }
                    echo $ball;
                   ?>
                   
                   "/></td> <td width="98px"><p>
                   
                   <?php 
                  
                   switch ($customer)
                   {
                    case 1:
                    echo "HOYER";
                    break;
//这里删除与本问题相关的很多代码
                     }
                   
                   ?>
上述代码的效果图：上面的记录列表是通过循环语句得到的，这就是说$id的值是变的，php代码和js代码是分开的，因此js部分我就获取不到所点击记录对应的$id。同时，$id又不会显示在每条记录条的文本上，所以通过$(this).text()也无法获得关键值。这个问题，我绞尽脑汁没有想出来怎么弄。这个问题看似简单，但已经成为我现在最棘手的问题，很着急啊，不知有否高招？！ 

Answer 6

上面的记录列表是通过循环语句得到的，这就是说$id的值是变的，php代码和js代码是分开的，因此js部分我就获取不到所点击记录对应的$id。同时，$id又不会显示在每条记录条的文本上，所以通过$(this).text()也无法获得关键值。这个问题，我绞尽脑汁没有想出来怎么弄。
re:
js执行时,php就已 经收工了，直白点说js执行的环境是php执行完的结果。怎么就无法获取了：

Answer 7

<?php
$news=array(
array('id'=>1,'title'=>'abc'),
array('id'=>2,'title'=>'def'),
array('id'=>3,'title'=>'ghi'),
array('id'=>4,'title'=>'jkl'),

);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<title>无标题文档</title>
</head><body>
<?php foreach (!empty($news)?$news:array() as $n):?>
<dl class="list_item">
<dd>
<input type="hidden" name="id" value="<?php echo $n['id'];?>" />
<a class="item_title" href="javascript:;"><?php echo $n['title'];?></a>
</dd>
</dl>
<?php endforeach;?>
                    
<script type="text/javascript">
jQuery(function($){
$('.item_title').click(function(e){
e.preventDefault();
alert($(this).parent().find('input').val());

});

});</script>
</body>
</html>

Answer 8

<input type="checkbox" name=??? value=??? a1='' a2='' a3=.....>设置多个属性值。就可以只遍历 checkbox 就可以获取到需要的数据。

Answer 9

指教的对，其实我遇到的第一个问题就是如何从一个Php循环语句中动态获取$id这个每条记录的关键变量。
你的代码对我很有启发，我琢磨后再回帖续问。谢谢。

Answer 10

我是新新手，刚才琢磨了你的代码，用一句话描述我的感觉：人类的智慧和技巧真是无极限。
为了更好的学习你的代码，我把你的代码重新贴一遍，然后逐句解读，你看我理解的对否？<?php
//下面是建立一个数组的数组，方便后面使用foreach
$news=array(
    array('id'=>1,'title'=>'abc'),     //数组包括两个字段：id和title
    array('id'=>2,'title'=>'def'),
    array('id'=>3,'title'=>'ghi'),
    array('id'=>4,'title'=>'jkl'),
     
);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<title>无标题文档</title>
</head>     <!--上面是一些基本引用和设置----><body> <!-这里的基本思路是：其实在每条记录前对于$id这个变量是隐藏的，但可供后面调用，高，实在是高！->
<?php foreach (!empty($news)?$news:array() as $n): ?>
<!--上面的foreach是调用数组news里面每个小数组，不过你用的格式和我给出的格式不一样---->
<dl class="list_item">     <!--查了之后，知道这个自定义标签---->
<dd>
    <input type="hidden" name="id" value="<?php echo $n['id'];?>" /> <!-隐藏显示id->
    <a class="item_title" href="javascript:;"><?php echo $n['title'];?></a>
<!-正常显示链接->
</dd>
</dl>
<?php endforeach;?>    <!-foreach结束，问题一！！！！->
 
<!-js部分->                    
<script type="text/javascript">
jQuery(function($){                           <!-这个$啥意思？->
    $('.item_title').click(function(e){       <!-问题二！！！！->
        e.preventDefault();                    <!-问题三！！！！->
        alert($(this).parent().find('input').val());
                         <!-问题四！！！！->
    });    
     
});
 
</script>
</body>
</html>
我是新手，有时候问的很细而且问很基本的事情，别介意。看了你的代码，一句话，思路实在高！我有几个细节问题：
问题一：程序我运行过，能运行，你的foreach写法肯定对，但为什么不是传统的{}这样呢？问题二：我主要不理解这里。function(e)为什么function()里面有e，这个代表什么意思？ 还有，根据后面语句，$('.item_title')显然也包括<input type=“hidden”.....>这部分，但在定义class为item_title时，不是应该指<a class="item_title" href="javascript:;">以及后面的内容么？怎么就包括<input...>了？还有，href="javascript:这个后面是否应该跟上js函数名称jQuery()么？问题三：e.preventDefault()是不是起到阻止链接，而是按照语句进行alert的操作？
问题四：最头疼的就是js这样的语句，$(this).parent().find('input').val()，我的逻辑思维到目前为止还是接受不了这种充满想象力的语句，parent()是指？find('input')显然指this部分（这就是说class="item_title" 包括<input...>）。感谢啊，代码切中了我所提第一个小问题。这里我要抱歉一下问了这么多细节，不问清楚，我还是不会用，在js面前还是大傻蛋。

Answer 11

我顺着街头小贩的思路一直摸索下去，尼玛，这个思路太强大了，我今天解决了几个问题。 
以后我想传递什么值，只要偷偷在网页的哪里放在<input....>里面就可以了。晕死，感觉都有点作弊嫌疑了。现在只剩下本贴一开始说的问题了：就是checkbox的问题。从被点击了checkbox的所在行的记录取得最关键的信息，并用于操作数据库，这个过程可以分为这几个步骤：
1. 生成car 1 这样的记录表，这个我可以搞定;基本代码为： 
<!---下面只是示例，真正的记录表肯定要循环得到---->
<table cellpadding="0px" cellspacing="0px" border="0px" style="text-align:left; width:100%;">
                            <tr>
                                <td colspan="7"><h2>Car 1</h2></td>
                            </tr>
                            <tr>    
                                <th width="30px"><p>No.</p></th>
                                <th width="120px"><p>Tank No.</p></th>
                                <th width="120px"><p>Departure</p></th>
                                <th width="120px"><p>Arrival</p></th>
                                <th width="70px"><p>Work No.</p></th>
                                <th colspan="2"></th>
                            </tr>
                          <tr><td colspan="7" style="padding-top:6px;"></td></tr>
                            <tr style="height:30px; valign="middle">    
                                <td><p>1</p></td>
                                <td><p>RYCU9930357</p></td>
                                <td><p>AAAAAAA</p></td>
                                <td><p>BBBBBBB</p></td>
                                <td><p>1031239</p></td>
                                <td></td>
                                <td><input type="checkbox" class="checkbox" /></td>
                            </tr>
                            <tr><td colspan="7" style="padding-top:6px;"></td></tr>
                            <tr style="height:30px;  valign="middle">    
                                <td><p>2</p></td>
                                <td><p>RYCU9930357</p></td>
                                <td><p>AAAAAAA</p></td>
                                <td><p>BBBBBBB</p></td>
                                <td><p>1031239</p></td>
                                <td></td>
                                <td><input type="checkbox" class="checkbox" /></td>
                            </tr>
                        </table>
                       <tr style="margin-bottom:12px; margin-top:12px;">
                        <td style="background-color: #316C8C; border:1px solid  #316C8C; border-radius:5px; padding:10px; color:#ffffff;">
                                  <input type="submit" value="change" class="blue_btn">
                        </td>
                       </tr>效果图为：上面这部分没有问题。2.后面的步骤就是点击checkbox，取出该条记录的id，传给后台。我已经可以按照街头小贩的思路，把该记录的id用hidden的方式嵌入即可该记录。但如何把点击过的checkbox和这个嵌入的值联系起来？根据其他大牛的指点，我是不是应该在<input type="checkbox" name="这里取个动态的name？" value="这里通过循环给出该记录的id？">。这里就有点思路阻塞了。3.后台数据库操作以及返回信息，由js操作，这部分似乎应该没有问题了，我自己可以摸索解决。前面几个大牛说类似于<input type="checkbox" name=??? value=??? a1='' a2='' a3=.....>，这个怎么和所在行记录的id数值联系起来？关键存在多个记录表，且是循环给出的？现在就是第2个步骤遇到这个问题，这个就是剩下的最后问题了。感觉就是思路的那层窗户纸没有捅破。
请大牛们指点一二！这里再三拜谢啊！！！

Answer 12

我都把不想让人看到的放在一个div中，随便你怎么放。最后给 div display:none

Answer 13

忍不住还想问：div display:none，这个是js语句吧？放在网页代码最后，还是div定义之后呢？还是div的定义的范围内？还是咋的呢？
这个思路太牛叉了，想多大牛的一般做法。

Answer 14

忍不住还想问：div display:none，这个是js语句吧？放在网页代码最后，还是div定义之后呢？还是div的定义的范围内？还是咋的呢？
这个思路太牛叉了，想多大牛的一般做法。<div style="display:none">....</div>

Answer 15

忍不住还想问：div display:none，这个是js语句吧？放在网页代码最后，还是div定义之后呢？还是div的定义的范围内？还是咋的呢？
这个思路太牛叉了，想多大牛的一般做法。<div style="display:none">....</div>谢谢啊。
这样吧，看大家这么帮忙，帮助我解决不少问题，尤其街头小贩，给了我很强大的思路。
那我就结贴了，然后新开帖再问一下。
考虑到街头小贩给我代码以及这么好的思路，70分，20分左右分给若干提示我的人，特别感谢再看我一眼一直以来的帮助以及给了一段他的代码，我剩下的分给他(来日方长，新帖再补分，请见谅)。

Answer 16

忍不住还想问：div display:none，这个是js语句吧？放在网页代码最后，还是div定义之后呢？还是div的定义的范围内？还是咋的呢？
这个思路太牛叉了，想多大牛的一般做法。<div style="display:none">....</div>谢谢啊。
这样吧，看大家这么帮忙，帮助我解决不少问题，尤其街头小贩，给了我很强大的思路。
那我就结贴了，然后新开帖再问一下。
考虑到街头小贩给我代码以及这么好的思路，70分，20分左右分给若干提示我的人，特别感谢再看我一眼一直以来的帮助以及给了一段他的代码，我剩下的分给他(来日方长，新帖再补分，请见谅)。对了，有不高兴的可随时联系我，我会补救。

Answer 17

<td><input type='hidden' name='id' value="<?php echo $n['id'];?>" /></td>
<td><input type="checkbox" class="checkbox" /></td>js
$('input[type='checkbox'].click(funciton() {
    alert($(this).parent().prev().find('input').val());
});