jQuery Serialize（）提交表单

Question

I have a form that gets submitted when I click the button and it sends an email and everything works good.

I want to change the form to use the type="submit" and when i do and change my function it never sends the email.

What should I do to make this possible.

<!-- Changed to type="submit" for browser validation" -->
<button type="button" class="btn btn-primary" id="email-button" name="submit">
   Submit Emails
</button>

All this works for me

$('#email-button').on("click", function(){
    if(TestInput())
    {
        PostCustomerOrderData();
    }
});   

PostCustomerOrderData()

function PostCustomerOrderData() {

    $.ajax({
        type: "POST",
        url: "./send-email.php",        
        data: $("form").serialize()
    })
        .done(function(data) {
            var json = JSON.parse(data);
            //console.log(json);

            if(json.error == 1)
            {
                //Something wrong has happened
                alert(json.error_message);
            }
            else if(json.error == 0)
            { 
                 alert("Your order has been sent successfully");
                // Clear all fields
               ClearFormElements();

                if(PROCESS_SAVE_ORDERS)
                {
                    var orders = localStore.getValue(ORDERS_KEY);
                    orders.pop(); //Remove current order from the orders (in local storage)
                    localStore.setValue(ORDERS_KEY, orders);
                    /* Added in to make pending button alter 
                     the total number of orders pending for user feedback */
                    RenderPendingBtn();
                    // run function again 
                    FetchOrderFromLocalStorage();
                }   
            }
    })
        .fail(function (){
            var form = $('form').serializeArray();
            //console.log(form);

            if(!PROCESS_SAVE_ORDERS)
            {
                var orders = localStore.getValue(ORDERS_KEY);
                if(orders == null)
                {
                    orders = [];
                }
                orders.push(form);

                localStore.setValue(ORDERS_KEY, orders);

                ClearFormElements();                    
            }
        });              
}

I have changed the button type to submit, and the on("submit") for the jQuery function but I am lost now.

Answer 1

Try using

$('#email-button').on("click", function(e){
   e.preventDefault();
    if(TestInput())
    {
        PostCustomerOrderData();
    }
}); 

Fiddle

A simple example

Answer 2

I would guess that the default form action is overriding your jQuery event.

In your form tag add onsubmit="return false"

Answer 3

$("form").on("submit",function(e){
    //all your code goes here
    e.preventDefault();
    return false;
});