After submitting 'Contact' message, how do I get it to stay on page and generate a text confirmation?

AssaultCactus

I've seen this question asked on Stack Overflow before, but haven't been able to get the previous solutions to work, for my site!

I have a 'Contact' page on a website (staging.twotailsmedia.com). And right now, the Contact page works and sends an email to the right place, but it generates a 'Thank you!' message on a new, separate, unformatted page. Not what I want. I want it to stay on the Contact page, generate the 'Thank you!' confirmation on the form next to the submit button.

Here's my Form's HTML from the index.html file:

<form method="POST" action="mail.php">

   <div class="field half first">
      <label for="name">Name</label>
      <input type="text" name="name" id="name" />
   </div>

<div class="field half">
   <label for="email">Email</label>
   <input type="text" name="email" id="email" />
</div>

<div class="field">
   <label for="message">Message</label>
   <textarea name="message" id="message" rows="4"></textarea>
</div>

<ul class="actions">
   <li><input type="submit" value="Send Message" class="special" /></li>
   <li><input type="reset" value="Reset" /></li>
</ul>

</form>

Here's the PHP from the mail.php file:

<?php

        $name = $_POST['name'];

        $email = $_POST['email'];

        $message = $_POST['message'];

        $formcontent="From: $name \n Message: $message";

        $recipient = "[email protected]";

        $subject = "A message from the Two Tails MEdia website!";

        $mailheader = "From: $email \r\n";

        mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

        echo "Thank You! We'll get back to you.";
}
?>

Usually I'd just get a Contact Form plugin from Wordpress but I'm trying to do a non-WP page so I can get a deeper understanding of the web development process.

Ferhado

Use Ajax to submit your form and by success show your message. Try this code:

$('form').submit(function(e){
   e.preventDefault();
   $.ajax({
     type:'post',
     url:'mail.php',
     data:$(this).serialize(),
     success:function(){
         $('form')[0].reset(); // to reset the form
         $('#contact').hide(); // to hide the Contact article
         $('#message').show(); // to show the hidden message
     }
   })
})

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to get the sucess message in the same page after submitting the contact form?

How do I generate a temporary page like confirmation page in rails?

How to get the success message in the same page after submitting the form?

How do I get errors which are handled serverside in a ajax error message after submitting a form?

How to stay at the same page after submitting post request with Express?

How to redirect confirmation page after submitting form in Laravel?

How do I make a div element stay on a same position as before after page reload?

How do I keep single checkbox stay checked after refreshing the page?

Why I get message "The password and confirmation password do not match"?

How do I scrape data from a web page that refreshes after submitting data via selenium and python?

How can i get data or pass a data from one page to another after submitting a form in reactjs

How do i get this ios button to stay visible in the feed view after pushing to another view?

How do I align Input HTML tag and Text Area in HTML and CSS (Styling a contact page)

How do I get the value of a select item from a page without submitting in Apex 5?

How do you get the footer to stay at the bottom of a Web page?

Redirect to a new page after submitting Bootstrap contact modal

How do you get text to stay when changing scenes

How to get rid of HTML tags after submitting TinyMCE text in react

How do I make this div to stay in a position after it has moved?

How do I make a button stay "Pressed" after clicking

how to reload the page after call handleDelete but it stays on the current page,not reload to the homepage, i want stay on the current page

Spring - how do I get the page to refresh after a form is submitted?

How do I get text that appear on page from div?

Form not submitting after bootstrap confirmation

How do I get WPF Window to stay on top of another?

How do I get the Floating button to stay at bottom of the layout?

How do i get the footer to stay at the bottom with flexbox

How do I get a Bootstrap container to stay inline with another div?

How do I redirect users after successfully submitting form data?

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive