David David - 1 year ago 135
HTML Question

Bootstrap Form jQuery $.post without refreshing page and PHP send mail

I have define all parameter in my code but not able to resolve error is Notice: Undefined index: fname in C:\xampp\htdocs\test\process.php on line 3. i have define but steel getting this error. when removing first field from the form rest is working fine.
Below is my bootstrap index.php

<!DOCTYPE html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">



var postname = $("#fname").val();

var postemail = $("#email").val();

var postphone = $("#phone").val();

$.post("process.php", {fname:postname, email:postemail, phone:postphone }, function(postresult) {





<style type="text/css">
.box {
width: 900px;
background: gray;
color: white;
margin: 0 auto;
padding: 10px;
text-align: center;
margin-left: 50px;


<div class="container">
<h1>Bootstrap Form jQuery $.post without refreshing page </h1>
<form class="form-horizontal" role="form">

<div class="form-group">
<label for="" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-5">
<input type="text" name="fname" class="form-control" id="fname" placeholder="Enter Name">

<div class="form-group">
<label for="" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-5">
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Email">

<div class="form-group">
<label for="" class="col-sm-2 control-label">Phone:</label>
<div class="col-sm-5">
<input type="text" name="phone" class="form-control" id="phone" placeholder="Enter Phone">

<div class="col-sm-offset-2 col-sm-5">
<button id="submit" name="submit" class="btn btn-lg btn-block btn-warning">Submit</button>
</div><br /><br /><br />
<div id="postdiv"><h3>You entered following data!</h3></div>

and below is my process.php


if (isset($_POST['submit'])) {

$fullname = $_POST['fname'];
$email = $_POST['email'];
$phone = $_POST['phone'];

$to = "davidmasihxyz@gmail.com";
$subject = "Contact Query For Order Form";
$message = "Your Name: $fname \n".
"Your Email: $email \n" .
"Your Phone No: $phone \n" ;

mail($to, $subject, $message, "From: " . $email);

echo "Form Submited Successfully..!";

echo "Message Failed..!";


Please help Jquery is fine and resolve but not able to send mail i guess something is wrong with if (isset($_POST['submit']{.........}

Answer Source

The object you pass to $.post has all the key/value pairs which are sent in the request.

You put

{name:postname, email:postemail, phone:postphone }

Instead of

{fname:postname, email:postemail, phone:postphone }

There was a typo on fname.

To fix the issue with if (isset($_POST['submit'])), make sure to include submit in your request:

{fname:postname, email:postemail, phone:postphone, submit:true}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download