$("#form").submit(); is not working as expected

debugcn 投稿 Dev

Ratha

I have two buttons(save, publish) defined in my form. If i Click 'save' and then 'publish' , publish button is not working. The issue here is, save function works fine as expected. But when clicking 'publish', what happens is it tries to submit the form and rather to validate the form which defines under 'publish' function, it goes to 'save' function's validate function and further process.I would like to know why it skips that and jump to 'save' function's validate process?

The sample code;

Form:

<form class="form-horizontal" method="POST" id="manage_form">
    <div class="form-actions" id="saveButtons"> 
        <button class="btn btn-primary" id="save"/>save</button>
        <% if (outputs.isPermitted) { %> 
            <a class="btn btn-info" id="publish">Publish</a>  
        <% } %>
    </div>
</form>

Jquery

// cache var to eliminate unnecessary re-querying

var $manageForm = $('#manage_form');

$('#save').click(function (e) {
   var v = $("#manage_form").validate({
            submitHandler: function(form) {
            if(!validate_tiers()){
                return false;

            }
            var designer = APIDesigner();
            $('#swagger').val(JSON.stringify(designer.api_doc));
            $('#saveMessage').show();
            $('#saveButtons').hide();
            $(form).ajaxSubmit({
                success:function(responseText, statusText, xhr, $form) {
            //............
        });
    $("#manage_form").submit();
    });



    $('#publish').click(function(e){

    alert('xxx');
    e.preventDefault();
        var v = $("#manage_form").validate({

            submitHandler: function(form) {
             if(!validate_tiers()){
                return false;
            }
            var designer = APIDesigner();
            $('#swagger').val(JSON.stringify(designer.api_doc));
            $('#saveMessage').show();
            $('#saveButtons').hide();        
            $(form).ajaxSubmit({
                success:function(responseText, statusText, xhr, $form) {
                    $('#saveMessage').hide();
                    $('#saveButtons').show();                
                    if (!responseText.error) {  

                        $( "body" ).trigger( "api_saved" );       
                    } else {
                         if (responseText.message == "timeout") {
                             if (ssoEnabled) {
                                 var currentLoc = window.location.pathname;
                                 if (currentLoc.indexOf(".jag") >= 0) {
                                     location.href = "index.jag";
                                 } else {
                                     location.href = 'site/pages/index.jag';
                                 }
                             } else {
                                 jagg.showLogin();
                             }
                         } else {
                             jagg.message({content:responseText.message,type:"error"});
                         }
                    }
                }, dataType: 'json'
            });
            }
        });
        alert('zzz');
      $manageForm.submit();
    });

Manwal

Prevent default submitting of form simply use:

e.preventDefault();

Use different submit handler for each button, This is what you want:

$('#myform').validate({
    });
$('#submit').click(function(e) {
    e.preventDefault();
    $("#myform").data("validator").settings.submitHandler = function (form) { 
                                                                            alert('submit with submit'); 
                                                                             //your code
                                                                            return false; 
                                                                        };
    $('#myform').submit();
    return false;
});
$('#publish').click(function(e) {
    e.preventDefault();
    $("#myform").data("validator").settings.submitHandler = function (form) { 
                                                                            alert('submit with publish'); 
                                                                            //your code
                                                                            return false; 
                                                                        };
    $('#myform').submit();
    return false;
});