Question

让我们假设，一个数据库包含许多模型，颜色和2,4和5门汽车的条目。

任务： 创建一个搜索表单，让用户只使用单选按钮选择门的型号，颜色和数量。每次用户选择单选按钮时，都应更新搜索结果。没有提交按钮。

HTML代码：

<form id="searchform">
  <div>
  <input id="car_model1" type="radio" name="model" value="bmw"> BMW
  <input id="car_model2" type="radio" name="model" value="peugeot"> Peugeot
  <input id="car_model3" type="radio" name="model" value="fiat"> Fiat
  </div>

  <div>
  <input id="car_colour1" type="radio" name="colour" value="white"> White
  <input id="car_colour2" type="radio" name="colour" value="red"> Red
  <input id="car_colour3" type="radio" name="colour" value="blue"> Blue
  </div>

  <div>
  <input id="car_door1" type="radio" name="door" value="2"> Two
  <input id="car_door2" type="radio" name="door" value="4"> Four
  <input id="car_door3" type="radio" name="door" value="5"> Five
  </div>
</form>

<div id="searchresult"></div>

现在，我想，我可以使用jQuery change（）函数来捕获用户点击，然后通过post（）向数据库发送请求。但不知怎的，我无法让它发挥作用。这是我的尝试：

Javascript代码

$("[id^=car]").change(function() {
  var data = $("#searchform").serialize();
  $.post("process_data.php", data, function(response) {
    $("#searchresult").html(response);
  });
});

当然有PHP代码来处理请求，但问题是Javascript没有被执行。更改 - 事件不起作用。我也尝试了click（）和keyup（）。同样的负面结果。

我是jQuery和Ajax的新手，现在我不知道出了什么问题。也许你可以告诉我我的错误在哪里。

Answer 1

试试这个，

$("input[id^=car]").change(function() {

我不会说你的selector错了。但是在element name之前使用attribute selector是一种很好的做法。

小提琴：DEMO

Answer 2

又过了一天，睡了一觉后我再次尝试了，这次我找到了问题的根源：我在HTML的<head>部分加载了脚本。因此我需要确保文档已完全加载，使用ready（）函数，否则change（）函数不起作用：

$(document).ready(function() {
  $("input[id^=car]").change(function() {
    var data = $("#searchform").serialize();
    $.post("process_data.php", data, function(response) {
      $("#searchresult").html(response);
    });
  });
});

jQuery：如何使用多个单选按钮创建实时搜索表单

2 个答案: