2014-05-23 56 views
-1

我剛剛用ajax完成了多個複選框上的小項目。演示可以在這裏找到:demo。但現在我想使用提交按鈕進行過濾選項。所以現在選中多個複選框後,單擊sumbit按鈕後,只有在電話數據庫中才會更改它。任何幫助?謝謝。 這裏是我的代碼:選中多個複選框並提交按鈕

的index.php

<body> 
    <h1>Phones database</h1> 

    <table id="phones"> 
     <thead> 
     <tr> 
      <th>ID</th> 
      <th>Brand</th> 
      <th>Model</th> 
      <th>Price</th> 
     </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 

    <div id="filter"> 
     <h2>Filter options</h2> 
     <div> 
     <input type="checkbox" id="Samsung" checked> 
     <label for="Samsung">Samsung</label> 
     </div> 
     <div> 
     <input type="checkbox" id="iPhone" checked> 
     <label for="iPhone">iPhone</label> 
     </div> 
     <div> 
     <input type="checkbox" id="HTC" checked> 
     <label for="HTC">HTC</label> 
     </div> 
     <div> 
     <input type="checkbox" id="LG" checked> 
     <label for="LG">LG</label> 
     </div> 
     <div> 
     <input type="checkbox" id="Nokia" checked> 
     <label for="Nokia">Nokia</label> 
     </div> 
    </div> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
     function makeTable(data){ 
     console.log(data); 
     var tbl_body = ""; 
      $.each(data, function() { 
      var tbl_row = ""; 
      $.each(this, function(k , v) { 
       tbl_row += "<td>"+v+"</td>"; 
      }) 
      tbl_body += "<tr>"+tbl_row+"</tr>"; 
      }) 

     return tbl_body; 
     } 

     function getPhoneFilterOptions(){ 
     var opts = []; 
     $checkboxes.each(function(){ 
      if(this.checked){ 
      opts.push(this.id); 
      } 
     }); 

     return opts; 
     } 

     function updatePhones(opts){ 
     $.ajax({ 
      type: "POST", 
      url: "submit.php", 
      dataType : 'json', 
      cache: false, 
      data: {filterOpts: opts}, 
      success: function(records){ 
      $('#phones tbody').html(makeTable(records)); 
      } 
     }); 
     } 

     var $checkboxes = $("input:checkbox"); 
     $checkboxes.on("change", function(){ 
     var opts = getPhoneFilterOptions(); 
     updatePhones(opts); 
     }); 

     $checkboxes.trigger("change"); 
    </script> 
    </body> 
</html> 

submit.php

<?php 
require 'Database.php'; 
#### TEMP SET NAMES FÜR UTF8 ################################################### 
include 'Json.php'; 
    $opts = $_POST['filterOpts']; 
    $tmp = array(); 
    foreach ($opts as $opt) { 
     $tmp[] = '"'.$opt.'"'; 
    } 
     $query = 
     'SELECT mobile_phone.id, name, model, price FROM mobile_phone INNER JOIN brand ON brand_id = brand.id WHERE name IN ('.implode(",", $tmp).')'; 


    $result = mysql_query($query); 
    $data = array(); 
    while ($row = mysql_fetch_assoc($result)) { 
    $data[] = $row; 
    } 

echo json_encode($data); 
?> 
+2

我們真的需要看到這個問題中的所有CSS?問題應該包括最少量的代碼來說明你的問題。因此,請不要只是在這裏轉儲您的項目並期待答案。 –

+0

「因此,現在選中多個複選框後,點擊sumbit按鈕後,只有它在電話數據庫中才會發生變化。」它是什麼'?你能把這裏的代碼和標記數量減少到只與你的問題相關嗎? –

+0

嗨,對不起,我減少了代碼量。如果你檢查演示,多個複選框正在過濾電話數據庫。但我想現在創建按鈕,並且在多個複選框被選中並且按鈕被點擊之後,只有手機數據庫應該被更新。 – user3659737

回答

0

在你的代碼在這裏。

var $checkboxes = $("input:checkbox"); 
      $checkboxes.on("change", function(){ 
      var opts = getPhoneFilterOptions(); 
      updatePhones(opts); 
      }); 

刪除此行updatePhones(opts);

上提交和修改下面的東西在功能updatePhones調用此函數updatePhones(選)(選)

獲取量1和量2,並將其傳遞到submit.php文件

+0

嗨Bharat我試圖做的改變,但它不工作..可以請告訴我什麼tododify函數updatePhones(opts)下面的東西anmd如何獲取金額1和金額2並將其傳遞給submit.php文件? – user3659737

+0

對於遲到的回覆感到抱歉。你有答案或者我應該試試嗎? –

相關問題