Opencart 过滤器添加 onclick 事件以替换提交按钮
Opencart Filters add onclick event to replace the submit button
我想在Opencart过滤器中添加一个onclick事件,以替换隐藏在页面之外的提交按钮。 我假设这应该用javascript/jquery来完成,但是实现有点超出我,你能帮忙吗?
.PHP:
<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<ul class="box-filter">
<?php foreach ($filter_groups as $filter_group) { ?>
<li><span id="filter-group<?php echo $filter_group['filter_group_id']; ?>"><?php echo $filter_group['name']; ?></span>
<ul>
<?php foreach ($filter_group['filter'] as $filter) { ?>
<?php if (in_array($filter['filter_id'], $filter_category)) { ?>
<li>
<input type="checkbox" value="<?php echo $filter['filter_id']; ?>" class="click_checkbox_manufacturers-filter" id="filter<?php echo $filter['filter_id']; ?>" checked="checked" />
<label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
</li>
<?php } else { ?>
<li>
<input type="checkbox" value="<?php echo $filter['filter_id']; ?>" class="click_checkbox_manufacturers-filter" id="filter<?php echo $filter['filter_id']; ?>" />
<label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
</li>
<?php } ?>
<?php } ?>
</ul>
</li>
<?php } ?>
</ul>
<a id="button-filter" class="button"><?php echo $button_filter; ?></a>
</div>
</div>
网页输出:
<div class="box">
<div class="box-heading">Refine Search</div>
<div class="box-content">
<ul class="box-filter">
<li><span id="filter-group2">Colour</span>
<ul>
<li>
<input type="checkbox" value="33" class="click_checkbox_manufacturers-filter" id="filter33">
<label for="filter33">Black</label>
</li>
<li>
<input type="checkbox" value="35" class="click_checkbox_manufacturers-filter" id="filter35">
<label for="filter35">Blue</label>
</li>
<li><span id="filter-group4">Scent Name</span>
<ul>
<li>
<input type="checkbox" value="64" class="click_checkbox_manufacturers-filter" id="filter64">
<label for="filter64">Almond</label>
</li>
<li>
<input type="checkbox" value="65" class="click_checkbox_manufacturers-filter" id="filter65">
<label for="filter65">Coconut</label>
</li>
</ul>
</li>
</ul>
<a id="button-filter" class="button">Refine Search</a>
</div>
</div>
JavaScript
<script type="text/javascript">
$('#button-filter').bind('click', function() {
filter = [];
$('.box-filter input[type=''checkbox'']:checked').each(function(element) {
filter.push(this.value);
});
location = '<?php echo $action; ?>&filter=' + filter.join(',');
});
//--></script>
您可以执行以下操作(而不是当前脚本):
<script type="text/javascript">
$(document).ready(function() {
// hide the "submit" button
$('#button-filter').hide();
// bind onChange event to the checkboxes
$('.click_checkbox_manufacturers-filter').live('change', function() {
filter = [];
$('.box-filter input[type=''checkbox'']:checked').each(function(element) {
filter.push(this.value);
});
window.location = '<?php echo $action; ?>&filter=' + filter.join(',');
});
});
//--></script>
这是指向我的相同JS代码的JsFiddle的链接,令人惊讶的是,它正在工作。唯一的问题可能是重定向...我编辑了上面的重定向代码,所以它也应该可以工作。
对于版本 2,将 filter.tpl 文件中的 JavaScript(从 catalog/view/theme/default/template/extension/module/filter.tpl - 如有必要,将"default"更改为您的主题名称)更改为
<script type="text/javascript">
$(document).ready(function() {
$('#button-filter').hide();
$('input[name^=''filter'']').on('change', function() {
filter = [];
$('input[name^=''filter'']:checked').each(function(element) {
filter.push(this.value);
});
location = '<?php echo $action; ?>&filter=' + filter.join(',');
});
});
</script>
在 OC 2.3.0.2 中测试。
相关文章:
- 在提交未提交表格时替换Div
- Django-提交表单Ajax(替换Div)
- 在表单提交将DOM的一部分替换为分部之后,我应该将ajax成功绑定到什么来使我的javascript工作
- 如何将单选按钮替换为还包含提交按钮的图像
- Opencart 过滤器添加 onclick 事件以替换提交按钮
- 在提交时将 HTML 表单替换为 jQuery
- 在 ajax提交后将表单替换为结果
- 我如何在文本输入中禁用正常的输入时提交行为,并用我自己的函数替换它
- 如何在提交时使用jQuery替换表单中的信息
- 替换/编码<并且>在提交之前使用jquery/ajax
- 可以't将提交按钮替换为JQuery
- 在提交后用成功消息替换HTML表单,表单使用单独的php文件发送邮件
- 使用Mootools将提交按钮替换为链接
- 提交时将texarea中的[X]替换为[Y]
- 替换表单提交后的默认占位符
- 在提交表单之前将输入隐藏值替换为通过Ajax获取的值
- 在提交表单后替换内容是行不通的
- Jquery,在提交时替换HTML
- 如何在用户在文本列表中键入单词时突出显示JSON字典中的单词,并在表单提交时用它们的描述替换它们
- 提交时替换表单字段中的期间