Form submits even when i use prevent default on submit button click

Question

what i want is that when i click on button "find reservation", the form submit should not refresh the page. Instead it should enable some fields in find reservation form underneath. But I am not able to achieve that. I am using bootstrap. Here is my html part:-

<div class="container">
    <div class="jumbotron checkInGuest">
    <h3 class="h3Heading">Request for following information from guest</h3>
    <form class="form-horizontal" id="checkInForm">
        <div class="form-group">
            <label for="reservationId" class="col-md-4">Reservation Id</label>
            <div class="col-md-8">
            <input type="text" class="form-control" id="reservationId" name="reservationId" required>
            </div>
        </div>
        <div class="form-group">
            <label for="dlNum" class="col-md-4">Driver License #</label>
            <div class="col-md-8">
                <input type="number" class="form-control" id="dlNum" min="0" name="dlNum" required>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-2">
            <button type="submit" class="btn btn-success" id="findResButton">Find Reservation</button>
            </div>
        </div>
    </form>

        <!-- Form when info is found. Initially all fields are disabled-->
    <div class="clear clearWithBorder"></div>
    <h3 class="h3Heading">Information Found</h3>
    <form class="form-horizontal">

        <div class="form-group">
            <label for="resId" class="col-md-3">Reservation Id</label>
            <div class="col-md-3">
                <input type="text" class="form-control" id="resId" name="resId" disabled>
            </div>
            <label for="dlNumReadOnly" class="col-md-3">Driver License #</label>
            <div class="col-md-3">
                <input type="number" class="form-control" id="dlNumReadOnly" min="0" name="dlNumReadOnly" disabled>
            </div>
        </div>

        <div class="form-group">
            <label for="guestFullName" class="col-md-3">Guest Full Name</label>
            <div class="col-md-3">
                <input type="text" class="form-control" id="guestFullName"  name="guestFullName" disabled>
            </div>
            <label for="email" class="col-md-3">Email</label>
            <div class="col-md-3">
                <input type="email" class="form-control" id="email"  name="email" disabled>
            </div>
        </div>

        <div class="form-group">
            <label for="numRooms" class="col-md-3">Rooms Booked</label>
            <div class="col-md-3">
                <input type="number" class="form-control readable" id="numRooms"  name="numRooms" disabled>
            </div>
                <label for="roomType" class="col-md-1">Room Type</label>

                <div class=" col-md-2">
                    <label for="smoking">
                        <input type="radio" name="roomType" id="smoking" class="roomType readable" disabled> Smoking
                    </label>
                </div>
                <div class=" col-md-3">
                    <label for="nonSmoking">
                        <input type="radio" name="roomType" id="nonSmoking" class="roomType readable" disabled>Non-Smoking
                    </label>
                </div>
        </div>
        <div class="form-group">
            <label for="discount" class="col-md-3">Discount</label>
            <div class="col-md-3">
            <select class="form-control readable" id="discount" disabled>
                <option selected>0%</option>
                <option>10%</option>
                <option>20%</option>
                <option>30%</option>
            </select>
                </div>
            <label for="checkInDate" class="col-md-3">CheckIn Date</label>
            <div class="col-md-3">
                <input type="date" class="form-control readable" id="checkInDate"  name="checkInDate" disabled>
            </div>
        </div>

        <div class="form-group">
            <label for="checkOutDate" class="col-md-3">CheckOut Date</label>
            <div class="col-md-9">
                <input type="date" class="form-control readable" id="checkOutDate"  name="checkInDate" disabled>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-2">
                <button type="button" class="btn btn-success" id="roomOrdButton">Confirm Room Order</button>
            </div>
        </div>
    </form>

        <div class="clear clearWithBorder"></div>
        <h3 class="h3Heading">Final Room Order</h3>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="perInEachRoom" class="col-md-12">Number of people in each room</label>
                <div class="col-md-8 " id="perInEachRoom">

                </div>
                <div class="form-group">
                    <div class="col-md-2">
                        <button type="button" class="btn btn-success" id="checkInButton">Check In</button>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>

And this is jquery part:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>

    $("#checkInForm").validator();

    $("#findResButton").click(function(e){
        e.preventDefault();
        $(".readable").prop("disabled",false);

    });

    $("#roomOrdButton").click(function(){
        var numberOfRooms=$("#numRooms").val();
        var counter=0;
        var container=$('<div/>');
        $(".readable").prop("disabled",true);
        for(counter=1;counter<=numberOfRooms;counter++){
           container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable"  name="checkInDate" />');
        }
        $("#perInEachRoom").html(container);
    });

    $("#checkInButton").click(function(){
        $("#perInEachRoom").html("");
    });



</script>

Does find reservation checks information against a kind of database or file? — agustin, Nov 25 '15 at 01:50
not as of now. basically all i want to see is that once i enter all info it just doesnt refresh whole page. Instead it should enable some fields in the underlying "Information found" section. Basically all classes which are defined as "readable" should be enabled so that user can enter more info in that form. — Rajat Bansal, Nov 25 '15 at 01:52
@RajatBansal, Try `$(".readable").attr('disabled','disabled');` instead of `$(".readable").prop("disabled",false);` — Kaushik Maheta, Nov 25 '15 at 01:57
just curious, but why use a submit button if you don't want to post the form? — Derek Van Cuyk, Nov 25 '15 at 02:01
@DerekVanCuyk : i will do that in future because i will use db then — Rajat Bansal, Nov 25 '15 at 02:11
@KaushikMaheta : i didnt get your syntax shouldnt it be $(".readable").attr("disabled",false); ? — Rajat Bansal, Nov 25 '15 at 02:15

score 1 · Answer 1 · edited May 23 '17 at 10:27

You need to put your code in a document.ready() function, so:

$(document).ready(function() {
    $("#checkInForm").validator();

    $("#findResButton").click(function(e){
        e.preventDefault();
        $(".readable").prop("disabled",false);

    });

    $("#roomOrdButton").click(function(){
        var numberOfRooms=$("#numRooms").val();
        var counter=0;
        var container=$('<div/>');
        $(".readable").prop("disabled",true);
        for(counter=1;counter<=numberOfRooms;counter++){
           container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable"  name="checkInDate" />');
        }
        $("#perInEachRoom").html(container);
    });

    $("#checkInButton").click(function(){
        $("#perInEachRoom").html("");
    });
});

You should also have a look at this question: Form is submitted when I click on the button in form. How to avoid this?

Long story short, you should use

<button type="button"...

not

<button type="submit"...

but then changing it to button doesnt do validation and even when i click find info it doesnt throw error if field is empty. and in browser console i see this error "Uncaught TypeError: $(...).validator is not a function" — Rajat Bansal, Nov 25 '15 at 02:25

score 0 · Accepted Answer · answered Nov 25 '15 at 08:20

Actually, all I did is:-

$("#checkInForm").submit(function(e)
{
   e.preventDefault();
});

And that solved it. I didnt have to change button type or anything. Basically, in future when I will make AJAX calls I will have the code underneath preventDefault statement.

Form submits even when i use prevent default on submit button click

2 Answers2