PHP form submit without reloading

Question

I wanted to have the contact form in my webpage but I wanted it so that it does not refresh or open a new tab while submission. I followed this question Submit a php form and display its result on div without reloading page and implimented it.

It's working now. It sends an email but does not take values from the contact form. ie: The email body should be

Name: (name entered in the form)
Email: (email entered in the form)
Message: (message entered in the form)

But it's always :

Name: 
Email: 
Message:

Any help would be greatly appreciated.

Here's my HTML

<!DOCTYPE html> 
<html>
<head> 
<title>FeedBack Form With Email Functionality</title>
		
<style>

.result{
    padding: 20px;
    font-size: 16px;
    background-color:  #ccc;                                                                                                                                                                                                                                                    
    color: #fff;                                                                                                                                                                                                                                                                
  }

#contactme{
	position:absolute;
	top:100px;
	width:833px;
	height:450px;
	background:#FFF;
	font-size:16px;
	color:#FFF;
}

#sub_button:hover{
	cursor:pointer;
}

#sub_button {
    background:#F00;
    border: 0;
    display: block;
    width: 161px;
    height: 28px;
}
</style>
</head> 

<body>


<div id="contactme" style="font-family: 'Josefin Sans', sans-serif">
    <div>
    <input type="text" id="name" name="name" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />
	</div>

	<div>
    <input type="email" id="email" name="email" value="" placeholder="[email protected]" required="required" autocomplete="off" />
	</div>

	<div>
    <textarea  id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off"  ></textarea>
	</div>
            
    <div id="sub_button" style="position:absolute; top:30px; right:30px;"></div>
</div>

<div class="result"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  $(document).ready(function(){
      $('#sub_button').click(function() {
         $.ajax({
               type:"post",
               url:"insert1.php",
               data:  $("#contactme").serialize(),
               success: function(response){
                   $(".result").html(response);
               }
         });
      });
   });
</script>

 </body> 
 <!-- body ends here -->
 
 </html>

Here's my PHP :

<?php

// Get values from form
$name=$_POST['name'];
$email=$_POST['email'];
$data=$_POST['message'];

$to = "[email protected]";
$subject = "From The Website";
$message = " Name: " . $name . "\r\n Email: " . $email . "\r\n Message: " . $data;


$from = $name;
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n"; 

if(@mail($to,$subject,$message,$headers))
{
	echo "Message was sent successfully!";
 	echo '<script>alert("Message was sent successfully!");</script>';
  
}else{
  echo '<script>alert("Error in sending message! Please mail your message to [email protected]");</script>';
  echo "Error in sending message! Please mail your message to [email protected]";
}

echo '<script>
self.close();
</script>';


?>

You need Ajax for that. Have a look again at the topic you are referring to. — callback
– callback, Commented Mar 19, 2015 at 6:50
@callback could you be a little more specific? do I need to link any other library ? — iitum studant
– iitum studant, Commented Mar 19, 2015 at 6:52

skroczek · Accepted Answer · 2015-03-19 06:53:54Z

3

Using a html form element instead of a div should do the trick:

replace:

<div id="contactme" style="font-family: 'Josefin Sans', sans-serif">
    <!-- [...] -->
</div>

with

<form id="contactme" method="post" style="font-family: 'Josefin Sans', sans-serif">
     <!-- [...] -->
</form>

should work. For more information see http://api.jquery.com/serialize/

answered Mar 19, 2015 at 6:53

skroczek

2,3192 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prathik Rajendran M · Accepted Answer · 2015-03-19 07:00:56Z

2

$("<div id = 'test'><input name = 'zzz' value = 'zzz'/></div>").serialize()
""

Gives a blank value as an output, however

$("<form id = 'test'><input name = 'zzz' value = 'zzz'/></form>").serialize()
"zzz=zzz"

Therefore, your <div id = "contact-me"> should turn into a form and in the click handler you would need to call preventDefault() on the event.

$("#test").on('submit',function(e) {
e.preventDefault();
//Your ajax logic
});

This would work too.

answered Mar 19, 2015 at 7:00

Prathik Rajendran M

1,1628 silver badges21 bronze badges

2 Comments

skroczek Over a year ago

The funny thing is, that there is no submit button used, but a onClick event on a div. So there is no reason for using on submit with e.preventDefault();. But you are right, using a submit button and suppress the default behaviour is more common.

Prathik Rajendran M Over a year ago

Ideally a submit button is used. And it is better to catch the submit event rather than a submit button onclick action is because submit event can handle submits from multiple buttons if they are they, although having multiple submit buttons is seldom done, I find it to be a better practice.

Huzoor Bux · Accepted Answer · 2015-03-19 06:59:43Z

Run this HTML its working fine.

Use HTML form data instead of a div.

<form id="contactme" method="post">
    <div style="font-family: 'Josefin Sans', sans-serif">
        <div>
        <input type="text" id="name" name="name" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />
        </div>

        <div>
        <input type="email" id="email" name="email" value="" placeholder="[email protected]" required="required" autocomplete="off" />
        </div>

        <div>
        <textarea  id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off"  ></textarea>
        </div>

        <div id="sub_button" style="position:absolute; top:30px; right:30px;"></div>
 </div>   
</form>
<div class="result"></div>

Collectives™ on Stack Overflow

PHP form submit without reloading

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related