Question

I have a jquery dialog that uses a non-jquery javascript function to complete the functioning depending upon which button is selected. I have added a checkbox within the dialog that the user must check to signify understanding of what will happen.

When I add the testing of the checked state to the non-jquery javascript, the checked state is always returned as false.

Following is the code. The first two alerts and the return statement are for testing:

function acceptPitch()
{

    // the two alerts and return false are for testing only
    alert('jq=' + $('#understand').prop("checked"));
    alert('checkbox=' + document.getElementById('understand').checked);
    return false;
    if (document.getElementById('understand').checked)
    {
        handleUserDelay();
        $('#decision').val('yes');
        document.forms['cancellationForm'].submit();
        return true;
    }
    else
    {
        alert('[appropriate message here]');
        return false;
    }
}

If the checkbox is not in the dialog box, the above function works as expected. But when it is placed inside the dialog box, the tests for “checked” always return false.

Here is the main code for the dialog:

var $dialog_cancel = $('#rh-dialog.cancel');
$dialog_cancel.dialog(
{
    autoOpen:false,
    width:500,
    modal:true,
    draggable:true,
    resizable:false
});

$('#reason').change(function()
{
    var reason1 = $(this).val().substr(0,1);
    if (reason1 == 'n')
    {
        $('#pitch').html($('#pitch-no').html());
        $('#acceptPitchButton').val($('#free-button-text').html());
    }
    else if (reason1 == 'y')
    {
        $('#pitch').html($('#pitch-yes').html());
        $('#acceptPitchButton').val($('#perp-button-text').html());
    }
    else
    {
        validCancelReason();
    }
});

$('#requestCancelButton').click(function()
{
    if (validCancelReason())
    {
        $dialog_cancel.dialog('open');
    }
});

The following is markup taken from a “view source” listing. Please note that jquery is used to only display two of the last four divs, and that some other adjustments are made by the jquery:

<div id="rh-dialog" class="cancel" title="Confirm Cancellation">
    <p>
        This will request cancellation of your continuing subscription service.<br />
    </p>
    <div id="pitch"></div>
    <p style="font-style: italic; margin-top:10px;">
        Please click <strong>YES!</strong> to continue your plan, or <strong>No, Thank You</strong> to cancel.
    </p>
    <div>
        <div id="rh-dialog-button-1">
            <input type="button" id="acceptPitchButton" value="Don't Cancel"  onclick="bar1.showBar(); acceptPitch();" />
        </div>
        <div id="rh-dialog-button-2">
            <input type="button" id="rejectPitchButton" value="No, Thank You, Just Cancel" onclick="bar1.showBar(); rejectPitch();" />
        </div>
    </div>
</div>
<div id="pitch-no" class="no-disp"><strong>GET ONE FREE MONTH!</strong><br />It is very important to us that all of our subscribers have success with our service, not only in speaking with reps but in actually growing your business. Given you are canceling because you were unsatisfied, we would like to offer you <strong>one FREE month.</strong><br /><br />To take advantage of this offer simply click <strong>Yes! Free Month</strong> and your credit card or PayPal account will not be charged for the next month.<br /><br />After your free month, you can choose to cancel your subscription or continue on with our Maintenance plan.<br/><br/><form id="agree-form"><input type="checkbox" id="understand"><strong>I understand</strong> that by requesting a free month I am not canceling my subscription, and that after the free month is over, my credit card or PayPal account will be charged for the next month of service and again every month thereafter until I do cancel.</input></form></div>
<div id="pitch-yes" class="no-disp"><strong>BARGAIN PRICE PERPETUITY PLAN!</strong><br />You realize that placing quality sales reps requires a continual effort trolling for reps at all times because timing is of the essense. For that reason, we would like to offer you our <strong>Perpetuity Plan</strong>.<br /><br />This plan is only USD $79/month, cancel anytime, and you can lock into that rate for life.<br /><br />Click <strong>Yes! Perpetuity Plan</strong> to switch to the Perpetuity Plan.</div>
<div id="free-button-text" class="no-disp">Yes! Free Month - Continue Subscription</div>
<div id="perp-button-text" class="no-disp">Yes! Perpetuity Plan</div>

In addition, I am adding a screen shot:

_{(source: oofdah.com)}

Answer 1

I have adopted as the solution the potential solution noted in my comment above. The solution is adapted from jQuery UI Dialog with ASP.NET button postback.

Essentially the approach I used from that other question was given there as follows:

dlg.parent().appendTo(jQuery("form:first"));

In my case, I adapted that approach by adding this jQuery statement after my dialog was defined:

$dialog_cancel.parent().appendTo($('#cancellationForm'));

After having that statement present, both the jQuery and plain javascript approaches work. That is, either of the two following statements can be used:

alert('jq=' + $('#understand').prop("checked"));
alert('checkbox=' + document.getElementById('understand').checked); 

After using this approach, because of the change to the DOM I had to slightly tweak the styling, because of styles that were applied due to the DOM change.