使用Javascript从DB中筛选结果,这将使DIV重新加载它'基于新参数的内容
Filtering results from a DB with a Javascript that will make a DIV reload it's contents based on new arguments
我需要创建一个带有复选框的表单来过滤从MySQL表中提取的结果。理想情况下,在单击特定的复选框后,将重新加载DIV,运行适当的PHP和PDO查询来过滤所选的条件。
到目前为止,这是我的代码,但它似乎不起作用。。。
有什么建议吗?
谢谢!
<script>
$(document).ready(function() {
$("#colors").change(function() {
console.log("changed...");
var data = $(this).serialize();
console.log(data);
$("#indexMain").load("index.php?data="+data)
});
})
</script>
<div class="colors">
<form method="post" action="index.php">
<?php
$colors = mysql_query("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1");
while ($colorBoxes = mysql_fetch_array($colors))
{
echo "<input type='checkbox' name='color' value='".$colorBoxes[color_base1]."' /> ".$colorBoxes[color_base1]."<br />";
}
?>
<input type="submit" onclick="document.formName.submit();" />
</form>
</div>
我在div中得到的值如下:
$color = $_POST['color'];
if ($selectedColor == '')
{
$items = mysql_query("SELECT * FROM item_descr");
}
else
{
$items = mysql_query("SELECT * FROM item_descr ORDER BY $color");
}
Colors
是您的div的名称,但我认为您希望在您的复选框上激发on change,这些复选框的名称为color
,而没有s
。
$(document).ready(function() {
$("input[type=checkbox][name=color]").change(function() {
console.log("changed...");
var data = $(this).serialize();
console.log(data);
$("#indexMain").load("index.php?data="+data)
});
})
#colors
正在查找具有id='colors'
的元素。要查找类,选择器必须以句点开头,如.color
。在您的任务中,将<div class="colors">
更改为<div id="colors">
可能是合理的
我也没有找到一个具有id=indexMain
($("#indexMain")
)的元素。
你的代码可以这样写:
<script>
$(function() { // short form of jQuery usage
$(".color").change(function() {
console.log("changed...");
var data = $(this).serialize();
console.log(data);
$("#indexMain").load("index.php?data="+data)
})
})
</script>
....
<select class="color"> // your options here
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
....
<div id="indexMain"></div>
但它使用了一个选择列表,我没有测试它——在编辑器中编写了代码。
也许你的意思是:
$('input[name=color]').change(....
相关文章:
- ROR:如何在不重新加载浏览器的情况下从控制器获取参数
- angularjs-ui路由器父状态,参数加载在子状态之后
- 在页面加载完成之前,使用URL参数运行JavaScript
- 如何在使用javascript加载页面时直接设置对象参数
- React 路由器和任意查询参数:页面在加载时无意中刷新
- 在页面加载时调用函数,在按钮单击时再次调用函数,但参数不同
- 使用Javascript从DB中筛选结果,这将使DIV重新加载它'基于新参数的内容
- 使用参数重新加载父页
- 如何通过发送GET和POST的javascript重新加载页面,并附加附加参数
- 你能写一些javascript,根据URL参数加载两个独立的index.html页面吗
- 如何在事件处理程序中包含函数(及其参数),而不在页面加载时调用该函数
- 如何在没有查询字符串和参数的情况下加载jQuery
- 如何在选择Select Box值时将参数作为POST数据传递,这将重新加载同一页面
- 如何重用 ajax 表单加载函数打开多个选项卡,每个选项卡具有不同的参数
- 我如何让参数“someelement”到图像加载
- 在页面加载时更改 URL 参数
- 为什么函数参数需要这么长时间才能加载
- 使用 vent.js 传递参数.如何在触发事件后加载的下一个页面视图中读取该数据
- 配置模板加载程序以传递额外的参数
- 角度 ui 路由器可选查询参数加载控制器两次