여러 체크 박스가 선택되고 버튼이 전송됩니다.

-1

방금 아약스를 사용하여 여러 개의 체크 박스에 작은 프로젝트를 완료했습니다. 데모는 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); 
?>

출처

2014-05-23 user3659737

우리가 정말보고해야합니까 이 모든 CSS는이 질문에 포함됩니까? 질문에는 문제를 설명 할 수있는 최소한의 코드가 포함되어야합니다. 따라서 여기에 프로젝트를 버리고 답변을 기다리지 마십시오. –

"이제 여러 개의 확인란을 선택한 후 엄지 단추를 클릭하면 전화 데이터베이스에서 변경해야합니다." '그것'은 무엇입니까? 당신은 당신의 질문과 관련된 것만으로 코드의 양과 마크 업을 줄일 수 있습니까? –

죄송합니다. 코드의 양을 줄였습니다. 데모를 확인해 보면 여러 개의 확인란이 전화 데이터베이스를 필터링하고 있습니다. 하지만 지금은 버튼을 만들고 여러 확인란을 선택한 후 버튼을 클릭하면 전화기 데이터베이스 만 업데이트해야합니다. – user3659737

: 다음은 내 코드입니다.

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

이 행을 제거하십시오. updatePhones (opts); 제출 및 기능 updatePhones 물건 아래 수정에

호출이 기능 updatePhones (OPTS) (OPTS)

얻기 양 1, 양 2는 파일을 submit.php을 통과

출처

2014-05-23 13:38:24

안녕하세요 Bharat 변경 작업을 시도했지만 작동하지 않습니다 .. 기능 1에서 금액 이하를 수정 하시겠습니까? updatePhones (opts) anmd 금액 1과 금액 2를 받고 submit.php 파일에 전달하는 방법은 무엇입니까? – user3659737

늦게 답장을 보내 주셔서 감사합니다. 대답을 얻었거나 시도해야합니까? –

여러 체크 박스가 선택되고 버튼이 전송됩니다.

답변

관련 문제