Can not submit modal form when have two modal on page

Can not submit modal form when have two modal on page

I have a view with two pop-up dialog form, example bellow, form 1 can not submit (click submit button of form 1 (name Print PDF), nothing happen) when form 2 exist, please help 

//Form 2
<div id="dialog-form-2" title="Form 2" style="display: none">
    <form class="singlepopup">
        //some stuff
    </form>
</div>

//Form 1
<div id="dialog-form-1" title="Form 1" style="display: none">
    <form class="singlepopup" id='pdf_frm'>
        //some stuff
    </form>
</div>

//Script for form 1, with a submit button name Print PDF
$("dialog-form-1").dialog({
    autoOpen: false,
    height: 200,
    width: 370,
    modal: true,
    buttons: [
    {
        text: 'Print PDF',
        click: $.noop,
        type: 'submit',
        form: 'pdf_frm'
    },
    {
        text: 'Close',
        click: function(){
            $(this).dialog('close');
        }
    }
    ]
});

//Script for form 2, some ajax...
$( "#dialog-form-2" ).dialog({
    autoOpen: false,
    height: 250,
    width: 370,
    modal: true,
    buttons: {
    "Change week": function() {
        var bValid = true;
        allFields.removeClass( "ui-state-error" );

        $.ajax({
            url: 'ajax/change_week.php',
            data: 'year=' + sl_year + '&week=' + sl_week + '&id=' + id_dt,
            dataType: 'json',
            success: function(data){
                var str = "";
                $.each(data, function(i, items){
                    str += items.new_week;
                }); //end each

                if(str.length > 0){
                    $("#" + id_dt).html(str);
                }
            }
        });
        $( this ).dialog( "close" );
    },
    Cancel: function() {
        $( this ).dialog( "close" );
    }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});