Question

我有一个表单，当用户单击提交按钮时需要做两件事。第一个是向我发送电子邮件，第二个是将用户发送到PayPal。我已将其设置为首先对另一个页面进行Ajax调用，然后该页面发送电子邮件。一旦该页面返回成功，它就会调用一个函数来触发表单的提交。

我已经使用标准按钮而不是提交按钮放入表单，并且甚至可以检测它何时被点击。一切都运行良好，直到我尝试在Ajax调用后提交表单，此时表单未提交。这是我的javascript：

$('#submit-btn').on('click', function() {

    var err = false;
    $('input, textarea', '#booking-form').each(function(index, element) {
        if($(this).is('[required]') && $(this).val() < 2) {
            alert('Please enter your ' + $(this).prop('placeholder').toLowerCase() + ' before continuing.');
            $(this).focus();
            err = true;
            return false;
        }
    });

    if(err) {
        return false;
    }

    if($('#date').val() == 0) {
        alert('You must choose a date before booking');
        return false;
    }

    ShowLoadingScreen();

    var data = {
        'name': $('#name').val(),
        'address': $('#address').val(),
        'tel': $('#tel').val(),
        'email': $('#email').val(),
        'course': $('#course').find('option:selected').text(),
        'location': $('#location').find('option:selected').text(),
        'date': $('#date').find('option:selected').text()
    };
    AjaxHandler('book-course.php', data, "POST", true);
    //AjaxHandler sends the data off to book-courses.php, which then returns a call to BookingSuccess(). 
    //This is working fine as evidenced by the console.log line showing in the console.

});


function BookingSuccess() {

    $('#booking-form').submit();
    console.log('Booking success called...');

}

AjaxHandler是一个调用页面的自定义函数，然后处理某些响应，包括调用函数。正在调用BookingSuccess，因为在控制台中输出了名为...的预订成功。然而，表格尚未提交。

我创建了一个jsFiddle of the issues here。

<小时/> 我尝试了什么

到目前为止，我已经尝试了以下内容：

绕过Ajax - 没有效果
使用按钮直接提交表单，忽略了对Ajax的需求 - 表单工作正常。
删除除表单以外的所有HTML - 无效
尝试在#submit-btn点击事件的顶部提交表单 - 无效
在$('#booking-form').submit() - 无影响
使用较长版本的jQuery触发器$('#booking-form').trigger('submit') - 无效。
在表单console.log中放置onsubmit=""事件以查看表单是否被触发 - 适用于小提琴，但不适用于网站。

我不知道为什么这个表格不会提交。什么都不应该阻止它。我们正在接近并通过这条线。我已经在FireBug中休息并介入，我们可以很好地完成该功能。它只是不起作用。

如何才能正确提交此表单？

Answer 1

进一步检查（以及聊天中的一些死胡同和红色鲱鱼），看起来该页面有两个具有相同ID的元素。改变一个或另一个，你就是金色的。

$（id）.submit（）不会触发提交表单

1 个答案: