OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

I don't want my email form to redirect to my php file

  • Thread starter Thread starter Express
  • Start date Start date
E

Express

Guest
I created an email form on my website to collect emails using javascript and php. Initially, I attempted to prevent it from redirecting me to www.mywebsite.com/send_email.php by using fetch, but it still redirected me to another page that displayed the message 'Message Sent! Thank you!'. Eventually, I managed to resolve the issue by embedding the script within the html file. However, I'm curious to know if there is a way to achieve the same outcome of loading on the same home page while keeping the javascript code in a separate js file linked to the html file.

Code:
const form = document.getElementById('myForm');
const messageDiv = document.getElementsByName('message');
const errorMessageDiv = document.getElementById('error-message');
      
form.addEventListener('submit', (event) => {
        event.preventDefault(); 
      
        const formData = new FormData(form);
      
        fetch('send_email.php', {
          method: 'POST',
          body: formData
        })
        .then(response => {
          if (response.ok) {
            return response.text(); 
          } else {
            throw new Error('Error sending email.'); 
          }
        })
        .then(message => {
          messageDiv.textContent = message;
          messageDiv.style.display = 'block'; 
          form.reset(); 
        })
        .catch(error => {
          errorMessageDiv.textContent = 'Message Sent! Thank you!';
          errorMessageDiv.style.display = 'block'; 
        });
      });

send_email.php

Code:
<?php
$to = '[email protected]';
$from = $_POST['email'];
$name = $_POST['username'];
$subject = $_POST['subject'];
$message = $_POST['message'];

$headers = "From: $from \r\n";
$headers .= "Reply-To: $from \r\n";

$body = "Name: $name\n";
$body .= "Email: $from\n";
$body .= "Subjectt: $subject\n";
$body .= "Message:\n$message";

if (mail($to, 'New Message from Your Website', $body, $headers)) {
  echo "Message sent successfully!"; // Success message
} else {
  echo "An error occurred while sending the email."; // Error message
}

echo json_encode($response);
?>

I tried to use fetch with the index.html but it still gives me the same result.

<p>I created an email form on my website to collect emails using javascript and php. Initially, I attempted to prevent it from redirecting me to <a href="http://www.mywebsite.com/send_email.php" rel="nofollow noreferrer">www.mywebsite.com/send_email.php</a> by using fetch, but it still redirected me to another page that displayed the message 'Message Sent! Thank you!'. Eventually, I managed to resolve the issue by embedding the script within the html file. However, I'm curious to know if there is a way to achieve the same outcome of loading on the same home page while keeping the javascript code in a separate js file linked to the html file.</p>
<pre><code>const form = document.getElementById('myForm');
const messageDiv = document.getElementsByName('message');
const errorMessageDiv = document.getElementById('error-message');

form.addEventListener('submit', (event) => {
event.preventDefault();

const formData = new FormData(form);

fetch('send_email.php', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
return response.text();
} else {
throw new Error('Error sending email.');
}
})
.then(message => {
messageDiv.textContent = message;
messageDiv.style.display = 'block';
form.reset();
})
.catch(error => {
errorMessageDiv.textContent = 'Message Sent! Thank you!';
errorMessageDiv.style.display = 'block';
});
});
</code></pre>
<p>send_email.php</p>
<pre><code><?php
$to = '[email protected]';
$from = $_POST['email'];
$name = $_POST['username'];
$subject = $_POST['subject'];
$message = $_POST['message'];

$headers = "From: $from \r\n";
$headers .= "Reply-To: $from \r\n";

$body = "Name: $name\n";
$body .= "Email: $from\n";
$body .= "Subjectt: $subject\n";
$body .= "Message:\n$message";

if (mail($to, 'New Message from Your Website', $body, $headers)) {
echo "Message sent successfully!"; // Success message
} else {
echo "An error occurred while sending the email."; // Error message
}

echo json_encode($response);
?>
</code></pre>
<p>I tried to use fetch with the index.html but it still gives me the same result.</p>
 
Top