Cannot get return value from custom dialogue box to submit button on a form

Hi all
I am trying to get a reusable custom dialogue box to give a warning message. If the user clicks ‘OK’, the data is posted. If they click ‘Cancel’, nothing happens.

I can’t seem to find anything that covers this problem. A lot of related answers I’ve found on the internet are for input type=“button”, not input type=“submit”.

I can get the custom dialogue to appear (see code below) but I am not able to get it to return a true or false according to which button the user clicked.

By changing various things I can get one of 2 results but not the result I need:

The dialogue box appears and clicking either button causes the dialogue to disappear (so far so good) but the form is not submitted. At the moment, the code below has been fudged with “return false;” at the bottom of the “ShowCustomDialog” function to stop the form from being submitted.

The dialogue box appears but the form starts submitting right away - it doesn’t wait for the response from the dialogue box.

My problem are obviously due to incorrect use of callbacks (asynchronous operations) but as I don’t understand it too well, I cannot resolve this myself.

So, the question is: How can I amend this code so that it will return true to the “submit” button if “OK” is pressed, which will result in the form being posted? I imagine it can return false or not return anything if “Cancel” is pressed, both of which will result in the form not being posted.

All the code required has been included below so that this will help someone with a similar problem when it is solved.

I am new to this so please spell out your solution if you can. :slight_smile:

<form action="" method="post">
<!--Some input fields to post here -->
<input type="submit" name="setcurrency" id="setcurrency" value="Set Currency" 
onclick="return (ShowCustomDialog());" >
</form>

<script>

function ShowCustomDialog()
{
var retVal = ShowDialogBox('Warning','Are you sure you want to     continue?','OK','Cancel', 'XXXXXXXXX',null);
if (retVal == true)
{
    /* alert("User wants to continue!"); */     
    return true;
} 
else
{
    /* alert("User does not want to continue!"); */
    return false;
}
return false; 
}

</script>

<!--Modal dialogue box -->
<div id="dialog" title="Alert message" style="display: none">
        <div class="ui-dialog-content ui-widget-content">
            <p>
                <span class="ui-icon ui-icon-alert" style="float: left;  margin: 0 7px 20px 0"></span>
                <label id="lblMessage">
                </label>
            </p>
        </div>
</div>

<script type="text/javascript">

$(document).ready(function(){
$('#setbasecurrency').click(function(){
ShowCustomDialog();
});
});


function ShowDialogBox(title, content, btn1text, btn2text, functionText,     parameterList) {
var btn1css;
var btn2css;

if (btn1text == '') {
    btn1css = "hidecss";
} else {
    btn1css = "showcss";
}

if (btn2text == '') {
    btn2css = "hidecss";
} else {
    btn2css = "showcss";
}
$("#lblMessage").html(content);

$("#dialog").dialog({
    resizable: false,
    title: title,
    modal: true,
    width: '500px',
    height: 'auto',
    bgiframe: false,
    hide: { effect: 'scale', duration: 400 },

    buttons: [
                    {
                        text: btn1text,
                        "class": btn1css,
                        click: function () {

                            $("#dialog").dialog('close');
                            /*action: return true; Something needed here I guess!*/

                        }
                    },
                    {
                        text: btn2text,
                        "class": btn2css,
                        click: function () {
                            $("#dialog").dialog('close');

                        }
                    }
                ]
});
}
</script>


<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet"      href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
1 Like

Hi there,

ShowDialogBox doesn’t have a return value, you’re expecting it to contain the answer similiar to how prompt works, it doesn’t work that way. You can confirm it’s returning undefined by doing this:

var retVal = ShowDialogBox('Warning','Are you sure you want to continue?','OK','Cancel');
console.log(retVal);

In the click handlers for your two buttons where you are closing the dialog, that’s where you can submit the form.

/*action: return true; Something needed here I guess!*/

Indeed :smile: Something like this:

$('form').submit()
1 Like

Hi Mark,

Thanks for your reply.

Yes I had later discovered it was returning undefined and tried putting in a return true on the click handler but that still returned undefined. Anyway… on to what you suggested.

I did what you said and it all looked like it was working but the form is not submitted or at least it’s not submitting it as it should.

I gave the form an ID and put the code $(‘#ZZZZZZZZZZZZZZZZZ’).submit() in the click handler (where Z is the ID of the form. It works in that, the cancel does nothing and the OK clearly submits something to the server but it doesn’t process as it should. I’m not sure what’s being submitted to the server but it’s not the data in my form. Just to confirm, the form does submit properly without this dialogue box.
Using $(‘form’).submit() produced the same result. There are a number of forms on the page so I guess I have to use the ID method.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.