防止頁面在表單提交到數據庫時重新加載

我看過一些類似於我的問題，但不完全相同，所以如果這是重複的，對不起。我正在使用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}')")

來源

2016-12-30 Mike

'target ='隱藏或不隱藏iframe

我很想知道多種方式來做到這一點。請詳細說明你的意思。如果我有一個標記爲fname的表單，我會在提交標記中放置... target = fname？ – Mike

我認爲你正在嘗試提交沒有頁面刷新的表單。現在，您可以提交表單，數據傳送和保存到數據庫，但JavaScript的：

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

無法執行並完成工作，因爲瀏覽器重定向（你正在請求/ about_you）。你需要做的是簡單的AJAX請求（在後臺發送數據，瀏覽器停留在同一頁面，併成功發送和從服務器響應後 - 的JavaScript踢）

更改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">

來源

2016-12-30 22:05:36 linderman

任何你可以添加到只是幫助我瞭解那裏發生了什麼。 url，data，serialize ...我假設成功：基本上（onsuccess運行這個函數）和$（btn）.parents（'form），基本上是我不熟悉的全部東西。但它非常好，非常感謝你！ – Mike

好的。我一直在玩它。我通過運行隱藏感謝消息的隱藏功能來啓動頁面。你的代碼奇妙地工作，除了它不加載thank_you消息。我在開始頁面的最底部有hideThankYou函數，並且隱藏起作用。隱藏功能是否阻止您的代碼顯示thank_you ID？這是功能 – Mike

默認情況下，您不必使用函數來隱藏thank_you消息。相反：在id爲「thanks_you」的html元素上（或者其他名稱）添加內聯樣式style =「display：none」。這種方式你沒有單獨的JavaScript來隱藏默認的消息。 – linderman

防止頁面在表單提交到數據庫時重新加載

回答

相關問題