CODEWITHSUNDEEP
jqueryformsvalidationfirefox
Craig MacNeil
Craig MacNeil

Reputation: 1

Submit button refeshes page in firefox

I have a form on a Cart Checkout page, the user will fill out the form and click a button to validate the form without leaving the page. once the validation is done a checkout button changes class and can be clicked.

this all works cleanly in chrome but firefox just refreshes the page when you click the validation button and the form empties. what do i need to change for this to work in firefox?

html

<form name="contact"id="contact" onSubmit="return checkform()" method="post" action="" >
<fieldset> 
<label for="firstname">Full Name</label>
<input onkeyup="checkform()" type="text" name="firstname" placeholder="Full Name"  class="required" id="first_name">

<label for="address">Address</label>
<input onkeyup="checkform()" type="text" name="address" placeholder="Address" class="required" id="address">

<label for="Company">Company</label>
<input onkeyup="checkform()" type="text" name="company" placeholder="Company" class="required" id="company">

<label for="email">Email</label>
<input onkeyup="checkform()" type="text" name="email" placeholder="[email protected]"  class="required email" id="email">

<label for="phone">Phone</label>
<input onkeyup="checkform()" type="text" name="phone" placeholder="(xxx) xxx xxxx`" id="phone">
<button id="btn" type="button" class="validation">Validate</button>

</fieldset>

jquery

$(document).ready(function () {

$('#contact').validate({ // initialize the plugin
    rules: {
        firstname: {
            required: true
        },
        address: {
            required: true
        },
        company: {
            required: true
        },
        email: {
            required: true
        },
        phone: {
            required: true
        },
    },
});

$('#btn').click(function() {
     event.preventDefault();
    if ($('#contact').valid()) {
        alert('Form is Valid, Please click Send Order');
        $("#btn-submit").removeClass("disabled");
        $("#btn-submit").addClass("simpleCart_checkout");
        $("#btn-submit").attr("href", "javascript:;");


    } else {
        alert('Please Complete all Required Feilds');

    }
});

});

Upvotes: 0

Views: 33

Answers (2)

Jivings
Jivings

Reputation: 23250

You need an argument here to reference the event object:

$('.btn').click(function(e) {
   e.preventDefault();
   ...
});

Upvotes: 1

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

Pass event parameter as argument in the click handler

$('.btn').click(function(event) {
                           ^

Upvotes: 0

Related Questions