Preventing a Contact Page from Reloading After 'Submit' |
Preventing a Contact Page from Reloading After 'Submit' |
chome4 |
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..... |
Christian J |
Aug 29 2019, 11:16 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,660 Joined: 10-August 06 Member No.: 7 |
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. |
CharlesEF |
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.
|
Christian J |
Aug 30 2019, 02:52 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,660 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. |
CharlesEF |
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.
ajax_post.html ( 1.42k ) Number of downloads: 307 ajax_post.php ( 50bytes ) Number of downloads: 298 |
chome4 |
Aug 31 2019, 01:34 AM
Post
#6
|
Newbie Group: Members Posts: 19 Joined: 6-April 16 Member No.: 24,129 |
|
Lo-Fi Version | Time is now: 26th April 2024 - 07:51 PM |