g0dtier Posted February 27, 2020 Share Posted February 27, 2020 (edited) Hi guys I'm seriously stressing hard about this. I seem to have written everything properly but my contact form just won't send an e-mail and update the status on my webpage. I fill out the details on my contact form and my status text stays on "Email is sending...". I'd REALLY REALLY appreciate any help you could toss my way. Thanks a ton! sendmail.php <?php $name = @trim(stripslashes($_POST['name'])); $from = @trim(stripslashes($_POST['email'])); $subject = @trim(stripslashes($_POST['subject'])); $message = @trim(stripslashes($_POST['message'])); $to = 'myemail@gmail.com';//replace with your email $headers = array(); $headers[] = "MIME-Version: 1.0"; $headers[] = "Content-type: text/plain; charset=iso-8859-1"; $headers[] = "From: {$name} <{$from}>"; $headers[] = "Reply-To: <{$from}>"; $headers[] = "Subject: {$subject}"; $headers[] = "X-Mailer: PHP/".phpversion(); mail($to, $subject, $message, $headers); die(); ?> main.js //Contact Form var form = $('#contact-form'); form.submit(function(event){ event.preventDefault(); var form_status = $('.form-status'); $.ajax({ url: $(this).attr('action'), beforeSend: function(){ form_status.find('.form-status-content').html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn(); } }).done(function(data){ form_status.find('.form-status-content').html('<p class="text-success">Thank you for contact us. As early as possible we will contact you</p>').delay(3000).fadeOut(); }); }); contact.html <form class="form-horizontal" id="contact-form" role="form"> <div class="form-group form-status"> <div class="col-sm-offset-2 col-sm-6"> <div class="form-status-content"> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <input type="text" name="name" class="form-control input-lg" placeholder="Name" required="required"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <input type="email" name="email" class="form-control input-lg" placeholder="Email" required="required"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <input type="text" name="subject" class="form-control input-lg" placeholder="Subject" required="required"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-8"> <textarea name="message" rows="6" class="form-control input-lg" placeholder="Message" required="required"> </textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-8"> <button type="submit" class="btn btn-lg btn-transparent">Submit</button> </div> </div> </form> Edited February 27, 2020 by g0dtier Quote Link to comment Share on other sites More sharing options...
chhorn Posted February 27, 2020 Share Posted February 27, 2020 you could have a look at what the server gives you back for that ajax request with console.log(data); Quote Link to comment Share on other sites More sharing options...
g0dtier Posted February 27, 2020 Author Share Posted February 27, 2020 Sorry, I'm fairly new to all this. Would you mind helping me with where I'd put that line of code? Thanks and sorry for being a noob Quote Link to comment Share on other sites More sharing options...
chhorn Posted February 27, 2020 Share Posted February 27, 2020 so if you want to look at some variable, you have to find it first. the variable is "data", and i only see the code you posted, so you hit ctrl+f on this page and type in "data" without the quotes, the only place you find this combination of charaters is within this code }).done(function(data){ form_status.find('.form-status-content').html('<p class="text-success">Thank you for contact us. As early as possible we will contact you</p>').delay(3000).fadeOut(); }); and the variable is provided as a parameter into a function. so you go into this function and place the code i posted there. and hit F12 in your browser, go to console, befor making that request. Quote Link to comment Share on other sites More sharing options...
g0dtier Posted February 27, 2020 Author Share Posted February 27, 2020 (edited) Okay now I see "Thank you for contact us. As early as possible we will contact you" on my website itself so the data is working but I just don't see any new e-mails. Edit: After adding console.log(data); nothing is shown before making the request. After clicking submit the console simply shows my HTML source code to my whole website. I don't see any errors. Edit2: My website is http://spanishwithjosh.com and navigate to the Contact page. Edited February 27, 2020 by g0dtier Quote Link to comment Share on other sites More sharing options...
kicken Posted February 27, 2020 Share Posted February 27, 2020 Your not sending any of the form data in your ajax request. All your doing is making a request for the home page. You'll can use the $.post method rather than $.ajax and send your form data along as the request body. Something like: var form = $('#contact-form'); form.submit(function(event){ event.preventDefault(); var form_status = $('.form-status').find('.form-status-content'); form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn(); $.post(form.attr('action'), { name: form.find('[name="name"]').val(), email: form.find('[name="email"]').val(), subject: form.find('[name="subject"]').val(), message: form.find('[name="message"]').val() }).then(function(){ form_status.html('<p class="text-success">Thank you for contact us. As early as possible we will contact you</p>').delay(3000).fadeOut(); }); }); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.