데이터베이스에 양식 제출시 페이지 다시로드 방지

Question

몇 가지 질문을 본 적이 있지만 동일하지는 않습니다. 중복 된 경우 미안합니다. 나는 자바 스크립트 숨기기 및 표시 기능을 사용하여 데이터베이스에 정보를 제출하는 양식을 제출 한 후 "감사합니다"메시지를 숨기려고 시도하지만 잘 작동하지만 페이지 이동을 막을 수 없습니다. 다음 페이지. 항상/about_you로 이동합니다.

양식의 맨 위에 onsubmit = "return false"를 사용하여 시도했지만 양식이 완전히 제출되지 않습니다. 시도했습니다 onclick = "false를 반환합니다." jquery 함수를 구현하는 방법을 잘 모르겠습니다. jquery에 관해서는 무엇이든 많이 알지 못합니다. 답변에 jquery가 관련되어 있으면 가능한 한 자세하게 설명해주십시오.

나는 페이지로드를 나중에 "설문 조사를 완료 해 주셔서 감사합니다."시도하고 있습니다. 그것은 1 페이지 웹 페이지이므로 다른 중복 버전의 웹 페이지로가는 것은 불가능합니다. 어떤 도움이라도 대단히 감사합니다. 고맙습니다.

이것은 자바 스크립트 기능입니다.

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에 저장하지만, 자바 스크립트입니다 : 브라우저 리디렉션 때문에,

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