0

I am new to PHP and trying to learn how to set up an option where people can send an emai by clicking on the submit button. But I have checked all the codes several times, but could not figure out what I doing wrong.

The console says:

ajax.js:24 POST http://localhost:8081/send_email.php 405 (Method Not Allowed)

Access denied at syntax: ajax.open("POST", "send_email.php");;`

Files folder structure:

send_email.php
index.html
JS
-ajax.js //

How could I get this little tiny thing running. Need some help from you guys to get this thing running, als0 you see I am almost there.

function _(id) {
    return document.getElementById(id);
}

function submitForm() {
    _("button").disbaled = true;
    _("status").innerHTML = "Please wait...";
    var formdata = new FormData();
    formdata.append( "email", _("email").value );
    formdata.append( "subject", _("subject").value );
    formdata.append( "message", _("message").value );
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "send_email.php"); // parameter: method, url, boolean (optional)
    ajax.onreadystatechange = function() {
        if(ajax.readyState == 4 && ajax.status == 200) {
            if(ajax.responseText == "success") {
                _("contact-form").innerHTML = "<h2>Thanks, your email is sent successfully</h2>!";
            } else {
                _("status").innerHTML = ajax.responseText;
                _("mybtn").disabled = false;
            }
        }
    }
    ajax.send( formdata );
}

Server side code:

<?php
    if ( isset($_POST["email"]) && isset($_POST["subject"]) && isset($_POST["message"]) ) {
        $email = $_POST["email"];
        $subject = $_POST["subject"];
        $message = nl2br($_POST["message"]);
        $to = "you@hotmail.com";
        $from = $email;
        $subject = "Contact From Message";
        $message = "<b>Email Address:</b> ".$email. " <br><b>Subject: </b>  ".$subject." <br><p> ".$message." </p>";
        $headers = "From: $from\n";
        $headers = "MIME-version: 1.0\n";
        $headers = "Content-type: text/html; charset=iso-8859-1\n";
        if ( mail($to, $subject, $message, $headers)) {
            echo "success";
        } else {
            echo "The server failed to send the message. Please try again later.";
        }
    }
?>
<body>
  <form id="contact-form" onsubmit="submitForm(); return false;">
    <label>
      <span class="contact">Your Email</span>
      <input id="email" class="contact_input" type="text" name="email" placeholder="name@hotmail.com">
    </label> 

    <label>
      <span class="contact">Subject</span>
      <input id="subject" class="contact_input contactinfo" type="text" name="message">
    </label>

    <label>
      <span class="contact">Message</span>
      <textarea id="message" class="contact_input contactinfo" type="text"></textarea>
    </label>

    <label>
      <input id="button" type="submit" value="SEND">
      <span id="status"></span>
    </label>
  </form>
</body>

2 Answers2

0

You are currently trying to debug multiple components simultaeneously - which is never a recipe for success. The error message appears to be returned as a HTTP status from the server (did you check the logs to verify?) and it does not appear to have been triggered in your PHP code. I suggest the first thing you should try is:

<pre>
<?php
print_r($_POST);
?>
</pre>
<form method='POST'>
<input type='text' name='sometext' value='hello world'>
<input type='submit' name='submit' value='submit'>
</form>

and see if you get the same error. I suspect this will be the case, implying it's a problem with your server config, a web application firewall config or a PHP auto pre pend (or other PHP code) you've not told us about.

symcbean
  • 47,736
  • 6
  • 59
  • 94
  • I have tried the code and it sends me to a blank page after clicking the submit button. –  Nov 09 '16 at 14:01
  • Did you understand what the code was doing? Did you check your logs? Did you compare the logs with your attempt using AJAX? – symcbean Nov 09 '16 at 16:47
  • Initially, the problem was the wrong url. Should be http://localhost:80/php/send_email.php, because I put the file in a htdocs folder of XAMPP and named it php. Now it reads the PHP-file I think, but now got another issue unfortunately: Warning: mail(): Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in C:\xampp\htdocs\php\send_email.php on line 17 The server failed to send the message. Please try again later. –  Nov 09 '16 at 17:20
0

If you are running two servers, they probably are not running on the same port... You have to change the AJAX url to put the right port.

Right now you are calling for localhost:8081/send_email.php, which is not available through your Node server (and the PHP code would of course not even get evaluated).

Change to URL and include the full URL of the page on your Apache server, with the right port.

nicovank
  • 3,157
  • 1
  • 21
  • 42
  • Have changed it to ajax.open("POST", "localhost:80/send_email.php"); // parameter: method, url, boolean (optional), but get another error: MLHttpRequest cannot load localhost:80/send_email.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. –  Nov 09 '16 at 13:26
  • Yes, that is one problem using two servers. Two solutions: 1. Make your Apache server deliver the HTML and JS, or your Node server do your data treatment (recommend for security) 2. See [this post](http://stackoverflow.com/questions/13388942/allow-cross-domain-ajax-requests) (fine if you're the only one using your app) – nicovank Nov 09 '16 at 14:18