首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

单击添加按钮时,Yii2动态表单不会添加新字段

在Yii2中,动态表单是一种允许用户在运行时添加新字段的表单。当单击添加按钮时,Yii2动态表单不会自动添加新字段的原因可能是缺少相应的JavaScript代码或配置。

要解决这个问题,可以按照以下步骤进行操作:

  1. 确保在视图文件中正确地引入了Yii2的JavaScript库和相关依赖。可以通过在视图文件中添加以下代码来实现:
代码语言:txt
复制
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\bootstrap\Button;
use yii\web\JsExpression;

/* @var $this yii\web\View */
/* @var $model app\models\YourModel */
/* @var $form yii\widgets\ActiveForm */

$this->registerJsFile('@web/js/jquery.js', ['depends' => [\yii\web\JqueryAsset::class]]);
$this->registerJsFile('@web/js/yii.js', ['depends' => [\yii\web\JqueryAsset::class]]);
$this->registerJsFile('@web/js/yii.activeForm.js', ['depends' => [\yii\web\JqueryAsset::class]]);
  1. 在视图文件中,为添加按钮绑定一个JavaScript事件,以便在单击按钮时动态添加新字段。可以使用Yii2的ActiveForm来实现这一点。以下是一个示例代码:
代码语言:txt
复制
<?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>

<!-- 表单字段 -->

<div class="form-group">
    <?= Html::button('添加字段', ['class' => 'btn btn-success', 'id' => 'add-field-button']) ?>
</div>

<?php ActiveForm::end(); ?>

<?php
$js = <<<JS
    var index = 0;
    $('#add-field-button').on('click', function() {
        var template = '<div class="form-group">' +
            '<label class="control-label">新字段</label>' +
            '<input type="text" class="form-control" name="YourModel[newFields][' + index + ']" />' +
            '</div>';
        $('#dynamic-form').append(template);
        index++;
    });
JS;

$this->registerJs($js);
?>

在上述代码中,我们为添加按钮添加了一个点击事件,每次点击按钮时,会动态地添加一个新的输入字段。

  1. 在控制器中,处理提交的表单数据并保存到数据库中。可以使用Yii2的模型来处理表单数据。以下是一个示例代码:
代码语言:txt
复制
public function actionCreate()
{
    $model = new YourModel();

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        // 保存成功后的操作
        return $this->redirect(['view', 'id' => $model->id]);
    }

    return $this->render('create', [
        'model' => $model,
    ]);
}

在上述代码中,我们使用load()方法将表单数据加载到模型中,并使用save()方法将数据保存到数据库中。

通过以上步骤,当单击添加按钮时,Yii2动态表单将会动态地添加新字段,并将提交的数据保存到数据库中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

bootstrapValidator 中文API

optionalParameter, ...): Type of return value - 方法的目的 激活addField addField(field*, options): BootstrapValidator - 添加一个新的字段...如果没有定义,这些选项将通过以下方式合并:从字段的HTML属性解析的选项调用插件时设置的当前选项 从字段的HTML属性解析的选项 调用插件时设置的当前选项 如果要添加新字段后要执行其他任务,则触发added.field.bv...在提交表单时也不会执行任何验证。当您要在自定义提交处理程序中提交表单时,可能会使用它。 破坏 destroy() - 破坏插件。 它将删除所有错误消息,反馈图标以及关闭插件创建的事件。...当您需要重新验证其值由其他插件更新的字段时使用它。 默认情况下,一旦该字段已经被验证并被标记为有效的插件,该插件就不会重新验证该字段。当与其他插件一起使用时,字段值被更改,因此需要重新验证。...当您想通过单击按钮或链接而不是提交按钮来验证表单时,这很有用。

13.2K50

如何在 WordPress 中创建联系表格?

