使用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');
    }
});