javascript - 是否可以在我的表单提交按钮上使用 onClick 函数？

Question

我将多个数据存储在一个表中以供查询依据..它已成功存储在我的表中。但现在我还想将这些相同的数据存储在 Booking 基础上。

所以我使用onClick函数来存储查询数据。现在我想通过表单提交按钮将预订数据存储在表中。

这是我的表单提交按钮代码:

<button type="submit" class="booking-btn" onclick="btn_booking_hour();" id="btn_booking_hour">Book Now</button>

这是我的表单操作:

<?php echo form_open('booking/'.$product->id); ?>

这是我的功能:

function btn_booking_hour()
    { 

    var date = $('#datehour').val();
    var renter_id = $("#ownerid").val();
    var guests_quantity = $('#no_of_guests').val();
    var property_id = $('#property_id').val(); 
    var selectedIds="";
    var selectedObject = document.getElementsByClassName('hour_slots_available slot_activated');
    for(var i=0;i<selectedObject.length;i++)
      selectedIds+=selectedObject[i].id+",";

    if(selectedIds == ""){

        alert("Please select Hour-Slot(s) before Booking");
    }
    else{

        $.ajax({

    type: 'POST',
    dataType:'json',
    url:baseURL+'site/rentals/ajaxhourshow',

    data:{'selectedHours':selectedIds,'property_id':property_id,'date':date,'guests_quantity':guests_quantity,'renter_id':renter_id},

    success: function(responce){

        var myJSON = JSON.stringify(responce);
        var packet = $.parseJSON(myJSON);

        var  prd_id=packet.property_id;
        var hour_slots=packet.hour_slots;
        window.location.href = baseURL+'booking/'+prd_id;
        }
    });
   }

}

请建议我如何在 onClick 函数中提交包含数据的表单。谢谢..

Answer 1

不确定您是否使用表单，如果您使用它，您可以使用onsubmit处理程序并返回操作。在这种情况下，您不需要按钮中的 onclick 处理程序

<form onsubmit = "return btn_booking_hour()">
  // Rest of code
</form>

你也可以这样做

$('#form').on('submit',function(e){
 e.preventDefault();
 // rest of the code
})