Javascript Alertify提示符-允许用户输入值并提交表单

使用

alertify-version0.3.11

，我能够获取用户输入的详细信息，并能够在提示对话框中显示。但我有多重价值观，即。用户输入、下拉值、日期选择等

var totalResources = jQuery('#grid').jqGrid('getGridParam', 'selarrrow');

//set custom button title for Form Submit
    alertify.set({ labels: {
        ok     : "Submit Data",
        cancel : "Cancel"
    } });


    //fetch user input comment
    alertify.prompt("Please enter note/remarks for this Form :<br/>Total Resource(s): <strong>"+totalResources.length+"</strong>", function (e,value) {


if (e) {
    alertify.success("Data has been submitted");

            //encodes special characters remarks
            var sow = encodeURIComponent(value);

            $.post(SITE_URL+"somecontroller/someaction",$("#frm_submit").serialize()+ "&resource_ids="+resource_ids+"&sow="+sow, function( data ) {
            });


    }else{
            alertify.error("Your Data is not submitted");
    }
});

var totalResources=jQuery（'#grid'）.jqGrid（'getGridParam'，'selarrrow'）；
//设置表单提交的自定义按钮标题
alertify.set（{标签：{
确定：“提交数据”，
取消：“取消”
} });
//获取用户输入注释
alertify.prompt（“请为此表单输入注释/备注：
总资源：”+totalResources.length+“”，函数（e，值）{
如果（e）{
alertify.success（“数据已提交”）；
//对特殊字符和备注进行编码
var sow=组件（值）；
$.post（SITE_URL+“somecontroller/someaction”，$（“frm_submit”）.serialize（）+“&resource_ids=“+resource_ids+”&sow=“+sow，函数（数据）{
});
}否则{
错误（“您的数据未提交”）；
}
});

类似于下图所示

---

我如何使用alertify构建一个模式表单，用户可以在其中看到预告的详细信息，并可以输入他的详细信息并提交？

这实际上超出了alertify的范围。它只是不支持那种功能。它被设计为典型浏览器内置功能的替代品，如

confirm（）

和

alert（）

您可能想看看其他插件。特别是因为您正在使用jQuery，所以要找到适合您的东西应该不会太难。搜索jQuery lightbox或modals可能会发现一些具有您想要的功能的东西

---

一个选择可能是。网站上有一个类似的登录表单演示。我从未使用过Fancybox，所以您的里程可能会有所不同，但有很多不同的选项。

他们在Alertify中添加了表单功能。看看

其网站代码如下所示：-

<!-- the form to be viewed as dialog-->
<form id="loginForm">
    <fieldset>
        <label> Username </label>
        <input type="text" value="Mohammad"/> 

        <label> Password </label>
        <input type="password" value="password"/> 

        <input type="submit" value="Login"/>
    </fieldset>
</form>

alertify.genericDialog || alertify.dialog('genericDialog',function(){
    return {
        main:function(content){
            this.setContent(content);
        },
        setup:function(){
            return {
                focus:{
                    element:function(){
                        return this.elements.body.querySelector(this.get('selector'));
                    },
                    select:true
                },
                options:{
                    basic:true,
                    maximizable:false,
                    resizable:false,
                    padding:false
                }
            };
        },
        settings:{
            selector:undefined
        }
    };
});
//force focusing password box
alertify.genericDialog ($('#loginForm')[0]).set('selector', 'input[type="password"]');