JavaScript function that waits for user input before returning

**Dormilich** · Feb 18 '09, 09:52 PM

hm, recently (yesterday or so) someone posted here a link to a "custom alert function" (i.e. overwriting the window.alert method) maybe you're interested?

on the other hand, "waiting for input" seems to me like just another event handler (onclick - button, onchange/onselect - dropdown, etc.)

**Frinavale** · Feb 18 '09, 10:03 PM

I'll look for that other thread...

Basically, yeah it's another event....sort of?

Right now I'm applying the onclick event for a button to call the JavaScript that displays the "confirm" control. The button would never submit to the server, the "confirm" control would.

Now I'd like to be able to create a function that returns the user's selection.
So instead of just calling the JavaScript function in the onclick event and not submitting, I'd like to be able to submit according to the user's selection:

Code:

<input type="mybutton" onclick="return myFunctionThatWaitsForUserInput();" value="some button" />

Hopefully the other thread can help me get an idea of how to do this...I'm not great with JavaScript (just know the basics to get me by)...events are something that I have very basic knowledge of.

Thanks

-Frinny

**Dormilich** · Feb 18 '09, 10:13 PM

you're not done with just one event. you need one to bring up the confirm dialogue and another who submits the input from the confirm, doing with it what you like. a return doesn't seem sensible to me, maybe just feeding the next processing function is better? you could also store the user input in an object and access that later.

maybe I can convince you to use EventListeners, too...

PS: what is <input type="mybutton" > supposed to be for a type?

**Frinavale** · Feb 19 '09, 02:42 PM

Hehe, it's supposed to be a Button with an ID = "myButton"
You got my point though right?

I'm actually not at all interested in using the existing JavaScript confirm.

Looking back at what I posted yesterday I realise that I have not been overly clear on what I mean by "custom confirm control".

My custom confirm control is made up of a bunch of <div>s and buttons and labels and stuff. It's draggable and has a close button in the top corner. It let's me create messages on the server which I can then display in the client's browser.

