0

I have an HTML page with a form that posts to a sendmail.php file but when I click submit I get sent to the blank php page with the words "Email sent!".

I would like to click Submit and then instead of going into a separate page, it stays on the same page and the submit button changes color and reads "Message Sent". How do I do this?

HTML Code:

<form action="sendmail.php" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="action" value="submit">
  <div class="row half">
    <div class="6u">
      <input type="text" name="name" placeholder="Name" />
    </div>
    <div class="6u">
      <input type="text" name="number" placeholder="Number" />
    </div>
  </div>
  <div class="row half">
    <div class="12u">
      <textarea name="message" placeholder="Message" rows="6"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="12u">
      <ul class="actions">
        <li>
          <input type="submit" value="Send Message" />
        </li>
      </ul>
    </div>
  </div>
</form>

PHP Code:

<?php
    { 
    $name=$_REQUEST['name']; 
    $number=$_REQUEST['number']; 
    $message=$_REQUEST['message']; 
 $headers = "From: $name<form@site.com>\r\n";
 $headers .= "MIME-Version: 1.0\r\n";
 $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    if (($name=="")||($number=="")||($message=="")) 
        { 
        echo "All fields are required, please fill <a href=\"\">the form</a> again."; 
        } 
    else{
        $subject="Website Contact Form"; 
        mail("me@gmail.com", $subject, "<font size='+1'>Hello, this is a message from your website's contact form.<br><br>This message was sent by <b>".$name.".</b><br>The phone number they provided was <b>".$number.".</b><br><br>Their message is as follows:<br><b>".$message."</b></font>", $headers); 
        echo "Email sent!"; 
        } 
    }   
?>

Thanks for the help!

Kyle
  • 51
  • 3
  • 1
    use ajax for this.ajax works on background so you dont need to change page check here http://api.jquery.com/jquery.ajax/ – guradio Oct 06 '15 at 03:34
  • 1
    you dont need either of those - simply put all the code on one page - submit to self –  Oct 06 '15 at 03:37

8 Answers8

1

get jquery library in your head section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

then you want to write ajax method

sample:

$(document).ready(function(){
    $('form').submit(function(e){
      var arr;
      e.preventDefault();
      $.ajax({
        type: 'POST',
        url: "sendmail.php",
        //this specifies the data to be sent to server through php you should modify accordingly
        data:{name:$('input[name="name"]').val()},
        async:true,
        success: function(result){
        //do something with the result if request is successful
        }
      });
    });
});
夢のの夢
  • 5,054
  • 7
  • 33
  • 63
1

Change action in form tag.

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="action" value="submit">
  <div class="row half">
    <div class="6u">
      <input type="text" name="name" placeholder="Name" />
    </div>
    <div class="6u">
      <input type="text" name="number" placeholder="Number" />
    </div>
  </div>
  <div class="row half">
    <div class="12u">
      <textarea name="message" placeholder="Message" rows="6"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="12u">
      <ul class="actions">
        <li>
          <input type="submit" value="Send Message" />
        </li>
      </ul>
    </div>
  </div>
</form>

<?php
if(isset($_REQUEST['name']) && ($_REQUEST['name']!="")|| isset($_REQUEST['number']) && ($_REQUEST['number']!="")|| isset($_REQUEST['message']) && ($_REQUEST['message']!=""))
{
    $name=$_REQUEST['name']; 
    $number=$_REQUEST['number']; 
    $message=$_REQUEST['message']; 
    $headers = "From: $name<form@site.com>\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

    if (($name=="")||($number=="")||($message=="")) 
        { 
        echo "All fields are required, please fill <a href=\"\">the form</a> again."; 
        } 
    else{
        $subject="Website Contact Form"; 
        mail("me@gmail.com", $subject, "<font size='+1'>Hello, this is a message from your website's contact form.<br><br>This message was sent by <b>".$name.".</b><br>The phone number they provided was <b>".$number.".</b><br><br>Their message is as follows:<br><b>".$message."</b></font>", $headers); 
        echo "Email sent!"; 
        } 
       }
       else{
        print_r(22);exit;
       }
?>
Patel Kishan
  • 65
  • 4
0

so what you need is jquery.form, it can help you submit the form by ajax.

Damon Ding
  • 1
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Bruce Oct 06 '15 at 03:58
0

You can use JQuery for this purpose.

<form id="noRedirection" enctype="multipart/form-data" method="POST">
<div class="row half">
<div class="6u">
  <input type="text" name="name" placeholder="Name" />
</div>
<div class="6u">
  <input type="text" name="number" placeholder="Number" />
</div>
</div>
<div class="row half">
<div class="12u">
  <textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
  <ul class="actions">
    <li>
      <input id="submit" type="submit" value="Send Message" />
    </li>
  </ul>
</div>
</div>
</form>

<script>
$('#noRedirection').submit(function() {
var post_data = $('#noRedirection').serialize();
$.post('sendMail.php', post_data, function(data) {
$("#submit").text('Message Sent').css("color","red");
});
  });
