jquery modal dialog before form submit

Question

I have a form on a page, and I am trapping the click action on two submit buttons. There is another submit button that is not trapped (i.e. I dont need to show a modal for this button).

So, my obvious problem is that I need to block the submit action when the modal first opens, and I then need to force the submit when the user actually clicks the OK button in the modal. However, because each button has a specific name and value associated with it (which the back-end script needs to know), a $('#myform').submit() method will therefore not work.

function something(msg) {
    var $dialog = $('<div></div>').html(msg).dialog({
        autoOpen: false,
        title: 'Please confirm...',
        modal: true,
        buttons: {
            "OK": function () {
                $dialog.dialog('close');
                //submit needs to happen here
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
    $dialog.dialog('open');
    event.preventDefault();
    return false;
}

Michael Myers · Accepted Answer · 2014-12-17 23:34:40Z

1

I would include a hidden field to take on the name and value of the submit button clicked:

<input type="hidden" name="subName" value="" />

$("#submit_button_one").function() {
    $("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
    something("message");
    return false;
});
$("#submit_button_two").function() {
    $("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
    something("message");
    return false;
});

function something(msg, act) {
    // ...
    //submit needs to happen here
    $('#myform').submit()
}

edited Dec 17, 2014 at 23:34

Michael Myers♦

193k47 gold badges301 silver badges297 bronze badges

answered Feb 8, 2012 at 17:43

Grim...

17k7 gold badges47 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Grim... Over a year ago

You can change the form's action attribute with document.myform.action ="page1.html";

JonoB Over a year ago

Each submit button has a different name and value, and the backend script needs to know which button was clicked. Your method will not know which button was clicked.

Grim... Over a year ago

Ah, okay - I was getting confused over "action". I will update my answer.

acmsohail Over a year ago

@Grim... could you please solve my issue similar like above. stackoverflow.com/questions/44181398/…

Collectives™ on Stack Overflow

jquery modal dialog before form submit

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related