I don't know the term for the techniques I'm using (and maybe there's no term at all). I needed a way to be able to have the server communicate with the user without printing values into the "real estate" area (the main content) of the page. Instead it's printed into a...um let's call it a <div> that has an CSS absolute position (so that it floats on top of the "real estate" area). My messages are displayed within that <div> and the user is able to select "yes", "no", or "cancel/other" or even "close".

It's pretty cool and I'd love to show it off (it's got rounded corners and a title bar and everything) but I can't.

So, whenever I was talking about using a "confirm" control I was referring to my custom control made of a bunch of HTML. I guess using the double quotes around the word confirm didn't help with my clarification at all....

Anyway, I'm going to do some research into event listeners to see if they can help me with my function that "waits for user input".

Thanks for your help

-Frinny

**Dormilich** · Feb 19 '09, 03:45 PM

Originally posted by Frinavale

I don't know the term for the techniques I'm using (and maybe there's no term at all). I needed a way to be able to have the server communicate with the user without printing values into the "real estate" area (the main content) of the page.

sounds a bit like AJAX, though the communication there is reversed, the client requests the server (but you can use that by regularly requesting that return an answer if something new is on the server, like a news ticker for instance)

I really like to see it (even though it's not perfect) - looks like an interesting project anyways.

Originally posted by Frinavale

I'm going to do some research into event listeners to see if they can help me with my function that "waits for user input".

MDC - Event Listener

**Frinavale** · Feb 19 '09, 04:17 PM

Originally posted by Dormilich

sounds a bit like AJAX, though the communication there is reversed, the client requests the server (but you can use that by regularly requesting that return an answer if something new is on the server, like a news ticker for instance)

The control can be used in conjunction with Ajax calls to the server.
This is one of the cool things about it. When an asynchronous call to the server happens and validation occurs or some sort of confirmation is required, this control can be used by the server to display a response to the user... it is also used to accept input from the user to relay that back to the server.

Originally posted by Dormilich

I really like to see it (even though it's not perfect)

Oh it is perfect just the way it is ;)
It just needs this modification to be "more prefect".

Originally posted by Dormilich

looks like an interesting project anyways.

This is but a very tiny but important part of the project....It's been released along with my web application for some time now.

Now it's time for it to grow as the new features require.

**Frinavale** · Feb 19 '09, 04:48 PM

I can't see how EventListeners are going to help me.

Is there a way to Wait for an event to occur in JavaScript?
I'm not fond of the idea of looping until something occurs...I can see this causing problems and it's just ugly.

**Dormilich** · Feb 19 '09, 05:23 PM

Originally posted by Frinavale

Is there a way to Wait for an event to occur in JavaScript?

EDIT: you don't need to do anything else than registering your function, everything else is done by the system.

let's have a look at an example:

you have somewhere an element

Code:

<a id="example">link</a>

to this element you can attach Event Listeners (say, on page load)

Code:

var ref = document.getElementById("example");
ref.addEventListener("click", myFuncOnClick, false); (1)
ref.addEventListener("mousover", myFuncOnMouseOver, false); (2)

event (1) fires myFuncOnClick() when the user clicks on this link (no matter when)
event (2) fires myFuncOnMouseOv er() when the mouse is moved over the link (no matter how often)

so speaking boldly, any registered event waits to occur without having you to worry about it. just tell the handler what function to call when the event happens.

**Frinavale** · Feb 19 '09, 05:39 PM

So...

A button is clicked and my function is called because the EventListener catches the onclick event. The button's onclick event is handled and that's that. ([edit] apparently that's Not That [/edit])

Now another button is clicked in my custom confirm control.
Another event is fired....which will be caught by another EventListener.

Now I have to either have to somehow raise the first button click event, or somehow submit the page to the server and indicate that it originated from the original button click instead of the second button click.

**Dormilich** · Feb 19 '09, 07:21 PM

1. right

2. right

3. hää? (engl.: ???) it depends on what the first two handlers trigger... you can arrange matters so that event 1 sets a special property which event 2 checks before submitting....

maybe it's time to use some of your code, because it's getting complicated for me to stay on the right track. explaining with actual code is better because Javascript offers oh so many ways to do such a task.

**Frinavale** · Feb 19 '09, 08:09 PM

Originally posted by Dormilich

3. hää? (engl.: ???) it depends on what the first two handlers trigger... you can arrange matters so that event 1 sets a special property which event 2 checks before submitting....

Could you elaborate on this?

Originally posted by Dormilich

maybe it's time to use some of your code, because it's getting complicated for me to stay on the right track. explaining with actual code is better because Javascript offers oh so many ways to do such a task.

In the following I am not using my custom control.
I'm using a regular JavaScript confirm:

Code:

function CheckBeforeProcessing(){
    if(Check('someControlsID')==true)
    {
        if(confirm('The check suggests that I should prompt you before continuing. Do you want to proceed?'))
        {
            SomeMethodThatDoesStuff();
            return true;
        }
        else
        {
            return false;
        }
    } 
    else 
    {
        SomeOtherMethodThatDoesStuff();
        return true;
    }
}

Now instead of using the:

Code:

if (confirm('... Do you want to proceed?'))

I want to call my own function. It would display the custom confirm control and wait for the user's input. It would then return true or false based on the user's input. Like the confirm control...it waits for user input before returning to the function.

So far, the function displays the custom confirm control...but I still lack the knowledge of how to use JavaScript events to proceed.

**Dormilich** · Feb 19 '09, 08:35 PM

ok, that's something I can imagine.

Code:

function CheckBeforeProcessing()
{
    if (Check('someControlsID') == true)
    {
        // this brings up your confirm control
        // and adds the event listeners
        showConfirm();

        // a global object, where the confirm status is saved
        return Frinny.confirmed;
    } 
    else 
    {
        SomeOtherMethodThatDoesStuff();
        return true;
    }
}

let's assume you have 2 buttons (for the sake of simplicity) in your confirm dialogue:

Code:

<input type="button" id="yes" value="yes">
<input type="button" id="no" value="no">

showConfirm has to do 2 things:

bring up your control
register the necessary event handlers

Code:

function showConfirm()
{
    /* your code for the confirm dialogue */

    /* code for event handling */
// get the confirm button
    var btn_yes = document.getElementById("yes");
    var btn_no  = document.getElementById("no");
// register events
    btn_yes.addEventListener("click", SomeMethodThatDoesStuff, false);
    btn_yes.addEventListener("click", closeConfirmDialogue, false);
    btn_no.addEventListener("click", SomeMethodThatDoesStuffIfUserDenies, false);
    btn_no.addEventListener("click", closeConfirmDialogue, false);
}

// the object holding the confirm status
// defaults to false
Frinny = { confirmed: false };

// somewhere in SomeMethodThatDoesStuff()
{
    /* code */
    Frinny.confirmed = true;
    /* more code */
}

**Frinavale** · Feb 19 '09, 08:49 PM

I swear I tried something similar before...althou gh I didn't use an Object to store my value, I simply used a hidden field.

But the problem was that (see comment):

Code:

function CheckBeforeProcessing()
{
    if (Check('someControlsID') == true)
    {
        // this brings up your confirm control
        // and adds the event listeners
        showConfirm();
 
        // a global object, where the confirm status is saved
//-------------------------------------------------------------------------------------
// This was called before the button was clicked
        return Frinny.confirmed;
//-------------------------------------------------------------------------------------
    } 
    else 
    {
        SomeOtherMethodThatDoesStuff();
        return true;
    }
}

**Frinavale** · Feb 19 '09, 09:03 PM

Originally posted by Dormilich

Code:

// somewhere in SomeMethodThatDoesStuff()
{
    /* code */
    Frinny.confirmed = true;
    /* more code */
}

This "MethodThatDoes Stuff" is not linked with my custom confirm control.
It's used by other controls too...

I can't modify this to be dependent on my confirm control.
That's why I was using the CheckBeforeProc essing() method.
The CheckBeforeProc essing() method is called during a button click event:

Code:

<input id="someButton" type="submit" style="width: 100px;" onclick="return CheckBeforeProcessing();" value="Do Something" name="someButton"/>

I just want to prevent posting back to the server if the user does not confirm.....
(well...and execute SomeOtherMethod ThatDoesStuff() if the do not confirm)

JavaScript function that waits for user input before returning

JavaScript function that waits for user input before returning

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment