JavaScript prompt


DA.Prompt

version 0.5b

This is the default prompt behavior. It just asks the user for input.

The Prompt object is stored as the first JS variable, which is called in second example through
first.form.userInput.value

view the code 


// CREATION
first = new DA.Prompt("First Prompt");

// DISPLAY PROMPT (on button click)
first.ask();

// Access to input text
first.form.promptText.value;

This prompt:

  • sets its value to first Prompt's value in the onBeforeAsk function defined in options
    ( options.onBeforeAsk:function( form, obj ) )
  • alerts the user of its value upon submission
  • overrides the default submit buttons
  • has a custom title
  • Option cover: 1 means, that other prompts (if active) are still available and the page is screen'd out.
    try Open first and Open second...

view the code 


second = new DA.Prompt("Second Prompt", {
	
	controls: { 
			Bingo:"Bingo", 
			Confirm:"Alert", 
			Other:"Open first prompt", 
			AnOther:"Open second prompt", 
			defaults:false 
		},
	onConfirm : function(thisForm,obj){
		
		if (form.promptText.value!=""){
			alert(form.promptText.value);
		}
		else { 
			alert('Please write something to the field'); 
		} 
	},
	onBeforeAsk: function(thisForm){
		thisForm.promptText.value = first.form.promptText.value;
	},
	title : "Some bingo-ish title of myown",
	onBingo: function(){ 
		alert('You pressed the Bingo button, which does nothing! (except showing you this message, offcourse)');
	},
	cover:1,
	onOther: function(){
		first.ask();
	},
	onAnOther: function (){
		third.ask();
	}
});

This has options.cover set to 2, which disables other prompts upon activation.

Also has a few more options for input. These can be any valid HTML or form controls and is set by options.body, which is just an ordinary HTML sting.

The html (form controls) is wrapped inside the FORM tag, so if you submit() the prompt form, the input is actually sent (it behaves like a regular form).

Files

Note that JS files should be linked to the html in this order. Scriptaculous is optional (enables overlay fading and draggable prompts).
get prototype JS framework
get scriptaculous extension
prompt.js v 0.5b
prompt.css // note that I spent least time on the visual aspect, make your own css to improve it!

Description

The DA.Prompt offers on-the-fly creation of user input forms and was developed as a way to expand the possibilities of a regular javascript prompt function.

DA.Prompt makes use of the famous prototype JS framework (required) and the scriptaculous extension (optional - enables draggable prompts and overlay opacity transitions). Files required can be downloaded at these web sites.

The main difference between DA.Prompt class and JS prompt function is, that JS prompt halts the execution of the script (same as alert fucntion) and JS prompt only offers one input field. DA.Prompt can be customized in any way you would actually want, as well as making your own custom CSS for the prompts, so you can match the visual to your needs.

Syntax

Creating a new prompt

myPrompVar = new DA.Prompt( prompt text, options );

Displaying the prompt

myPromptVar.ask()

Options

option description default
body (string) HTML the html of the from. Note that the Prompt object is also accessible through form.Prompt so you CAN write something like this:
body: '<input type="text" name="username" onchange="this.form.Prompt.triggerHandler('CheckUsername')" ...
This would result in your custom options.onCheckUsername function firing whenever user changes the content of the input. 		'<br /><input type="text" name="userInput" value="" />'
controls (object) the buttons of the form ( key is the action, value is the label ) where action is the name of the on + action function to be triggered on click.
The functions are not required.
Actions are only appended to the defaults - you can override this by declaring custom Confirm and Cancel to change their labels, or by setting defaults to false, which would display only the user-defined buttons.

syntax:
{ action1: 'label1', action2: 'label2' ... [, defaults: true|false ] }

example:
controls: { Bingo: 'Play' }
this would render 3 buttons:
  • [OK] (default)->triggers options.onConfirm(form, obj)
  • [Play] (custom) -> triggers options.onBingo (form, obj)
  • [Cancel] (default) ->triggers the options.onCancel(form, obj)

example:
controls: { Bingo: 'Play', defaults:false }
this would render only the [Play] button, which triggers the
options.onBingo function.

 { Confirm: "OK", Cancel:"Cancel" }
onAction (functions) Actions to trigger on prompt submission. The Action part is the name of the control button set by controls: {Action: 'button label' }

The parameters passed to this function is the form and the prompt object, so defining the onAction function should look like this:

onBingo: function(form, obj){
             $(form).serialize();
             alert(form.userInput.value);
             obj._deactivate();
             obj._hide();
} 		onConfirm(), onCancel()
title (string) The name of the prompt "window" document.title
cover (integer) The "cover" index
  • 0 - No overlay is set over the page, the user can click all over the page and ope other prompts
  • 1 - An overlay is set over the page, but not over other prompt objects. Other prompts can still be activated and used.
  • 2 - An overlay is set over the page and all other open prompts are hidden under it.
 1
on + events

 Functions which fire on certain events. This is the list of events:
  • on_Create
  • on_Finish
  • onBeforeAsk
  • onAfterAsk
  • onBeforeActivate
  • onAfterActivate
  • onBeforeDeactivate
  • onAfterDeactivate
  • onAfterSubmit

Parameters passed to these functions are the form DOM object (which you can serialize, test, modify just like an ordinary DOM#form obj), and the Prompt object, with its functions (so you can do stuff with the prompt, like _activate, triggerHandler, _destroy, ask, _hide). 		 

Options example 

registrationPrompt = new DA.Prompt(
"Please register", //the question
{	//Start options
	title:"Registration form",
	cover: 0,  // no overlay is set
	controls: { CheckUsername: 'Check username', Confirm: 'Register', Cancel: 'Never mind...' }, 
	Validate: function(form){
		// do some validation work here
		errors = '';
		if (form.username.value=""){ errors = errors + "Please enter an username.\n"; }
		if (form.pass1.value==""){ errors = errors + "Please enter password\n"; }
		else if (form.pass1.value != form.pass2.value) { errors= errors + "Passwords don't match!\n"; }
		
		if (errors=='') { return true; }
		alert(errors);
		return false;
	},
	onConfirm: function(form, obj){
		if (this.Validate(form)){
		// DO SOME DATA SENDING WORK HERE
			alert('You were registrered succesfully');
			obj._hide();
		}
		else {
			alert('Data not OK, try again');
		}
	},
	onCheckUsername: function(form, obj){
	// do some validation work here
		alert(form.username.value + ' is still available!');
	},
	body: '<br />username: <br /><input type="text" name="username" /><br />' + 
	'password:<br /><input type="password" name="pass1" /><br />repeat username:<br /><input type="password" name="pass2" />'	

}//End options
);

 

DA.Prompt object

container
 div .promptContainer  
ctrlContainer
 div .promptCtrlContainer  
form
 form  
isOpen
 bool  
options
 Object  
promptText
 string - prompt question  
titleContainer
 div .promptTitleContainer  
_activate
 function()  
_deactivate
 function()  
_destroy
 function()  
_fold
 function()  
_hide
 function()  
_reset
 function()  
_submit
 function()  
ask
 function()  
build
 function()  
initialize
 function()  
triggerHandler
 function()  

TO DO