CODEWITHSUNDEEP
javascript
Mat Richardson
Mat Richardson

Reputation: 3606

Javascript: Pause program flow until button clicked

Good afternoon chaps..

I'm trying to create a function in Javascript that generates an on screen dialog similar to the msgbox function in VB/VBA. I've so far managed to code the msgbox function in Javascript so that when it is called it dynamically creates a dialog on screen.

It works like this:-

if (msgbox("Do you want to continue", YesNo) == Yes) {
      //Do something here
}

What I would like to know is this - is there any way I can halt/pause the flow in code until one of the buttons in my dynamically generated dialog is pressed? I don't want the 'Do Something here' bit or any other following code to run until a user has clicked the 'Yes' button in my dialog.

(NOTE: YesNo and Yes, in the example above are constants. The dialog works perfectly up to this point I just need to figure how to stop flow until a button is pressed without overcomplicating things).

Mat

Upvotes: 1

Views: 6182

Answers (4)

The One and Only ChemistryBlob
The One and Only ChemistryBlob

Reputation: 7884

Sorry I'm a little late but I would do the following (assuming only two possible choices, i.e., yes or no and also assuming a modal type confirm box is being used and not the garden variety alert/confirm boxes):

Add this variable storage form to your html (note value for the form's hidden input is not listed and is therefore currently a null value)

<form id="UserSelection" style="display:none"><input type="hidden" name="yes_or_no">    
</form>

Then add two buttons to your modal confirm box in which button "yes" triggers a "yes" value and button "no" triggers a "no" value for the hidden input of the form:

<div id="ModalConfirm">
<button type="button" onclick="StoredSelectionVar('yes')">Yes</button>
<button type="button" onclick="StoredSelectionVar('no')">No</button>
</div>

where the function StoredSelectionVar() is defined as:

StoredSelectionVar(type) {
    if (type === 'yes') {
        document.forms['UserSelection']['yes_or_no'].value = 'yes';
    } else {
        document.forms['UserSelection']['yes_or_no'].value = 'no';
    }
}

and then modify your remaining javascript as follows:

function YesOrNo() {
var x = document.forms['UserSelection']['yes_or_no'].value;
if (!x) {
    window.setTimeout(YesOrNo, 1000);<!--Modify time as desired.....checks form 
    UserSelection to see if a value is present, which implies the user clicked either    
    the yes or no button for the hidden input, or no click if still a null value, in 
    which case the function is called again and the process repeated-->
} else {
    if (x === 'yes') {
        //Do This
    } else {
        //Do that
    }    
}

function yourFunction() {
    if (msgbox("Do you want to continue")) {
        YesOrNo();
    } else {
        //whatever
    }
}

Upvotes: 1

Justin Blank
Justin Blank

Reputation: 1878

If you're using an HTML element, you want to set the onclick property of the yes button to be a function that contains the desired action, or you can use addEventListener for modern browsers.

function doStuff () {
    // do stuff here
}

button.onclick = doStuff;

The way you should structure your scripts is that there is some top-level code that is necessary to set up global variables or top level functions, and do anything else that you want to happen as the page loads. Then you create functions to do callbacks on various user actions (clicking/hovering/keystrokes, etc). There's no real "pausing" going on, but you can defer functions so that they only execute in response to user input.

If you want to block other user actions while you do this the way a modal dialog does, you'd have to set state via a global variable or property of some object, and have all your callbacks check that before executing. This could easily get complicated, and might be a reason to prefer using a simple confirm prompt.

Upvotes: 0

Paddy
Paddy

Reputation: 583

If you use the confirm box this should work for you - it fires a prompt with ok/cancel options:

    if (confirm("Are you sure you wish to continue?")){
//executed when OK clicked
}
else{
//executed when CANCEL clicked
}

Note workflow is paused in the function until an answer is given

Upvotes: 2

Marc B
Marc B

Reputation: 360622

There's alert() and prompt() in JS for this sort of thing. Alert is for simple messages that only need acknowledgement, prompt can return some input.

Upvotes: 0

Related Questions