我onchange
在 cakephp3.7 中使用 javascript 事件监听器时遇到问题。事实上,我有一个使用 cakephp3.7 构建的电子商务 Web 应用程序运行良好。现在我想通过动态加载卖家根据卖家选择的产品类别填写的额外字段来增强网站中的销售提交表单。这意味着,如果卖家从类别输入字段中进行选择,那么之前在 CSS 中的 style :electronic
的电子 exta 字段现在将被显示。电子附加字段如下:display
none
id=elctronic
<div id="electronic">
<?php echo $this->Form->control('subcategorie',['label'=>'choose sub category', 'class'=>'form-control', 'option'=>['Computer','Phone','Multimedia'],'empty'=>'choose'); ?>
<?php echo $this->Form->control('brand',['class'=>'form-control', 'placeholder'=>'the brand']); ?>
<?php echo $this->Form->control('model',['class'=>'form-control', 'placeholder'=>'the model']); ?>
</div>
那么以商品clothes
为例,electronic
输入字段将被隐藏,衣服额外字段将显示id=clothe
如下:
<div id="clothe">
<?php echo $this->Form->control('Gender',['label'=>'What gender?', 'class'=>'form-control', 'option'=>['Males','Females'],'empty'=>'choose'); ?>
<?php echo $this->Form->control('Size',['class'=>'form-control', 'placeholder'=>'Size']); ?>
<?php echo $this->Form->control('model',['class'=>'form-control', 'placeholder'=>'the model']); ?>
</div>
使用事件侦听器的类别输入字段onchange
如下所示,extraForm()
应该调用 javascript 函数,但它没有调用,并且存在问题:
<?php echo $this->Form->control('category',['id'=>'categ','label'=>'choose category', 'class'=>'form-control', 'options'=>['electronics','clothes'],'empty'=>'choose'),'onchange'=>'extraForm("categ"); ?>
然后在 ProductsController 的 add() 方法的布局中,我将 extraForm() 函数设置如下:
<script>
function extraForm(s1){
var s1=documentgetElementById(s1);
var s2=documentgetElementById("electronics");
var s3=documentgetElementById("clothes");
if(s1.value == "electronics"){
s2.style.display = "bloc"
} else {
s3.style.display = "bloc"
}
}
</script>
现在已经三天了,因为我无法弄清楚我错过了什么。Yesterday I searched through the net and there were people saying that event listener such as onchange, onclick and onselect event listeners are deprecated for cakephp 3 and I don't understand how.
那么在cakephp3.7中如何实现selected option触发的额外输入表单的动态加载呢?
**
- 第一次编辑
**
就像我在评论中所说的那样,我简化了问题以使其易于理解。完整的上下文是我有 2 个标准字段category
和subcategory
. 当用户选择一个类别时,AJAX函数会向用户显示一个可供选择的子类别列表。
我的 AJAX 是:
$(document).ready(function(){
$('#getSubCat').change(function(e){
$.ajax({
type: "POST",
url: "/products/getsubsaterogie",
data: {categ: $(this).find('option:selected').text()},
dataType: 'json',
cache: false,
headers : {
'X-CSRF-Token': $('[name="_csrfToken"]').val()
},
success: function(data){
console.log(data);
let subcat = $('#subcategories')
for (let sc of data) {
console.log(sc.subcategorie)
$('<option />', {value: sc.subcategorie_id, text: sc.subcategorie}).appendTo(subcat);
}
}
});
e.preventDefault();
})
}) 类别输入字段为:
<?php echo $this->Form->control('categorie_id', ['id'=>'getSubCat', 'options' => $categories, 'label' => __("What category ?"), 'class'=>'form-control', 'empty' => '(choose)']);
?>
用户选择一个类别后,通过 AJAX 从数据库中获取的子类别列表很好地显示在此表单输入中,这onchange
是设置调用extraForm()函数的地方,但没有:
<?php echo $this->Form->control('subcategorie_id', ['id'=>'subcategories', 'label' => __("What subcategory ?"), 'class'=>'form-control', 'options'=> [],'empty' => '', 'onchange' => 'myFormShow("getSubCat","subcategories")']);
?>
并且选择子类别后,没有出现相关的额外表单,但是如果我在CSS中手动更改display
为bloc
,它确实显示,这意味着javascript函数没有调用onchange事件,我什至使用onselect
但仍然没有它。并且 javascript 函数 extraForm 实际上接收 2 个参数,例如extraForm(s1, s2)
. 这是我的真实背景。
我真的被困在这里了。任何帮助都非常感谢,在此先感谢。
- 根据格雷格的要求进行编辑: 根据格雷格的评论,这是我生成子类别列表的蛋糕代码。我不知道所有这些细节都是必要的,因为我认为这是关于 javascript 事件侦听器的 cakephp 3 问题。
public function getsubsaterogie(){
if($this->request->is('ajax')){
$d = $this->request->getData();
$subcat = '';
$cat = TableRegistry::get('Categories')->find()
->where(['categorie' => $d['categ']])
->select('id')
->first();
if(!empty($cat)){
$subcat = TableRegistry::get('Subcategories')->find()
->where(['categorie_id' => $cat->id])
->all();
}
echo json_encode($subcat);
exit();
}
}
在此先感谢,最好的问候!