Search code examples
jquerybloggerpreventdefault

how to avoid preventdefault


I am using a free blogger template and there is the possibility to submit a form with some information. Some are optional some are required. The piece of code that takes care of sending the email is

$('#send-order').click(function(e) { e.preventDefault(); passEmail() });

and passEmail is simply this

function passEmail() {
    simpleCart({
        checkout: {
            type: "SendForm",
            method: "POST",
            extra_data: {
                firstname: document.getElementById("first_name").value,
                lastname: document.getElementById("last_name").value,
                email: document.getElementById("email").value,
                phone: document.getElementById("phone").value,
                address: document.getElementById("address").value,
                postcode: document.getElementById("postcode").value,
                comments: document.getElementById("message").value
            }
        }
    });
    simpleCart.checkout();
};

function cleanUrl(url) {
    return url.replace(/^https?\:\/\//i, "")
};

function storeUrl() {
    return $(location).attr('hostname')
}
simpleCart.bind('beforeCheckout', function (data) {
    data.first_name = document.getElementById("first_name").value;
    data.last_name = document.getElementById("last_name").value;
    data.phone = document.getElementById("phone").value;
    data.email = document.getElementById("email").value;
    data.address = document.getElementById("address").value;
    data.postcode = document.getElementById("postcode").value;
    data.comments = document.getElementById("message").value;
});

There is a way to bypass the preventDefault() so that the email doesn't go through the validation process?


Solution

  • e.preventDefault() in this context looks like it's because #send-order is an <a> or more likely a submit button <input type="submit"/>. You can make #send-order a clickable <div>. I'm not sure that'll allow you to bypass validation though...

    UPDATE

    Sometimes, I find it easier to use a quick and dirty non-semantic <div> button:

    <div id="send-order" style="cursor: pointer; pointer-events: auto;">SEND</div>
    

    I'm pretty sure you can use <button id="send-order">SEND</button>there's no default behavior expected from it afaik.