即使我在提交按钮单击时使用防止默认设置，表单也会提交答案

【问题标题】：Form submits even when i use prevent default on submit button click即使我在提交按钮单击时使用防止默认设置，表单也会提交
【发布时间】：2015-11-25 01:45:21
【问题描述】：

我想要的是，当我单击“查找预订”按钮时，表单提交不应该刷新页面。相反，它应该在下面的查找预订表单中启用一些字段。但我无法做到这一点。我正在使用引导程序。这是我的 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>

【问题讨论】：

是否找到针对某种数据库或文件的预订检查信息？
目前还没有。基本上我想看到的是，一旦我输入所有信息，它就不会刷新整个页面。相反，它应该启用基础“找到的信息”部分中的某些字段。基本上所有定义为“可读”的类都应该启用，以便用户可以在该表单中输入更多信息。
@RajatBansal，试试$(".readable").attr('disabled','disabled'); 而不是$(".readable").prop("disabled",false);
只是好奇，但如果您不想发布表单，为什么要使用提交按钮？
@DerekVanCuyk：我以后会这样做，因为那时我会使用 db

标签： javascript jquery html twitter-bootstrap-3

【解决方案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"...

【讨论】：

但随后将其更改为按钮不会进行验证，即使当我单击查找信息时，如果字段为空，它也不会引发错误。在浏览器控制台中我看到这个错误“Uncaught TypeError: $(...).validator is not a function”

【解决方案2】：

其实我所做的只是：-

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

这就解决了。我不必更改按钮类型或任何东西。基本上，将来当我进行 AJAX 调用时，我将在 preventDefault 语句下面有代码。

【讨论】：