Get the result from the PHP page

Question

I created a contact page.
When I click on the submit button, this form sends my form information to the server-side file (PHP), but the submit button does nothing.

I do not get an answer in the AJAX!

<script type="text/javascript">
$(document).ready(function() {
  $('#submit').click(function() {
    $('#submit').attr('value', 'Please wait...');
    $.post("sender.php", $("#contactform").serialize(), function(response) {
      $('#success').html(response);
      $('#submit').attr('value', 'SEND');
    });
    return false;
  });
});
</script>

<!doctype html>
<html>
<head>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
  <meta charset="utf-8">
  <title>My Contact  form</title>
</head>

<body>
<section id="contact">
  <div class="container prop">
    <!--    <div class="well well-sm">
      <h3><strong>Contact  us Pars Coders  </strong></h3>
    </div>-->

    <div class="row" id="p">
      <div class="col-md-7">
        <img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
      </div>
      <div class="col-md-5">
        <h4><strong>Tmas Ba ma  </strong></h4>
        <form id="#contactform">
          <div class="form-group">
            <input type="text" class="form-control" name="name" value="" placeholder="Name">
          </div>
          <div class="form-group">
            <input type="email" class="form-control" name="email" value="" placeholder="E-mail">
          </div>
          <div class="form-group">
            <textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
          </div>
          <button class="btn btn-success" type="submit" name="button" id="submit">
            <i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
          </button>
          <div id="success" style="color: red;">؟</div>
        </form>
      </div>
    </div>
  </div>
</section>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

</body>
</html>

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['description'];
$to = 's3dhossein@gmail.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: s3dhossein@gmail.com' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
  mail($to, $subject, $message, $headers); //This method sends the mail.
  echo "Your email was sent!"; // success message
}else{     echo "Invalid Email, please provide an correct email.";

}
?>

Where do you think the problem is?

Can an error come from AJAX?

For one; `
` contains a syntax error/typo. Remove the `#` from there. If this is all that's wrong here, is off-topic as a typographical error. — Funk Forty Niner, Jul 22 '18 at 20:12
Since you want to use Ajax, use a `type="button"` to trigger the data send **OR** use [`.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault). Your issue is the page is reloading... — Louys Patrice Bessette, Jul 22 '18 at 22:13
It's hard to trigger down where an error can happen. Please try to return only the values you have post to the php-script and skip the mail part? — piwo1984, Jul 22 '18 at 20:39

PajuranCodes · Answer 1 · 2018-07-22T22:57:12.547

Found problems:

1) An error is raised: Error: Bootstrap's JavaScript requires jQuery. It means that the bootstrap's js file must be loaded after the jQuery's js file. So invert their positions:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

2) An error is raised: ReferenceError: $ is not defined for the line $(document).ready(function () {. This means that the jquery is not recognized inside your script. So bring all the js imports in the page head. The times for the js imports at the bottom of the page are long gone.

3) The form tag must be <form id="contactform">, not <form id="#contactform">.

4) If you are submitting through an ajax request, then you must use a button of type "button", not of type "submit". Then you can remove the return false; from the $('#submit').click(function (){...} function too.

Suggestions:

Define an "error" callback for the ajax request.
Define the meta tags as the first ones in the head tags.

Working code:

<!doctype html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>My Contact  form</title>

        <!-- CSS resources -->
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >

        <!-- JS resources -->
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#submit').click(function () {
                    $('#submit').attr('value', 'Please wait...');

                    $.post("sender.php", $("#contactform").serialize(), function (response) {
                        $('#success').html(response);
                        $('#submit').attr('value', 'SEND');
                    });
                });
            });
        </script>
    </head>
    <body>

        <section id="contact">
            <div class="container prop">
                <!--    <div class="well well-sm">
                  <h3><strong>Contact  us Pars Coders  </strong></h3>
                </div>-->

                <div class="row" id="p">
                    <div class="col-md-7">
                        <img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
                    </div>
                    <div class="col-md-5">
                        <h4><strong>Tmas Ba ma  </strong></h4>
                        <form id="contactform">
                            <div class="form-group">
                                <input type="text" class="form-control" name="name" value="" placeholder="Name">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" name="email" value="" placeholder="E-mail">
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
                            </div>
                            <button class="btn btn-success" type="button" name="button" id="submit">
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
                            </button>
                            <div id="success" style="color: red;">؟</div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

    </body>
</html>

Get the result from the PHP page

1 Answers1