PHP4 alternatives for json_encode and PDO

PHP
21

Well, you don’t really need any kind of filter script for this, it’s just simple AJAX.

$("#mySaveButton").on("click", function(){
  var checkedInputElements = $("#myForm input:checked");
  
  $.ajax({
      type: "POST",
      url: "yourPHPScript.php",
      data: {checkedElems: checkedInputElements},
      dataType: "text",
      success: function(res){
        // Do something with the result??
      },
    });
});

This way, a list of all of the checked input elements will be available as $_POST['checkedElems'] on the server for you to deal with as you like :slight_smile:

22

Hi Pullo, I already solve this problem by passing attr(“id”) in getPhoneFilterOptions. Its working for me perfectly.I am playing around now with this project as i am learning lot in this.Now next step i am taking is i want to separate the result into tabs.So i want to separate the phone database and i introduce edit button on 1 tab and filter checkbox options with filter button on another tab.So once you click edit button in phone database tab it will go to filter option tab where you can filter checkbox and once you click filter button it will goes to phone database with filtered records.But i am facing problem in this. I dont know how to maintain the Ajax state and our multiple check box result state in this.So if i solve this issue then i will be having very good idea about the Ajax and javascript. Do you have any idea ? Thanks. Here is my code :

tabs.php

<body class="section-1">
<ul id="menu">
<li id="nav-1">
<a href="tabs.php">Phone Database</a>
</li>
<li id="nav-2">
<a href="tabs1.php">Edit Phone Database</a>
</li>
<button type="button" OnClick=" location.href='tabs1.php'">Edit</button>
<div id="contents">
<ul>
<li>
    <?php
    include('index.php');
    ?>
    </li>
</div>
</body>

tabs.php

<body class="section-2">

<ul id="menu">
  <li id="nav-1"><a href="tabs.php">Phone Database</a></li>
  <li id="nav-2"><a href="tabs1.php">Edit Phone Database</a>    
  </li>
  </ul>
<div id="contents">

<form action="tabs.php" name="frm">

<!-------- here i have to use checkbox option and facing problem here-->


<input type="reset" value="Reset Criteria"></button>
<button type="button">Save</button>&nbsp
<button type="button" OnClick=" location.href='tabs.php'">Cancel</button>
</form>
</div>

index.php

<h1>Phones database</h1>

    <table id="phones">
      <thead>
        <tr>
          <th width="15">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">
  <label for="Samsung">Samsung</label>
</div>
<div>
  <input type="checkbox" id="iPhone">
  <label for="iPhone">iPhone</label>
</div>
<div>
  <input type="checkbox" id="HTC">
  <label for="HTC">HTC</label>
</div>
<div>
  <input type="checkbox" id="LG">
  <label for="LG">LG</label>
</div>
<div>
  <input type="checkbox" id="Nokia">
  <label for="Nokia">Nokia</label>
</div>
<button id="submitFilter">Filter</button>

  <fieldset>
    <legend>Subsidy</legend>
    <div>
      <label for="amount1">Amount 1:</label>
      <input type="text" class="amount" id="amount1" />
    </div>

    <div>
      <label for="amount2">Amount 2:</label>
      <input type="text" class="amount" id="amount2" />
    </div>

    <div>Total: $<span id="total">0</span></div>

    <button id="apply">Apply</button>
    <button id="remove" disabled>Remove</button>
  </fieldset>
</div>

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script>
      function makeTable(data){
        var tbl_body = "";
        $.each(data, function() {
          var tbl_row = "",
              currRecord = this;

          $.each(this, function(k , v) {
            if(k==='model'){
              v = "<a href='content.php?id=" + currRecord['id'] +"'>" + v + "</a>";
            } else if (k==='price'){
              v = "<span class='price'>" + v + "</span>";
            }
            tbl_row += "<td>"+v+"</td>";
          })
          tbl_body += "<tr>"+tbl_row+"</tr>";
        })

        return tbl_body;
      }

      function getPhoneFilterOptions() {
     var opts = [];
     $("input[type=checkbox]").each(function () {
         if (this.checked) {
             opts.push($(this).attr("id"));
         }
     });

     return opts;
 }

      function updatePhones(opts){
        if(!opts || !opts.length){
          opts = allBrands;
        }

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

      function subsidyIsValid(){
        var amount1 = $("#amount1").val(),
            amount2 = $("#amount2").val(),
            regex = /^\\d+$/,
            inputValid = false;

        if(regex.test(amount1) && regex.test(amount2)){
          var newTotal = Number(amount1) + Number(amount2)
          $("#total").text(newTotal);
          inputValid = true;
        }

        return inputValid
      }

      function updatePrices(){
        var subsidyTotal = Number($("#total").text());

        $(".price").each(function(){
          var origVal = Number($(this).text())
          $(this).text(origVal - subsidyTotal)
        })
      }

      $("#submitFilter").on("click", function(){
     var opts = getPhoneFilterOptions();
     updatePhones(opts);
 });

      $("#apply").on("click", function(){
        if(subsidyIsValid()){
          $(this).prop("disabled", true);
          $(this).next().prop("disabled", false);
          updatePrices();
        } else {
          alert("Subsidy invalid!")
        }
      });

      $("#remove").on("click", function(){
        $("#amount1").val("");
        $("#amount2").val("");
        $("#total").text("0");
        $(this).prop("disabled", true);
        $(this).prev().prop("disabled", false);

        $checkboxes.trigger("change");
      });

      var allBrands = [];
      $("input[type=checkbox]").each(function(){
        allBrands.push($(this)[0].id)
      })

      updatePhones();
      updatePrices();
    </script> 
  </body>

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);
?>