Question

我看到过一些类似于我的问题，但不完全相同，所以如果这是重复的，抱歉。我正在使用javascript隐藏和显示功能来尝试隐藏＆＃34;谢谢你＆＃34;提交表单之后的消息，它将信息提交到数据库，并且工作正常，但我无法阻止页面转到下一页。它总是到/ about_you。

我尝试过使用onsubmit =＆＃34; return false＆＃34;在表单的顶部，它完全阻止表单提交。尝试过onclick =＆＃34;返回false。＆＃34;我不太确定如何实现jquery函数。对jquery一无所知，所以如果答案涉及jquery，请尽可能详细地告诉我。

我只是试图让页面加载＆＃34;感谢您完成调查＆＃34;然后。这是一个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}')")

Answer 1

我认为您尝试在没有页面刷新的情况下提交表单。现在您可以提交表单，将数据发送并保存到数据库中，但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">

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

1 个答案: