Alertify Prompt - Allows the user to enter values and submit a form
By using alertify - version 0.3.11
, I can get user input data and show it in live dialog. But I have several values, viz. user input, dropdown values, date picker, etc.
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");
}
});
As shown in the picture below
How was I able to create a modal form using an alert where the user will see pre-drilled data and can enter their details and submit?
source to share
They added the form function to Alertify. Have a look at this
From your site code it says: -
<!-- 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>
And the JS code: -
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"]');
source to share
This is actually outside the scope of Alertify. It just doesn't support that kind of functionality. It was designed to replace typical browser built-in functions such as confirm()
and alert()
.
You can look at other plugins. Especially since you're using jQuery, it shouldn't be too hard to find something that works for you. Searching for jQuery lightboxes or modals can lead to you having the capabilities you are looking for.
One option might be Fancybox . They have a demo login form that does something like this. I've never used Fancybox, so you can vary, but there are many different options.
source to share