javascript - 使用 Ajax 生成表单后使用 jQuery 发送表单

Question

我正在尝试构建一个单页预订系统，我非常了解 php，但在 jquery 方面遇到了困难。

我了解 jquery 的基础知识，但我不是专家。

无论如何，我已经构建了一个预订系统，当有人单击日期时，它会打开一个使用 php 创建并使用 ajax 拉入的表单。

我遇到的问题是在使用ajax拉取此表单后发送该表单，然后通过ajax将其发送到另一个页面进行检查，然后根据表单提交的检查接受或拒绝。

这是使用 php 生成的 html 表单:

<form id="bookingform" method="post">

<label class="bookinglabel" for="hour-9">9:00am - 10:00am</label>

<select id="hour-9" name="hour-9" for="hour-9">

    <option value="null">Please Select</option>
    <option value="1">Book A Slot For 1 Person</option>
    <option value="2">Book A Slot For 2 People</option>
    <option value="3">Book A Slot For 3 People</option>
    <option value="4">Book A Slot For 4 People</option>
    <option value="5">Book A Slot For 5 People</option>
    <option value="6">Book A Slot For 6 People</option>
    <option value="7">Book A Slot For 7 People</option>
    <option value="8">Book A Slot For 8 People</option>
</select>

<label class="bookinglabel" for="hour-10">10:00am - 11:00am</label>

<select id="hour-10" name="hour-10" for="hour-10">
    <option value="null">Please Select</option>
    <option value="1">Book A Slot For 1 Person</option>
    <option value="2">Book A Slot For 2 People</option>
    <option value="3">Book A Slot For 3 People</option>
    <option value="4">Book A Slot For 4 People</option>
    <option value="5">Book A Slot For 5 People</option>
    <option value="6">Book A Slot For 6 People</option>
    <option value="7">Book A Slot For 7 People</option>
    <option value="8">Book A Slot For 8 People</option>
</select>

<button type="submit" class="ajaxsubmit1">Proceed</button>

</form>

这是表单的 jquery 部分，它最初调用日期，然后尝试提交表单。

jQuery(document).ready(function(){

    jQuery('.ajaxbooking').on('click', function(event){

        event.preventDefault();

        var selecteddate = jQuery(this).attr('data-date');
        var url = 'http://localhost:8888/booking.php';
        var winh = jQuery(window).height();

        jQuery.ajax({url: url  + '?date=' + selecteddate}).done(function(data) {
            jQuery('.ubl-booking-ajax').html(data);
            jQuery('.ubl-booking-ajax').animate({marginRight: "0px"}, 700 );
            jQuery('.ubl-portfolio-button').fadeIn(700);
        });

        return false;

    });

    jQuery('.ubl-portfolio-button').on('click',function(event){

        event.preventDefault();

        jQuery('.ubl-booking-ajax').animate({marginRight: "-100%"}, 700 );
        jQuery('.ubl-portfolio-button').fadeOut(300);

        return false;

    });

    jQuery("#bookingform").submit(function(e){

        e.preventDefault();
        alert('this has worked');


    });

});

显然，我只是被提醒看看它是否有效，但事实并非如此。

谁能给我指出正确的方向

谢谢

Answer 1

尝试一些这样的

jQuery("body").on("submit", "form", function(e){
    e.preventDefault();
    if(jQuery(this).attr("id") == "bookingform") {
        alert('this has worked');
    }
});