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

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

1 个答案: