データベースへのフォーム提出時にページをリロードしないようにする

Question

私は似たような質問をいくつか見たことがありますが、全く同じではないので、重複していればごめんなさい。私はjavascriptのhide関数とshow関数を使用して、データベースに情報を送信したフォームを送信した後に「ありがとうございました」というメッセージを表示しないようにしようとしていますが、正常に動作しますが、次のページ。いつも/ about_youに行く。

フォームの上部にあるonsubmit = "return false"を使用してみましたが、フォームの送信が完全に防止されています。試してonclick = "falseを返します。私はjquery関数を実装する方法はあまりよく分かりません。 jqueryについて何も何も知らないので、答えがjqueryを含む場合はできるだけ詳細を教えてください。

私は、ページの読み込みを後で「アンケートを完了していただきありがとうございます」としています。それは1ページのウェブページなので、別のウェブページの複製版は実行可能ではありません。どんな援助も非常に高く評価されます。ありがとうございました。

これはjavascript関数です。

function hideyou(){ 
    document.getElementById("about_you_form").style.display = "none"; 
    document.getElementById("thank_you").style.dislay = "block"; 
} 

これはこれは私がルビーに入れたコードである

<input id="about_you_submit" type="submit" onclick="hideyou();" value="Submit"> 

を提出しています。

post '/about_you' do 

fname = params[:fname] 
lname = params[:lname] 
address = params[:address] 
address2 = params[:address2] 
city = params[:city] 
state = params[:state] 
zip_code = params[:zip_code] 
email = params[:email] 

db.exec("INSERT INTO public.users (fname, lname, address, address2, city, state, zip_code, email) 
VALUES ('#{fname}', '#{lname}', '#{address}', '#{address2}', '#{city}', '#{state}', '#{zip_code}', '#{email}')") 

Answer 1

ページを更新しないでフォームを送信しようとしていると思います。今、あなたがフォームを送信することができ、データをDBに送信し、保存されているが、JavaScript：

document.getElementById("about_you_form").style.display = "none"; 
document.getElementById("thank_you").style.dislay = "block"; 

その作業を実行して行うことができ、ブラウザがリダイレクトされるため、（あなたが/ about_youに要求を行っています）。何をする必要は簡単AJAX要求である（バックグラウンドでデータを送信し、ブラウザが同じページに、成功した送信し、サーバからの応答の後にとどまる - でキックジャバスクリプト）

変更し、あなたのhideyou関数として：

function hideyou(e, btn){ 
    e.preventDefault(); 
    var form = $(btn).parents('form'); 

    $.ajax({ 
    type: "POST", 
    url: $(form).attr('action'), 
    data: $(form).serialize(), 
    success: function(response){ 
     document.getElementById("about_you_form").style.display = "none"; 
     document.getElementById("thank_you").style.dislay = "block"; 
    } 
    }); 

} 

次に変更

<input id="about_you_submit" type="submit" onclick="hideyou();" value="Submit"> 

へ

<input id="about_you_submit" type="submit" onclick="hideyou(event, this);" value="Submit">