-2

I am creating a website for a running club I know and it has a contact form on it which currently redirects to a 'thank you' page on success. I'm trying to avoid other pages and redirects so I wanted it to give a success message in a pop up instead.

A friend recommended googling JQuery Post but I couldn't quite understand it so was wondering if anyone on here could maybe give me some aid with it or link me to a tutorial or something?

Thanks in advance

BrTkCa
  • 4,419
  • 3
  • 20
  • 43
DJGB
  • 21
  • 4
  • Your friend gives good advice. How familiar are you with jQuery and AJAX? jQuery just makes common javascript functionality a lot less painful to write. – 2bigpigs Mar 01 '16 at 18:42
  • it redirects because in the form there is an action attribute. you need to change that. – Mox Mar 01 '16 at 18:42
  • There are many, many posts about these things, you should look and read, you do not learn to program in a minute. – Maxi Schvindt Mar 01 '16 at 18:56

2 Answers2

1
<!--Add an ID to your form-->
<form action="something" method="post" id="formId">
    <!--Your form goes here-->
    <input type="submit" value="Submit button"/>
</form>

Now your jQuery/Javascript can look like this!

<script>
    $('#formId').on('submit',function(e){
        e.preventDefault();//this stops your page from default action
        //now serialize form and make $.ajax() request.
        //on response show success but you may now chose not to reload the page
    });
</script>

Here is a link that might help Submitting HTML form using Jquery AJAX

Community
  • 1
  • 1
Anubhab
  • 749
  • 1
  • 9
  • 18
0

How familiar are you with jQuery / Ajax?

What you'd want to do is make jQuery use ajax to submit the form rather than the browser submitting the whole form.

You'll want to do these:

  1. On $.document.ready Use form.submit to register an event handler.
  2. Within the handler, prevent the form from submitting as it usually would using event.preventDefault. This will prevent the redirect. In the case that your code has an error
  3. Serialize the form data using serialize
  4. Do an asynchronous post query using $.post. Make sure you provide an failure and success handler.

There are enough code examples in the links + I believe in reading the documentation so you know what your code is doing.

I think the preventDefault call should be at the end. In the case that your code has an error, the form will fall back on the default submit method ( the one with the redirect you want to avoid. But atleast it'll keep working )

2bigpigs
  • 407
  • 3
  • 12
  • I am not familiar at all with either of them. This is the most complex website I've attempted before so I'm essentially trying to learn it all and create something functional for them. Thank you for the advice though, I will look through the links and see what I can figure out from it. Much appreciated – DJGB Mar 01 '16 at 19:09