is there a way to replicate window.prompt() behavior/ functionality inside a custom function?
I’m trying to program a better-looking prompt box.
I found many scripts around, but all they do is fire another function when a value is specified and the ‘Ok’ button is pressed.
I don’t want to have to specify a callback function, but rather want js to “freeze” execution until a value is provided, just like it happens when one uses window.prompt:
var myName = prompt('What is your name?');
alert(myName);
the code above works.
now, with the scripts that I found online, I gotta do:
function handlePromptResult(val) {
alert('Your name is: ' + val);
}
SomeLibrary.customPrompt('What is your name?', handlePromptResult);
I would like to be able to do:
var myName = MyLibrary.customPrompt('What is your name?');
alert('Your name is: ' + myName);
problem is, it’s not solving my problem.
I’m prolly not succeding at explaining clearly what I’m after and I apologize if that’s the case.
I also appreciate all your help.
however, I’m looking at something that will replicate exactly window.prompt’s behavior.
I need my script to be able to do exactly this:
myName = myCustomPrompt('What is your name?');
alert('your name is: ' + myName);
as you might notice, there is no callback function. myCustomPrompt should just return the value the user inserted in a text box.
with the script I’m looking for, javascript would “freeze” and wait for the user to having done something (either provided a value or cancelled) before continuing with the code, just like it happens with window.prompt.
when I use window.prompt:
var p = window.prompt('What is the value of p?);
if (p == 'bob') {
...
} else {
...
}
I can write code that uses ‘p’ right after my statement, with no callback function or stuff like that, just as if it was a regular operation, because I know that javascript will popup a window, freeze execution until the user is done with the prompt - whether he specified a value or dismissed it, and populate my variable.
this is what I’m looking after.
thanks again for all your help, even though I’m starting to think there’s no way to achieve this.
I tried your script in IE8, FF3.6, Opera 10, safari and chrome.
It works in all browsers except in IE8 where after entering qwerty in the textbox and clicking submit, the contents of the textbox disappeared and nothing else happened. In the other browsers the standard prompt box appeared with the appropriate prompt message.
But the OP also said
I’m trying to program a better-looking prompt box.
I can’t work out how to style the actual pop-up prompt box that your script pops up which is what the OP wants if I understand correctly.
If it all worked your script would be a keeper for me as well
As for the look, that is besides the the problem. if you can’t style the simple html there you obviously don’t have a very good grasp of CSS. The JavaScript doesn’t even manipulate any of the HTML it just decorates it with a simple prompt box functionality. It doesn’t matter what it looks like from a programmatic standpoint once it functions that is for the designer to figure out.
I didn’t test it in IE8, probably has something to do with the event handling though.
Really, the only thing I was trying to show with my example was the process to develop an internal event handling system so that one could run actions outside of the prompt when submit is clicked.
well, it’s not that I want to freeze execution meaning that I want the window to be modal (e.g. the user can’t do anything until he is done with my window). that’s as easy as adding an overlay behind the window.
what I want is for avascript to wait until the user has inserted and confirmed (by pressing on ‘Ok’) a value before continuing with the script, so that my_var is not undefined. please see the following example:
my_var = prompt('What do you want my_var to be?');
alert('my var is: ' + my_var);
the alert is not executed until the user is done with the prompt.
I want to replicate that behavior, but with a custom prompt.
The reason I showed you how to accomplish it with an event system is because that is not possible. You need to have an event system to copy that behavior outside of the custom prompt. Which really just means you need to change the work flow around a little.
here is an example of how a custom prompt can be created with an internal event system to alert or do anything else after the submit button has been pressed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Custom Prompt w/ Event Handling</title>
<script type="text/javascript">
// custom prompt class
function MyPrompt(prompt) {
// object reference for "private methods"
var _me = this;
// prompt container node
var _prompt;
// prompt input node
var _input;
// prompt submit button node
var _submit
// prompt event handlers
var _events = {
submit:[]
};
_init();
function _init() {
// Get prompt container node
_prompt = document.getElementById(prompt);
// Get input node
_input = document.getElementById('prompt-info');
// Get submit node
_submit = document.getElementById('prompt-submit');
// attach submit handler
_submit['onclick'] = _onSubmit;
}
// display the prompt container
this.prompt = function() {
_prompt.style.display = 'block';
}
// Get the input value
this.getInputValue = function() {
return _input.value;
}
// Attach event handler
this.addEventHandler = function(evt,handler) {
// push handler onto event stack
_events[evt].push(handler);
}
// on submit action
function _onSubmit(evt) {
// ie bubble and cancel default action
evt.cancelBubble = true;
evt.returnValue = false;
// ff bubble and cancel default action
if (evt.stopPropagation) {
evt.stopPropagation();
evt.preventDefault();
}
// hide the prompt window
_prompt.style.display = 'none';
// fire off submit event
_fire('submit');
}
// fire prompt event
function _fire(evt) {
// call event handlers
for(var i=0;i < _events[evt].length;i++) {
_events[evt][i]({target:_me,event:evt});
}
}
}
</script>
<script type="text/javascript">
window['onload'] = function() {
// create prompt
var prompt = new MyPrompt('prompt');
// prompt submit handler
prompt.addEventHandler('submit',function(evt) {
alert(evt.target.getInputValue());
});
// prompt user for input
prompt.prompt();
};
</script>
</head>
<body>
<div id="prompt" style="display: none;">
<form>
<fieldset>
<legend>Example</legend>
<div>
<label for="prompt-info">Input</label>
<input type="text" name="info" value="" id="prompt-info">
</div>
<input type="submit" name="submit" value="submit" id="prompt-submit">
</fieldset>
</form>
</div>
</body>
</html>
yep, one way is to disable all the other buttons, links and any other clickable elements that call a js function when the div prompt for a value is displayed.
When the user clicks the ok button on the div prompt, check if the value is valid and if it is, re-enable all the buttons, links etc.
Just out of curiosity, if on page load you put all the button and link objects into arrays and set their disabled property to false, why would that not freeze (or stop) the execution of the functions those buttons and links called?
The only way to do it is to place a transparent or semi-transparent image over the page content with only your “prompt” box in front of it so that only the buttons there that call new functions are accessible. You can’t actually freeze the execution (and some browsers have changed the prompt box to work this way as well).
Another option is to have a div (hidden on page load) that is displayed whenever a confirmation is required before taking a particular action.
The div can be styled to whatever you like and can have 2 buttons like OK and CANCEL.
The function that is called to display this “confirmation” div can then disable any other buttons and links on the page until either OK or CANCEL is clicked in the div.
