防止页面在表单提交到数据库时重新加载

我看过一些类似于我的问题，但不完全相同，所以如果这是重复的，对不起。我正在使用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

防止页面在表单提交到数据库时重新加载

回答

相关问题