The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Preventing a Contact Page from Reloading After 'Submit'
chome4
post Aug 29 2019, 09:20 AM
Post #1


Newbie
*

Group: Members
Posts: 19
Joined: 6-April 16
Member No.: 24,129



At the bottom of this page,

http://test.ericfinlayartist.co.uk/index.php

There's a contact area, which fully works, (thanks to help from 'CharlesEF').

The only thing is, if you click on 'Submit', the page reloads and scrolls back to the top, preventing you from seeing any confirmation or otherwise.

The closest I've come to seeing any relevant help involves an sql database, which throws me even more as I don't need a database!!!

The [working] form page code:

CODE
<form action="index.php" method="POST" id="myform">
             <input name="email" type="email" placeholder="Email..." value="<?php if(isset($_POST["email"])) echo($_POST["email"]);?>"><br>
             <span style="background: yellow; color: red;"><?php if(isset($errors["email"])) echo($errors["email"]);?></span><br>
             <textarea placeholder="Message..." name="message" value="<?php if(isset($_POST["message"])) echo($_POST["message"]);?>"></textarea><br>
             <span style="background: yellow; color: red;"><?php if(isset($errors["message"])) echo($errors["message"]);?></span><br>

             <input type="submit" name="submit" value="Send" class="sub-btn">
</form>


and the javascript code, which I've placed just below where all the '<script>' tags are:

CODE
<script type="text/javascript">
          $(document).on('submit', '#myForm', function(e) {

            $.ajax({
            url: 'index.php',
            type: 'post',
            data: $(this).serialize(),
            success: function(html) {

            alert('Form submitted');

          $('#myForm').hide();
             }
             });
            e.preventDefault();
          });
</script>


The php code that sends the mail is contained in a separate file, which is 'included' at the tope of the index.php file.

Firstly, is the placing of the javascript code in the correct position?

I've placed it also just above the <form> and just below the <form> tags. But if the code is incorrect I guess it doesn't matter!

Apart from very basic javascript/jquery, I'm not conversant with javascript/ajax.

Can someone shed some light as to how things should work?

Thanks.....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th April 2024 - 12:50 PM