CODEWITHSUNDEEP
javascriptjqueryhtmlrubyforms
Mike
Mike

Reputation: 328

Preventing page reload upon form submission to database

I have seen some questions similar to mine but not quite the same, so if this is a duplicate, sorry. I am using the javascript hide and show functions to attempt to hide the "thank you" message after they submit the form, which submits the information to a database, and that works fine, but I have been unable to prevent the page from going to the next page. It always goes to /about_you.

I have tried using onsubmit = "return false" at the top of the form, and it completely prevents the form from submitting. Have tried onclick="return false." I am not quite sure how to implement an jquery function. Don't know much of anything at all about jquery, so if the answer involves jquery, please give me as much detail as you can.

I am just attempting to make the page load a "thank you for completing the survey" afterwards. It is a 1-page webpage, so going to another duplicate version of the webpage isn't viable. Any help is extremely appreciated. Thank you.

this is the javascript function.

function hideyou(){
    document.getElementById("about_you_form").style.display = "none";
    document.getElementById("thank_you").style.dislay = "block";
}

this is the submit

<input id="about_you_submit" type="submit" onclick="hideyou();" value="Submit">

this is the code i put in 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}')")

Upvotes: 1

Views: 85

Answers (1)

linderman
linderman

Reputation: 158

I think you are trying to submit form without page refresh. Now you can submit the form, the data is send and saved into DB, but javascript:

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

unable to execute and do its work , because browser is redirected (you are making request to /about_you). What you need to do is simple AJAX request (sending data in the background, browser stays in the same page and after successful sending and response from the server - javascript kicks in)

Change your hideyou function as:

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";
    }
  });

}

Then change 

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

Upvotes: 2

Related Questions