然后点击添加新插件。 在搜索框中搜索 Ninja forms。你可以选择任何联系人插件。 单击安装,然后在搜索到的插件上激活。 最后,插件已安装。...你将在 Ninja 表单中看到默认表单。 通过单击默认表单的设置选项删除默认联系表单。 通过单击“添加新”按钮创建一个新表单。...当你单击它时,你的表单将被创建。 将创建一个简单的联系表单,其中包含名称、电子邮件、消息和提交按钮等字段。 你可以通过在Ninja Forms插件选项中选择空白表单选项来根据需要添加更多字段。...第 3 步:要将此表格添加到我们的网站,你应该首先在你的网站上创建联系页面,然后将联系表格添加到此页面。 单击页面,然后添加新的。 输入页面标题“联系我们”。...要添加表单,请单击标题下方的添加表单选项。 弹出窗口将出现并选择你在 Ninja Form 中创建的表单。 然后单击“插入”,表单将插入到你的页面中。 点击发布按钮。

2.9K21
  • yii2基础之modal弹窗的基本使用

    我们看看在yii2中如何使用modal。 比如我们之前添加数据的时候,通常情况下会点击按钮跳转到添加页面,保存后再跳转到列表页。 现在我们希望点击添加按钮的时候,在当前页面弹窗添加数据,看具体实现。...footer' => 'Close', ]); Modal::end(); 3、给按钮添加点击事件...确实,你也可以直接在页面上echo $this->renderAjax();,不过需要提醒的是,该操作记得修改表单提交的action哦。...="#identifier" 来指定要切换的特定的模态框(带有 id="identifier") 以上,我们仅仅是在yii2中实现了modal的基本使用。...思考两个问题 modal如何结合gridview进行使用 modal中如果使用的是表单,表单提交后如何对数据进行验证

    1.9K31

    ExtJs二(实现登录)

    一般的登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证码的图片、登录和重置按钮。因而需要用到的ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...第二句表示将表单面板向内压缩5像素,这样表单内的组件就不会和窗口的内边框粘在一起,这个可根据个人喜好设置。第三句的作用就是让表单面板的背景颜色和窗口融合在一起,而不是默认的白色,这还是个人喜好问题。...}  11.表单余下的就是添加登录和重置按钮了,代码如下: dockedItems: [{ xtype: 'toolbar', dock: 'bottom', ui: 'footer', layout...登录按钮预设为禁用的。formBind配置的作用是只有在表单内输入符合要求时才能使用该按钮,这个设计在Ext JS4也是新加入的,很方便,不再需要自己去写代码实现这个了。...其实不调用isValid也行,因为登录按钮只要在isValid为true时才能用。

    1.9K20

    ExtJs二(实现登录)

    一般的登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证码的图片、登录和重置按钮。因而需要用到的ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...第二句表示将表单面板向内压缩5像素,这样表单内的组件就不会和窗口的内边框粘在一起,这个可根据个人喜好设置。第三句的作用就是让表单面板的背景颜色和窗口融合在一起,而不是默认的白色,这还是个人喜好问题。...}  11.表单余下的就是添加登录和重置按钮了,代码如下: dockedItems: [{ xtype: 'toolbar', dock: 'bottom', ui: 'footer', layout...登录按钮预设为禁用的。formBind配置的作用是只有在表单内输入符合要求时才能使用该按钮,这个设计在Ext JS4也是新加入的,很方便,不再需要自己去写代码实现这个了。...其实不调用isValid也行,因为登录按钮只要在isValid为true时才能用。

    2.1K10

    【自然框架】之鼠标点功能现(一):单表的增删改查(即上次5月23日活动的一个主题)【Demo、源码下载】

    7、 单击“功能按钮维护”按钮,打开“节点里的功能按钮”页面,这里可以添加、修改需要的功能按钮。(1-2分钟) 【表9:功能按钮】 ?...8、 单击“选择列表、表单的字段”按钮,打开选择字段的页面,选择列表、表单、查询里面需要的字段。(1分钟以内) 【表10:选择字段】 ? 9、 设置列表、表单、查询条件。...单击“列表字段维护”、“查询字段维护”、“表单字段维护”按钮,就可以进入相关的页面,对列表、表单、查询进行具体的调整。(0.5-3分钟) 【表11:调整列表】 ? 【表12:修改查询条件】 ?...”表,单击“查看字段”按钮。...添加了新的功能节点,又添加了按钮,那么角色管理会是什么样子的呢?添加新的功能节点、按钮之后,在添加角色的页面里,这些新添加的就会自动的出现。

    80480

    浅谈csrf攻击以及yii2对其的防范措施

    凡是我yii2学习社群的成员都知道,我不止一次给大家说构造表单100%使用yii2的ActiveForm来实现,这除了能和AR更好结合外就是自动生成csrf隐藏域,一个非常安全的举措。...2、当老刘(liuxiaoer)访问此网页后,上面的请求会被发送到银行,此刻还会带着老刘(liuxiaoer)自己的浏览器cookie信息,当然这样一般也不会成功,因为银行服务器发现老刘(liuxiaoer...CSRF防御方案 基于CSRF攻击特点,在业界目前防御 CSRF 攻击主要有三种策略: 验证 HTTP Referer 字段; 在请求地址中添加 token 并验证; 在 HTTP 头中自定义属性并验证...HEEP Referer 在http请求的时候,头部有一个叫做Referer的字段,该字段记录本次请求的来源地址。...比如在请求前生成一个token放到session中,当请求发生时,将token从session拿出来和请求提交过来的token进行对比,如果相等则认证通过,否则拒绝。

    2.5K60

    实战 | 0~1 自定义组件开发问卷小程序

    1.单击【新建数据源】按钮选择【数据源模型】。 2. 在打开的页面里,数据源名称输入问卷调查,数据源标识输入 survey。 3. 单击【添加字段】按钮,添加数据源相关字段。...类似地,依次添加字段 phone、job、industry。如下图 所示。 4.由于参与问卷调查用户只需提交即可,因此设置【动作】时只需勾选【新增】方法,其他均保持默认。...设置完毕后需要单击页面底部的【立即创建】按钮,否则刚才添加的字段都不生效。...单击【表单手机号码】组件,设置该组件的表单字段名称为 phone,标题为手机,是否必填开关设置为开。 6....调查项添加完毕后,给调查表内容底部增加提交按钮。按钮放置在表单容器的插槽中,与表单组件平级,以关联到同容器内的表单组件数据。

    3K20

    邮件狂欢:Next.js和Resend SDK的电子邮件魔法

    单击页面右侧的“创建 API 密钥”按钮。将出现一个包含表单的模式窗口。为API 密钥名称选择一个名称,然后单击“添加”按钮。单击“添加”按钮后,将为您生成 API 密钥。...在仪表板的左侧,选择域并单击添加域按钮:出现一个新页面。通过在输入字段中输入域来添加域。然后单击“添加”按钮。现在您已添加域,下一步是添加域名系统 (DNS) 记录。...您将被重定向到 DNS 提供商页面,您可以在其中添加 DNS 记录。添加您从重新发送仪表板复制的所有 DNS 记录。然后单击“添加”按钮。接下来,导航回重新发送仪表板并单击验证 DNS 记录按钮。...定义一个名为 的异步函数onSubmit来在用户提交表单时处理表单提交。...reset提供的功能用于useForm在提交后重置表单字段。实施动态电子邮件模板使用 React Email,创建现代电子邮件模板变得非常容易。

    2K00

    k3cloud开发实例

    NameDescription AfterBarItemClick菜单单击事件完成后处理扩展接口 AfterBindData绑定数据后事件处理后扩展接口 AfterButtonClick按钮单击之后调用...分录行单击事件 EntityRowDoubleClick分录行双击事件 EntryBarItemClick分录菜单单击事件处理扩展接口 EntryButtonCellClick表格按钮单击时调用 FieldLabelClick...resultEntity.DynamicProperty.GetValue(e.BizDataObject); int row = 0; foreach (OperateResult rowResultin _results) { // 添加新行...通常我们在IDE里通过配置实体服务规则实现表单字段的缺省值赋值: 但有时需要根据一些参数动态设置值时,就需要用插件实现。下面举一个例子,新增单据时根据当前组织获取邮件的缺省值,赋值到当前数据包。...该事件只在新增表单模型后触发,用于对新增后表单模型进行相关操作。此插件的操作不会引起Model.DataChanged值改变。

    4.2K12

    价值1500€的逻辑漏洞挖掘思路分享

    1 绕过前端校验更改地址 当我访问学生个人资料的页面时发现没有权限更改学生的地址等信息,但是Save按钮是处于活动状态,但是点击后并不会发生任何改变,因为所有表单字段已经被锁定。...但是,他们无法编辑所有这些信息,他们的权限只能编辑某些特定的字段。 例如姓名和地址等信息,但是当我们单击编辑按钮时,只能更改联系人字段。 当我以这种方式发送请求时,我遇到了以下 PUT 请求。...此处我们可以看到所有更改成功提交并且显示界面也发生了变化 3 越权添加家长信息 家长用户只能编辑自己的信息,他们无法添加新的父联系人字段。...但当我发送编辑联系人表的请求时,更改参数中的所有 ID 值,就能够创建新的联系人表。 图片中的请求与第二个报告中的 PUT 请求相同。...住宅地址示例 请注意,虽然“删除”按钮对于住宅地址处于活动状态,但对于官方地址没有这样的按钮。 官方地址示例 因此,我单击了学生的官方地址编辑按钮。我运行了Burp Suite并单击保存按钮。

    1.2K20

    实战 | 0~1基于模板开发问卷小程序

    步骤2:编辑数据源 使用模板成功后,单击【数据源管理】,即可看到新加了一份名为【低码分享活动报名表】的数据源。 1.单击名称即可浏览表中的字段名称、字段标识和数据类型等详细信息。 2....设置完毕后单击【确定】就增加了一个字段。 5. 不需要的字段可以删除,可以单击操作列上的【删除】按钮删掉,本文以删掉感兴趣的话题字段为例。 6....设置完毕后单击页面底部的【确定】,否则刚才添加的字段都不生效。 步骤3:修改页面 1.数据源设置完毕后就需要创建页面,单击【应用管理】,找到刚才创建的应用,单击【编辑】按钮进入应用编辑器。...若要添加内容,可以选中【插槽 content】下的【插槽 content Slot】组件(即表单容器的插槽容器),再单击组件库中所需添加的组件,如添加【表单单选】组件。 3....选中刚刚添加的【表单单选】组件,设置表单字段名称(字段名称填写为 job),组件的标题(我的职业是),将布局方式改为垂直,并依次增加单选项的内容,单选项名称分别为前端开发、后台开发、设计师、运营、产品策划

    2.2K20

    表单的 9 种设计技巧【下】

    可以通过添加一个用于切换的链接,并根据折叠/展开的状态动态改变链接文本: 图片 1. 首先在表单中添加一个链接组件: 图片 2. 创建一个临时状态 showHide,设置默认值为 false。...然后为链接组件添加一个单击事件,动作选择设置临时状态,再选择创建好的临时状态 showHide,再参照下图输入值: 图片 图片 3....图片 但在一些特殊情况下,一些表单项的输入值需频繁复用,此时可以在表单中添加一个清除按钮,并配置好单击事件的动作,让用户自己决定是否清除和重置输入。...当涉及到更新表格中的一条记录时,最佳做法是将表单放入对话框中,当用户点击链接或按钮时,再自动弹出填充了默认值的表单,而不是将表单一直静态展示在表格旁边,防止用户在浏览表单时不小心编辑数据。...我们的创始团队来自谷歌、快手、百度等公司,深刻理解快速迭代的软件系统对业务的重要性和当下软件开发的复杂性,我们认为在未来软件不会是从零开发的,于是我们重新思考,创造新的工具,帮助公司更好更快地开发软件。

    2.4K00

    Discourse 创建和配置用户自定义字段

    ,显示下面的界面:单击 “Add user field” 按钮来创建一个新的字段。...显示为 HTML select input(选择输入)针对下拉选择字段添加可选的下拉选择项目:单击可选输入输入一个回答后单击 “Create”重复上面的过程完成后的下拉选择项,看起应该和下面的图片内容相似...:可被查询当这个选项被启用,你可以基于这个字段中的值来搜索用户:保存和编辑字段单击"Save(保存)" 来将用户字段添加到你的用户站点中。...如想对添加后的字段进行编辑,单击 “Edit(编辑)” 列表中的编辑按钮。如需删除字段,单击 “Delete(删除)” 按钮。...添加自定义字段到用户目录进入用户目录单击扳手按钮:选择你希望显示的用户字段单击"Save(保存)"选择的自定义字段将会显示在用户目录表中:https://www.isharkfly.com/t/discourse

    6510

    如何在Ubuntu 16.04上的Jenkins中设置持续集成管道

    在主界面中,单击左侧菜单中的凭据: [凭据] 在下一页上,单击Jenkins范围内(全局)旁边的箭头。在显示的框中,单击“添加凭据”: [添加凭据] 您将被带到表单以添加新凭据。...您可以将范围设置为全局,将ID字段留空: [credentials form] 完成后单击“ 确定”按钮。您现在可以从Jenkins的其他部分引用这些凭据以帮助进行配置。...返回主Jenkins仪表板,单击左侧菜单中的New Item: [New Item] 在“输入项目名称”字段中输入新管道的名称。...如果您的项目不可公开访问,则需要使用“添加凭据”按钮添加对存储库的其他访问权限。您可以像之前一样使用hook配置添加个人访问令牌。 完成后,单击页面底部的“ 保存”按钮。...执行初始构建并配置Webhook 在撰写本文时,当您在界面中为存储库定义管道时,Jenkins不会自动配置webhook。 为了触发Jenkins设置适当的hook,我们需要在第一次执行手动构建。

    6K30

    Jmeter(四) - 从入门到精通 - 创建网络测试计划(详解教程)

    继续并通过首先选择“测试计划”来添加ThreadGroup元素,单击鼠标右键以获得“添加”菜单,然后选择“添加”→“线程组”。 现在,您应该在“测试计划”下看到“线程组”元素。...这是我们将指定默认值的唯一字段,因此请保留其余字段的默认值。 HTTP Request Defaults元素不会告诉JMeter发送HTTP请求。它仅定义HTTP Request元素使用的默认值。...在网络浏览器中,登录名将显示为用户名和密码的表单,以及用于提交表单的按钮。该按钮生成POST请求,将表单项的值作为参数传递。...要在JMeter中执行此操作,请添加HTTP请求,然后将方法设置为POST。您需要知道表单使用的字段的名称以及目标页面。这些可以通过检查登录页面的代码来找到。...设置提交按钮目标的路径。单击添加按钮两次,然后输入用户名和密码详细信息。有时,登录表单包含其他隐藏字段。这些也将需要添加。 ?

    5.3K71

    burpsuite系列

    当 Burp Spider 处理这些表格时,它会检查这些标准以确认表格是否是新的。旧的表格不会加入到提交序列。 ● Don’t submit:开启后蜘蛛不会提交任何表单。...如果选中,Burp Spider 通过使用定义的规则来填写输入域的文本值来自动地提交范围内的表单。每一条规则让你指定一个简单的文本或者正则表达式来匹配表单字段名,并提交那些表单名匹配的字段值。...● set unmatched fields to:设置不匹配的字段。 application login(表单提交) ● don’t submit login forms:不提交登录表单。...当编辑完请求消息后,单击"GO"按钮即可发送请求给服务器。...(3):在获取信息后,单击Load按钮加载信息,然后单击"Analyze now"按钮进行分析。 1)Live capture 信息截取 ? ? ?

    1.5K30
    领券