我看到了一些类似于我的问题,但不完全相同,因此,如果这是重复的,对不起。我正在使用JavaScript hide并显示功能,以尝试在提交表单后隐藏"谢谢"消息,该表格将信息提交到数据库中,但效果很好,但是我无法阻止页面转到页面下一页。它总是转到/大约。
我尝试在表单顶部使用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">
这是我放在Ruby中的代码。
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}')")
我认为您正在尝试提交表单而没有页面刷新。现在您可以提交表格,数据发送并保存到数据库中,但是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">
to
<input id="about_you_submit" type="submit" onclick="hideyou(event, this);" value="Submit">