提交表格而不离开页面 [英] Submit a Form without Leaving Page

问题描述

我正在做一项调查，该调查将在常见问题"页面的底部.我的问题是，每次提交表单时，它都会将您发送到另一个页面.我想知道-有没有一种方法可以提交表单，并有一条小消息代替显示谢谢您的反馈"的调查，而不是将用户发送到另一个页面或刷新页面?

I am working on a survey that will go at the bottom of a FAQ page. My problem is that everytime a form is submitted, it sends you to a different page. I was wondering - is there a way to submit the form and have a little message that replaces the survey that says "Thanks for your feedback" instead of sending the user to another page or refreshing the page?

到目前为止，我有一个包含HTML表单，CSS和jQuery的文件，以及另一个包含与数据库的PHP连接以及向数据库中插入数据的文件.

So far, I have a file that contains the HTML form, CSS, and jQuery and another file that contains the PHP connection to database and insertion of data to the database.

由于我对编程还比较陌生，我将不胜感激，并提供一个示例会有所帮助.

I would appreciate an explanation that is dumbed-down and an example would help since I am relatively new to programming.

重要说明:如果用户回答非常有帮助/非常有帮助，我的jQuery设置为自动提交.如果没有，则下面还会出现两个问题，并在底部带有一个提交"按钮.

An important note: My jQuery is set up to automatically submit if a user answers very helpful/extremely helpful. If not, two more questions appear below with a submit button at the bottom.

更具体地说，它看起来像这样:

More specifically it looks like this:

$(document).ready(function() {
    $('.rating').click(function() {
    $('.rating').removeClass('selected');
    ratingClick(this);
});
});

function ratingClick(that) {
console.log(that.id);
    if (that.id == 'rating4' || that.id == 'rating5') {
        //$('#questions').fadeOut('slow');
        //$('#thankYou').fadeIn('slow');
        $('#questions').submit();
    } else {
        $('#getMore').fadeIn();
        $(that).toggleClass('selected');
    }
}

$(document).ready(function() {
$('#submit').click(function(){
    //$('#questions').fadeOut('slow');
    //$('#thankYou').fadeIn('slow');
});
});

推荐答案

Alex，

根据您提供的代码，离开页面的原因是由于您没有在click事件中阻止Default().您的页面在提交后将始终重新加载，除非您采取无效措施.没有保证，但是请尝试快速重构以:

from the code you supply, the reason for leaving the page is due to the fact that you don't preventDefault() on the click event. Your page will always reload after that submit unless you take abortive action. No guarantees, but try a quick refactor to:

$(document).ready(function() {
    $('#submit').click(function(e){
        e.preventDefault();
        //$('#questions').fadeOut('slow');
        //$('#thankYou').fadeIn('slow');
    });
});

这应该使您更近一步.然后，您只需定义ajax逻辑，通过快速搜索来满足您的需求就可以了.

This should get you a stage closer. You then just have the ajax logic to define, which should come good with a quick search to match your needs.

这篇关于提交表格而不离开页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！