javascript - 即使我在提交按钮单击上使用“防止默认值”，表单也会提交

Question

我想要的是，当我单击“查找预订”按钮时，提交的表单不应刷新页面。相反，它应该启用下面的查找预订表单中的某些字段。但我无法实现这一点。我正在使用 Bootstrap 。这是我的 html 部分:-

<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>

这是 jquery 部分:-

<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>

Answer 1

您需要将代码放入 document.ready() 函数中，因此:

$(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("");
    });
});

您还应该看看这个问题:Form is submitted when I click on the button in form. How to avoid this?

长话短说，你应该使用

<button type="button"...

不是

<button type="submit"...