Create Yes/No dialog box; Getting JS values from pop-up window on submit

Discussion in 'Javascript' started by gimme_this_gimme_that@yahoo.com, Aug 16, 2005.

  1. Guest

    Hi,

    This is sort of a :

    How to build a Yes/No dialog box qquestion.

    Or perhaps a question about getting javascript variables
    from a pop-up window and processing them on a submit.

    This is what I'd like to have happen :

    When the user clicks on the Delete button the confirm() method
    should run and prompt the user for a Yes/No selection. Then
    the doDelete variable should get assigned. Then the validate()
    method should get called. The result of validate() should be
    false if the user selected "No".

    This is what happens :

    confirm runs and prompts the user. The validate() method never
    sees the value of doDelete.

    Notice there are two forms.

    Your help is appreciated. Thanks!

    <html>
    <head>
    <script>
    var winConfirm = null;
    var buttonNum = 0;
    var doDelete = "No";

    function confirm()
    {
    var windowWidth = 250;
    var windowHeight = 100;
    var locX = ( screen.width - windowWidth ) / 2;
    var locY = ( screen.height - windowHeight ) / 2;
    var windowFeatures = "width=" + windowWidth
    + ",height=" + windowHeight
    + ",screenX=" + locX
    + ",screenY=" + locY
    + ",titlebar=no"
    + ",left=" + locX
    + ",top=" + locY;

    if ( ( winConfirm != null ) && !winConfirm.closed ) {
    winConfirm.close();
    }

    winConfirm = window.open( "", "winConfirm", windowFeatures );

    var theHTML = '<head><title>Confirm Deletion</title>'
    + '<body bgcolor="#cccccc">'
    + '<center><font="Verdana, Arial"><b>'
    + 'Really Delete ?'
    + '</b><form name="buttonForm">'
    + '<input type="button" value=" Delete "'
    + ' onclick="opener.buttonClicked(0);self.close();">'
    + '&nbsp;'
    + '<input type="button" value=" Cancel "'
    + ' onclick="opener.buttonClicked(1);self.close();">'
    + '</form></center></font></body>';

    winConfirm.document.writeln( theHTML );
    alert("Flow shouldn't get here until after the user has selected Yes
    or No. How to make it wait for Yes/No ?");
    }

    function buttonClicked( buttonChoice )
    {
    switch( buttonChoice )
    {
    case 0:
    doDelete = "Yes";
    break;
    default:
    doDelete = "No";
    }
    }

    function validate(aForm) {
    alert("in validate");
    if (buttonNum < 2 ) {
    aForm.submit();
    }
    if (doDelete == "No") {
    return false;
    }
    aForm.submit();
    }

    </script>
    </head>
    <body>
    <form name="aForm" onsubmit="return validate(this);">
    <hidden value="2" name="id">
    <input type="submit" onclick="buttonNum=0;" value="Edit"><br>
    <input type="submit" onclick="buttonNum=1;" value="Send"><br>
    <input type="submit" onclick="buttonNum=2;confirm();"
    value="Delete"><br>
    </form>
    <p>
    <form name="aForm" onsubmit="return validate(this);">
    <hidden value="3" name="id">
    <input type="submit" onclick="buttonNum=0;" value="Edit"><br>
    <input type="submit" onclick="buttonNum=1;" value="Send"><br>
    <input type="submit" onclick="buttonNum=2;confirm();"
    value="Delete"><br>
    </form>

    </body>
    </html>
     
    , Aug 16, 2005
    #1
    1. Advertising

  2. Guest

    Ooooooooh that's sweet. I'm gonna go with that.

    I'd be interested in seeing a solution for the original question
    though.
    - Having spent a few hours try to get it to work.
     
    , Aug 16, 2005
    #2
    1. Advertising

  3. <> wrote in message news:...
    >This is sort of a :


    >How to build a Yes/No dialog box qquestion.


    <SNIP>

    I have to assume that you're not happy with the limitations of the JS confirm function, although what you're creating
    looks pretty much the same.

    validate() is called by the submit handler, however it submits the form, which would cause validate() to be called
    again. I'm not sure what result that may have.

    Opening a new window does not stall execution of a script, therefore if 'delete' is selected, submission should be made
    conditional on the 'yes' being pressed.

    The HTML generated had missing <HTML> & </HEAD tags.

    Failing to call document.open() before writing the HTML and document.close() thereafter, was causing a wait cursor to
    appear constantly.

    This minor modification abandons validate() and uses the return value of confirm() to authorise the submit.

    If the confirm window is opened, buttonClicked( ) determines the action.

    Beware it's a bit sluggish under Mozilla and if 'delete' is clicked twice, Opera doesn't seem to like closing the window
    and reopening it. I'm not an avid window opener.

    <html>
    <head>
    <script>
    var winConfirm = null;
    var buttonNum = 0;
    var doDelete = "No";

    function confirm()
    {
    var rv=true;

    var windowWidth = 250;
    var windowHeight = 100;
    var locX = ( screen.width - windowWidth ) / 2;
    var locY = ( screen.height - windowHeight ) / 2;
    var windowFeatures = "width=" + windowWidth
    + ",height=" + windowHeight
    + ",screenX=" + locX
    + ",screenY=" + locY
    + ",titlebar=no"
    + ",left=" + locX
    + ",top=" + locY;

    if ( ( winConfirm != null ) && !winConfirm.closed ) {
    winConfirm.close();
    }

    if(buttonNum==2)
    {
    buttonNum=0; // Prepare for subsequent call

    rv=false // Cancel submit and let opener.buttonClicked DECIDE

    winConfirm = window.open( "", "winConfirm", windowFeatures );

    var theHTML = '<HTML><head><title>Confirm Deletion</title></HEAD>'
    + '<body bgcolor="#cccccc">'
    + '<center><font="Verdana, Arial"><b>'
    + 'Really Delete ?'
    + '</b><form name="buttonForm">'
    + '<input type="button" value=" Delete "'
    + ' onclick="opener.buttonClicked(0);self.close();">'
    + '&nbsp;'
    + '<input type="button" value=" Cancel "'
    + ' onclick="opener.buttonClicked(1);self.close();">'
    + '</form></center></font></body></HTML>';
    winConfirm.document.open();
    winConfirm.document.writeln( theHTML );
    winConfirm.document.close();

    }

    return rv;
    }

    function buttonClicked( buttonChoice )
    {
    if(buttonChoice==0)
    document.forms.aForm.submit();
    }

    </script>
    </head>
    <body>

    <form name="aForm" onsubmit="return confirm(this);">
    <input type="submit" onclick="buttonNum=0;" value="Edit"><br>
    <input type="submit" onclick="buttonNum=1;" value="Send"><br>
    <input type="submit" onclick='buttonNum=2;' value="Delete"><br>
    </form>

    </body>
    </html>

    --
    S.C.
     
    Stephen Chalmers, Aug 17, 2005
    #3
  4. Guest

    Thanks Stephen,

    That works and looks great.

    You also explained what I didn't know and what I couldn't
    figure out on my own.

    I totally missed the double call to validate, although I seen it
    occur in my sandbox somehow I still missed it. So it goes
    when you're spinning your wheels.

    Assiging buttonNum to zero. Now that was a good tip.

    Letting buttonClicked() handle the submit was something
    I wouldn't have thought of doing.

    You get my tip of the hat. Wow!
     
    , Aug 17, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    6
    Views:
    463
    Kent Johnson
    Jun 22, 2006
  2. Carlos A.
    Replies:
    4
    Views:
    3,322
    Laurent Bugnion
    Aug 2, 2006
  3. teo
    Replies:
    3
    Views:
    561
  4. Jamie Herre
    Replies:
    1
    Views:
    216
    why the lucky stiff
    Jan 7, 2005
  5. BillGatesFan

    Yes/No dialog box in Javascript

    BillGatesFan, Dec 29, 2004, in forum: Javascript
    Replies:
    9
    Views:
    1,221
Loading...

Share This Page