cakephp 按钮添加更多/更少字段
cakephp button add more / less fields
您好,我正在尝试制作一个按钮,允许我向表单添加 2 个附加字段:1 个文本类型字段和 1 个多项选择器(见图)
fields
我希望能够多次添加这两个字段并将其保存在数据库中,这两个字段的代码如下所示:
<div class="zone_prestations">
<div class="form-group">
<?php
echo $this->Form->label(
'Prestation.zone',
'Zone',
'col-sm-2 control-label'
);
echo $this->Form->input('Prestation.zone',
array('div' =>
array(
'class' => 'col-sm-10'
),
'class' => 'form-control'
));
?>
</div>
<div class="form-group">
<?php
echo $this->Form->label(
'Prestation.id_contract',
'Préstation',
'col-sm-2 control-label'
);
echo $this->Form->input(
'Prestation.id_prestation',
array(
'type' => 'select',
'options' => $prestations,
'empty' => 'Selectionnez les préstations',
'div' => array('class' => 'col-sm-10'),
'class' => 'form-control search-select',
'multiple' => true,
'value' => $selected,
'id' => 'prestation_selector'
)
);
?>
</div>
</div>
知道我有一个多项选择字段,你知道我该怎么做吗?感谢您的帮助
更新 20/02/21
<script type="text/javascript">
$(document).ready(function() {
$("select").select2({ width: '100%' });
});
$(document).ready(function () {
var maxField = 10;
var addButton = $('#add_button');
var wrapper = $('#prestation_select');
var x = 1;
var fieldHTML = '<div class="form-group">';
fieldHTML += <?php echo $this->Form->label(
'Prestation.' + x + '.zone',
'Zone',
'col-sm-2 control-label'
);
echo $this->Form->input('Prestation.' + x + '.zone',
array('div' =>
array(
'class' => 'col-sm-10'
),
'class' => 'form-control'
));
?>
fieldHTML +='</div>';
$(addButton).click(function () {
if (x < maxField) {
x++;
$(wrapper).append(fieldHTML);
}
$("select").select2({ width: '100%' });
});
$(wrapper).on('click', '.remove_button', function (e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
您用于生成 fieldHTML
的代码是 运行 一次,当您的页面加载时,当前版本为 x
。每次单击添加按钮时,您都会得到完全相同的,其中总是带有“1”;它没有用新的 x
重新评估。解决方案应该很简单,只需将 HTML 的计算移到 add 函数中即可。
另外请注意,单击删除按钮时不要减少 x
。如果您从字段 1 开始,然后添加 2、3 和 4,然后删除 2,x
递减 x
将意味着添加另一个字段将为您提供 4 的副本。他们不需要是连续的,你只需要在那里有不同的数字。
您好,我正在尝试制作一个按钮,允许我向表单添加 2 个附加字段:1 个文本类型字段和 1 个多项选择器(见图)
fields
我希望能够多次添加这两个字段并将其保存在数据库中,这两个字段的代码如下所示:
<div class="zone_prestations">
<div class="form-group">
<?php
echo $this->Form->label(
'Prestation.zone',
'Zone',
'col-sm-2 control-label'
);
echo $this->Form->input('Prestation.zone',
array('div' =>
array(
'class' => 'col-sm-10'
),
'class' => 'form-control'
));
?>
</div>
<div class="form-group">
<?php
echo $this->Form->label(
'Prestation.id_contract',
'Préstation',
'col-sm-2 control-label'
);
echo $this->Form->input(
'Prestation.id_prestation',
array(
'type' => 'select',
'options' => $prestations,
'empty' => 'Selectionnez les préstations',
'div' => array('class' => 'col-sm-10'),
'class' => 'form-control search-select',
'multiple' => true,
'value' => $selected,
'id' => 'prestation_selector'
)
);
?>
</div>
</div>
知道我有一个多项选择字段,你知道我该怎么做吗?感谢您的帮助
更新 20/02/21
<script type="text/javascript">
$(document).ready(function() {
$("select").select2({ width: '100%' });
});
$(document).ready(function () {
var maxField = 10;
var addButton = $('#add_button');
var wrapper = $('#prestation_select');
var x = 1;
var fieldHTML = '<div class="form-group">';
fieldHTML += <?php echo $this->Form->label(
'Prestation.' + x + '.zone',
'Zone',
'col-sm-2 control-label'
);
echo $this->Form->input('Prestation.' + x + '.zone',
array('div' =>
array(
'class' => 'col-sm-10'
),
'class' => 'form-control'
));
?>
fieldHTML +='</div>';
$(addButton).click(function () {
if (x < maxField) {
x++;
$(wrapper).append(fieldHTML);
}
$("select").select2({ width: '100%' });
});
$(wrapper).on('click', '.remove_button', function (e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
您用于生成 fieldHTML
的代码是 运行 一次,当您的页面加载时,当前版本为 x
。每次单击添加按钮时,您都会得到完全相同的,其中总是带有“1”;它没有用新的 x
重新评估。解决方案应该很简单,只需将 HTML 的计算移到 add 函数中即可。
另外请注意,单击删除按钮时不要减少 x
。如果您从字段 1 开始,然后添加 2、3 和 4,然后删除 2,x
递减 x
将意味着添加另一个字段将为您提供 4 的副本。他们不需要是连续的,你只需要在那里有不同的数字。