The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
Christian J
post Aug 29 2019, 11:16 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(chome4 @ Aug 29 2019, 04:20 PM) *

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

That's the normal behavior of an HTML form: when it's submitted, a new page (with the URL of the form's ACTION attribute is loaded. There are a couple of ways to avoid this. Either submit the form to a page in an iframe, something like this:

CODE
<form action="foo.php" target="foo">
...
</form>

<iframe name="foo"></iframe>

Or you might use Ajax (a kind of javascript) to submit the form. If so the javascript must stop the HTML form itself from submitting (so you won't get a double submission), or you could simply remove the form's start and end tags, since they're not needed anyway.

Disadvantages with Ajax forms include increased complexity and javascript-dependency.

QUOTE
The closest I've come to seeing any relevant help involves an sql database

That's something completely different.

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

More specifically it looks like jQuery (a kind of javascript library). I suppose you can place it anywhere after the first SCRIPT element that loads the jQuery library file. Alas I don't do jQuery myself, so I can't say if the syntax is correct.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 30 2019, 01:50 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



What if the page did reload but then scrolled to the contact form? Of course, this depends on the window size.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 30 2019, 02:52 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Another idea might be to just submit the form to a URL with an anchor, like this:

CODE
<form id="foo" action="index.php#foo">

Then the page will reload, but scroll down to where the ID is. No javascript is needed.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 30 2019, 04:45 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Attached are sample ajax files I helped someone else with. I don't do jQuery (I don't do anything Google), this is pure javascript. Post back if you need any help.
Attached File  ajax_post.html ( 1.42k ) Number of downloads: 302
Attached File  ajax_post.php ( 50bytes ) Number of downloads: 296
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chome4
post Aug 31 2019, 01:34 AM
Post #6


Newbie
*

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



QUOTE(Christian J @ Aug 30 2019, 02:52 AM) *

Another idea might be to just submit the form to a URL with an anchor, like this:

CODE
<form id="foo" action="index.php#foo">

Then the page will reload, but scroll down to where the ID is. No javascript is needed.


That worked!

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

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 March 2024 - 02:35 PM