选择多个复选框并使用提交按钮更新数据库

Question

I have just finished small project on multiple checkboxes using ajax. But now i want to use submit button for filter option. So now after multiple checkboxes are selected and after sumbit button are clicked then only it should change in the phone database. Any help ? Thanks. Here is my code: Index.php

<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 = [];
    $checkboxes.each(function(){
      if(this.checked){
        opts.push(this.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> 

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

Answer 1

Well first of all, remove this listener:

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

You don't want to change data in table on checking of a checkbox but only after clicking submit button. I don't see any "Submit" button other than "Apply" that seems to have to do with subsidue options more than with filtering, so add a 'submit' first (actually just a button):

(...)
<div>
  <input type="checkbox" id="Nokia">
  <label for="Nokia">Nokia</label>
</div>
<button id="submitFilter">Filter</button>
(...)

Then throw what you had in checkbox listener to the onClick of submitFilter.

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

I updated the fiddle so it is more accurate to your needs. Check it here

EDIT:

To open a new tab:

var win = window.open(url, '_blank');
win.focus();

Where url is obviously an url you want to open. You can also set it as form target and put the data you want to pass in a form, and make filter a submit.