locked
JQuery Send e-mail problem RRS feed

  • Question

  • User-1104215994 posted

    Hello guys,

    I have a web site. In this web site I have a contacts page which has name,e-mail, phone and question input texts. It supposed to check for required fields and if they are filled, user can submit an e-mail. But it neither checks required fields nor sends e-mail. Just postbacks to the home page. How can I fix this?

    Here is the html markup of contacts submit portion:

     <div class="contactForm">
                            <!-- Start Contact Form -->
                            <form id="contactForm" action="#" method="post" role="form">
    
                                <div class="col-lg-6 col-xs-12">
                                    <div class="form-group">
                                        <input id="formName" type="text" class="input required" name="name" placeholder="Adınız" lang="tr">
                                    </div>
                                    <div class="form-group">
                                        <input id="formEmail" type="email" class="input required" name="email" placeholder="E-posta adresiniz" lang="tr">
                                    </div>
                                    <div class="form-group">
                                        <input id="phone" type="text" placeholder="Telefon numaranız" value="" size="30" name="phone" lang="tr">
                                    </div>
                                </div>
    
                                <div class="col-lg-6 col-xs-12">
                                    <div class="form-group">
                                        <textarea id="message" class="textarea required" name="message" rows="3" cols="40" placeholder="Sorunuz" lang="tr"></textarea>
                                    </div>
                                    <button value="Submit" id="submit" class="btn btn-green-border btn-lg" type="submit" lang="tr">GÖNDER</button>
                                </div>
    
                            </form>
                            <div class="successMsg"></div>
                            <!-- End Contact Form -->
                        </div>

    And here is the portion of related js file which supposed to chech required fields etc.

    $(document).ready(function() {
      "use strict";
      $("#contactForm .error").remove();
      var e = $("#contactForm");
      var t = $("#contactForm_submit");
      var n = $(".successMsg");
      e.on("submit", function(r) {
        var i = false;
        $(".required").each(function() {
          if(jQuery.trim($(this).val()) === "") {
            $(this).parent().append('<span class="error"><i class="fa fa-exclamation-triangle"></i></span>');
            i = true
          } else if($(this).hasClass("email")) {
            var e = /^([\w-\.]+@([\w]+\.)+[\w]{2,4})?$/;
            if(!e.test(jQuery.trim($(this).val()))) {
              $(this).parent().append('<span class="error"><i class="fa fa-exclamation-triangle"></i></span>');
              i = true
            }
          }
        });
        if(!i) {
          r.preventDefault();
          $.ajax({
            url: "js/inc/sendemail.php",
            type: "POST",
            dataType: "html",
            data: e.serialize(),
            beforeSend: function() {
              n.fadeOut();
              t.html("Sending....")
            },
            success: function(t) {
              e.fadeOut(300);
              n.html(t).fadeIn(1e3);
              setTimeout(function() {
                n.html(t).fadeOut(300);
                $("#formName, #formEmail,#phone, #message").val("");
                e.fadeIn(1800)
              }, 4e3)
            },
            error: function(e) {
              console.log(e)
            }
          });
          $(".required").val("")
        }
        return false
      });
      $("#contactForm input").focus(function() {
        $("#contactForm .error").remove()
      });
      $("#contactForm textarea").focus(function() {
        $("#contactForm .error").remove()
      })
    })

    And here is the send email php:

    <?php
    
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $name = strtolower($name);
    $name = ucwords($name);
    
    $to = 'test@gmail.com';
    $subject = 'Website message from: '.$name;
    $message = 'FROM: '.$name." \nEmail: ".$email."\nMessage: \n".$message;
    $headers = 'From: email@example.com' . "\r\n";
    
    if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
    mail($to, $subject, $message, $headers);
    echo "Thank you! Your email was sent $name.";
    echo "<br>";
    echo "This is the email you entered: <b>$email</b>";
    }else{
    // echo var_dump($_POST);
    echo "<b>ERROR!</b> Invalid E-mail. Please provide a valid email address. Example: myEmail@example.com";
    echo "<br>";
    echo "The email <b>$email</b> you entered, is not valid.";
    }
    
    ?>

    How can I make it work? here is the demo page www.ioterm.com

    Thanks in advance & Best Regards.

    Wednesday, November 25, 2015 1:39 PM

Answers

  • User61956409 posted

    Hi cenk1536,

    According to your code, you just append “<span class="error"><i class="fa fa-exclamation-triangle"></i></span>” to your html, but it does not have any text, so you could not see any error message in your browser. Besides, you could use F12 developer tools to debug your javascript code to find and fix the problem.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 26, 2015 3:09 AM
  • User-1104215994 posted

    Hello Fei Han,

    Thanks for your reply. Actually there was this below js file missing. Now I have required fields validation.

    <script type="text/javascript" src="js/jquery.kenburnsy.min.js"></script>
    

    But I have another question. In my demo web site I got this page as a base. (http://statfa.net/twist/star-particle/) And in the contacts page of the site have the same e-mail form. When I enter an e-mail address without "@"  and submit the form, it gives an error message warning to enter "@". I wonder where does this warning message comes from? I got this message in Turkish, is it due to my local settings? Can I change this warning message language according to language selection in my sample demo web site?

    Thanks in advance & Best Regards.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 26, 2015 3:35 PM
  • User61956409 posted

    Hi cenk1536,

    (http://statfa.net/twist/star-particle/) And in the contacts page of the site have the same e-mail form. When I enter an e-mail address without "@"  and submit the form, it gives an error message warning to enter "@". I wonder where does this warning message comes from?

    We are not the developer of this web site, so we could not  know how do the developers implement it. In my opinion, the developers may use some jQuery validation plugins or create custom javascript function to check user inputs.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 27, 2015 8:39 AM

All replies

  • User61956409 posted

    Hi cenk1536,

    According to your code, you just append “<span class="error"><i class="fa fa-exclamation-triangle"></i></span>” to your html, but it does not have any text, so you could not see any error message in your browser. Besides, you could use F12 developer tools to debug your javascript code to find and fix the problem.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 26, 2015 3:09 AM
  • User-1104215994 posted

    Hello Fei Han,

    Thanks for your reply. Actually there was this below js file missing. Now I have required fields validation.

    <script type="text/javascript" src="js/jquery.kenburnsy.min.js"></script>
    

    But I have another question. In my demo web site I got this page as a base. (http://statfa.net/twist/star-particle/) And in the contacts page of the site have the same e-mail form. When I enter an e-mail address without "@"  and submit the form, it gives an error message warning to enter "@". I wonder where does this warning message comes from? I got this message in Turkish, is it due to my local settings? Can I change this warning message language according to language selection in my sample demo web site?

    Thanks in advance & Best Regards.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 26, 2015 3:35 PM
  • User61956409 posted

    Hi cenk1536,

    (http://statfa.net/twist/star-particle/) And in the contacts page of the site have the same e-mail form. When I enter an e-mail address without "@"  and submit the form, it gives an error message warning to enter "@". I wonder where does this warning message comes from?

    We are not the developer of this web site, so we could not  know how do the developers implement it. In my opinion, the developers may use some jQuery validation plugins or create custom javascript function to check user inputs.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 27, 2015 8:39 AM