</script>
Anurag Verma
  • 485
  • 2
  • 12
0

All you need to learn is how to make ajax calls. Refer this link from stackoverflow itself . Here you can see how all variables and of data regarding mail is sent through ajax call to another page for mailing. Click Here

Community
  • 1
  • 1
Amar Singh
  • 5,464
  • 2
  • 26
  • 55
0

I hope this will help you. you no need to give an action. see my example it will stay same page but request will go another page. just copy and paste this code and don't run on localhost because email is not send on localhost:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
 $(function () {
  $('form').on('submit', function (e) {
  e.preventDefault();
  $.ajax({
    type: 'post',
    url: 'sendmail.php',
    data: $('form').serialize(),
    success: function (d) {
     alert(d);
    }
   });
  });
 });
</script>
<form action="" method="POST" enctype="multipart/form-data">
 <input type="hidden" name="action" value="submit">
 <div class="row half">
  <div class="6u">
   <input type="text" name="name" placeholder="Name" />
  </div>
  <div class="6u">
   <input type="text" name="email" placeholder="Email" />
  </div>
  <div class="6u">
   <input type="text" name="number" placeholder="Number" />
  </div>
 </div>
 <div class="row half">
  <div class="12u">
   <textarea name="message" placeholder="Message" rows="6"></textarea>
  </div>
 </div>
 <div class="row">
  <div class="12u">
   <ul class="actions">
    <li>
     <input type="submit" name="send" value="Send Message" />
    </li>
   </ul>
  </div>
 </div>
</form>

make new page of sendmail.php and paste this code in that file:

echo $name = $_POST['name'];
echo $number = $_POST['number'];
echo $email = $_POST['email'];
echo $message = $_POST['message'];
$headers = "From: $name<form@site.com>\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
if (($name=="")||($number=="")||($message=="") || ($email=="")) { 

    echo "All fields are required, please fill again."; 
} else {

    $subject="Website Contact Form"; 
    mail($email, $subject, "<font size='+1'>Hello, this is a message from your website's contact form.<br><br>This message was sent by <b>".$name.".</b><br>The phone number they provided was <b>".$number.".</b><br><br>Their message is as follows:<br><b>".$message."</b></font>", $headers); 
    echo "Email sent!"; 
}
Manisha Chaudhary
  • 84
  • 2
  • 10
0
<form action="sendmail.php" method="POST" enctype="multipart/form-data">    
<input type="hidden" name="action" value="submit">

You're already using php, so there's no reason at all to use jquery as well, just take the code from your sendmail.php file and put it in the top of this. Using javascript for core page functionality used to be considered bad practice, it's certainly annoying to users with javascript blockers running, makes the pages very hard to use, stackoverflow does that too.

Rather than submit to the other file, just delete the 'action="sendmail.php"' which will then make the page submit to itself, or put in the actual url of the page if it's got a static url that you know. Or use: 

action="<?php echo $_SERVER['REQUEST_URI'];?>"

which sets it to whatever the uri of the page is, that's useful for things that generate the pages from query string data.

Then you check to see the following (how did stackoverflow get so popular without having good code blocks?)

if ( isset($_POST['action']) ) {
  set color to red or whatever...

and that's all.

Lizardx
  • 1,165
  • 10
  • 16
0

Another which is also help you:

if(isset($_POST['name']) && ($_POST['name']!="")|| isset($_POST['number']) && ($_POST['number']!="")|| isset($_POST['message']) && ($_POST['message']!="")){

    $name=$_POST['name']; 
    $number=$_POST['number']; 
    $message=$_POST['message']; 
    $headers = "From: $name<form@site.com>\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

    if (($name=="")||($number=="")||($message=="")) { 

        echo "All fields are required, please fill <a href=\"\">the form</a> again."; 
    } else{

        $subject="Website Contact Form"; 
        $to = 'admin@gmail.com';
        mail($to, $subject, "<font size='+1'>Hello, this is a message from your website's contact form.<br><br>This message was sent by <b>".$name.".</b><br>The phone number they provided was <b>".$number.".</b><br><br>Their message is as follows:<br><b>".$message."</b></font>", $headers); 
        echo "Email sent!"; 
    } 
}


<form action="" method="POST">
 <input type="hidden" name="action" value="submit">
 <div class="row half">
  <div class="6u">
   <input type="text" name="name" placeholder="Name" />
  </div>
  <div class="6u">
   <input type="text" name="number" placeholder="Number" />
  </div>
 </div>
 <div class="row half">
  <div class="12u">
   <textarea name="message" placeholder="Message" rows="6"></textarea>
  </div>
 </div>
 <div class="row">
  <div class="12u">
   <ul class="actions">
    <li>
     <input type="submit" value="Send Message" />
    </li>
   </ul>
  </div>
 </div>
</form>
Manisha Chaudhary
  • 84
  • 2
  • 10