Question

我尝试使用jQuery提交表单，但无效。当我不使用jQuery提交的表单并正确地将数据保存到数据库。

以下是我在<head>部分

上的代码

$(document).ready(function() {
        var form = $('#ticketForm');
        var submit = $('#submit');  

        form.on('submit', function(e) {
            e.preventDefault();

            $.ajax({
                url: 'booking.php',
                type: 'POST',
                data: $('#ticketForm').serialize(),
                dataType: "json",
                beforeSend: function() {
                    submit.html('Booking....');
                },
                success: function(e) {
                    form.trigger('reset'); // reset form
                    submit.html('Ticket Booked');
                },
                error: function(e) {
                    console.log(e)
                }
            });
        });
    });

我的表单是

<form  method="post" id="ticketForm" action="booking.php" class="form-horizontal ticket-form pull-right" role="form">

<div class="form-group">
  <label for="ticket_no" class="col-lg-3 control-label">Your Seat: </label>
  <div class="col-lg-8">
  <?php 
    $bus_name = $_GET['bus_name'];
    $date = $_GET['date'];
    $time = $_GET['time'];

  ?>
      <input class="form-control selected-ticket" id="ticket_no" name="ticket_no" value=""type="text" readonly="readonly" >
      <input class="form-control" id="ticket_id" name="ticket_id" value="<?php echo $ticket_id ;?>" type="hidden" >
      <input class="form-control" id="user_id" name="username" value="<?php echo $username;?>" type="hidden" >
      <input class="form-control" id="bus" name="bus_name" value="<?php echo $bus;?>" type="hidden" >
      <input class="form-control" id="date" name="date" value="<?php echo $date;?>" type="hidden" >
      <input class="form-control" id="time" name="time" value="<?php echo $time;?>" type="hidden" >

  </div>
</div>
<p>Seat No: <span class="ticket-count" id="ticket-count" > </span></p>

<div class="form-group">
<label for="discount" class="col-lg-4 control-label view-discount">Discount: </label>
<div class="col-lg-8">
    <input class="form-control" id="discountdis" placeholder="Click on Discount" disabled>
    <input class="form-control discount hide" id="discount" name="discount" type="text" onkeyup="CalcDiscount();" autocomplete="off" max="4">
</div>
<label for="total-price" class="col-lg-4 control-label">Total Price: </label>
<div class="col-lg-8">
    <input class="form-control total-price" id="total-price" name="totalprice" type="text" readonly="readonly">
</div>
<label for="customername" class="col-lg-4 control-label"> Customer Name: </label>
<div class="col-lg-8">
    <input class="form-control" id="customername" name="customername" type="text" >
</div>
<label for="customermobile" class="col-lg-4 control-label">Customer Mobile </label>
<div class="col-lg-8">
    <input class="form-control" id="customermobile" name="customermobile" type="text" >
</div>
</div>

<button id="submit" type="submit" name="submit" class="btn btn-success btn-sm pull-right">Continue</button>

</form>

控制台但未重置表单

Object {readyState: 4, responseText: "Booking Successfull 11", status: 200, statusText: "OK"}

表单不使用jQuery提交

0 个答案: