如何自定义数据::confirm弹出窗口以提示输入,该输入将附加到请求参数中

How can I customize the data: :confirm popup to prompt for an input, that will be appended to the request params?

本文关键字:输入 参数 请求 提示 数据 自定义 confirm 窗口      更新时间:2023-09-26

在我的应用程序中的许多地方,提交表单和访问帖子链接都需要用户指定一些理由来解释他们决定这样做的原因(注释/理由用于跟踪谁做了内部更改)。

出于这个原因,我希望能够更改data: {confirm: "Are you sure you want to submit this form?"}的行为,以提示输入,而不仅仅是回答"是/取消"。我希望这个框显示一个输入字段,然后将其内容附加到请求参数中,这样我就可以从控制器中存储它。

我该怎么做?

使用假提交按钮,这是触发器提示对话框。当填写提示时,将值复制到表单隐藏输入,然后触发表单提交事件。这是一个工作示例:

HTML:

<form id="myForm">
    <input type="checkbox" name="checkbox" checked />
    <input id="myVisibleInput" name="visibleinput" type="text" />  
    <input id="myHiddenInput" name="hiddeninput" type="text" />
    <button id="fakesubmit" type="button">Submit</button>
</form>

jQuery:

$('#fakesubmit').on('click', function() {
    var answer = prompt('Why?');
    if (answer != null) {
        $('#myHiddenInput').val(answer);
        $('#myForm').submit();
    }
});
$("#myForm").on("submit", function(event) {
    console.log($(this).serialize());
});

CSS:

#myHiddenInput {
    display: none;
}

您可以尝试一些模式服务,如引导模式,或者只构建自己的指令。这里有一些好消息。本质上,无论您将ng单击绑定到哪个函数,都将首先调用$modalService,一旦用户确认/拒绝,$modalService将调用func.successfunc.error

您可以使用提示:

var test = prompt("Enter your name:");
alert("Hi " + test + "!");

提示-W3学校