在提交过程中使用同步确认灯箱提交表单

Question

Problem We need to give facility on lightbox to cancel the form submission or provide extra information to continue with form submissions.

Detailed Requirements I've a HTML form. Before form is submitted, we need to show a lightbox, to ask some extra information from the user. In simple words, I need synchronous behaviour in a Javascript function. I know it is not expected JS behavior but I'm also sure it is possible and someone must had achieved it by one way or other. How can we do that.

Code looks like following, hope is clears the problem better.

//This is called when submit button is clicked.
$('.mbutton').bind('click', function(e){
    var subButton = e.target || e.srcElement || e.originalTarget;
    var value = subButton.id;

    //If submit button pressed.
    if (value == "Publish"){
        //custom JQuery plugin to open light box.
        $.siddlb('#puboptions',{});
        //Lightbox opens but soon form too submits and new page gets loaded. Requirements are, function must wait here until light box is closed.
    }

    //Below task should execute only if user provide required information in lightbox.
    finalize();
    try{
        if (value == "Publish"){
            var canvas = document.getElementById("imageView");
            var context = canvas.getContext("2d");
            var img     = canvas.toDataURL("image/png");
            document.getElementById("textimage").value = img;            
        }
        //$("#myaction").val(subButton.id);
        $("#myaction").val('Publish');
    }catch(e){
        $("#myaction").val("Cancel");                   
    }
});

Answer 1

I guess your publish button (as name suggest) is form's submit button.

There might be different ways but if I were you, I would have make publish button as simple button like

<button class="mbutton" id="publish">Publish</button>

On its click, do whatever you want to do in the lightbox. Just place another button in lightbox like 'continue' and on its click, submit the form through javascript.

This is very simple and straight forward solution, may be you are looking for some other solution. Please let me know if you find other solution.