jQuery:如何创建一个带有多个单选按钮的实时搜索表单

jQuery: How to create a live search form with multiple radio buttons

本文关键字：单选按钮 实时 搜索 表单 搜索表 创建 一个 jQuery 何创建      更新时间：2023-12-10

让我们假设，一个数据库包含许多型号、颜色和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>

现在，我想，我可以使用jQuerychange（）函数来捕捉用户的点击，然后通过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的新手，现在我不知道哪里出了问题。也许你可以告诉我我的错误在哪里。

试试这个，

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

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

Fiddle：演示

又过了一天，睡了个好觉后，我又试了一次，这次我发现了问题的根源：我在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);
    });
  });
});
相关文章：