Bootstrap表单jQuery $ .post没有刷新页面和PHP发送邮件

时间:2016-08-04 14:46:38

标签: javascript php jquery html twitter-bootstrap

我已经在我的代码中定义了所有参数但是无法解决错误注意:未定义的索引:第3行的C:\ xampp \ htdocs \ test \ process.php中的fname。我已定义但钢铁得到此错误。当从表单中删除第一个字段时,其余工作正常。 下面是我的bootstrap index.php



<!DOCTYPE html>
<html>
<head>
    <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">
    <script>
 
$(document).ready(function(){
 
$("#submit").click(function(){   
 
 
    var  postname = $("#fname").val();
       
    var postemail = $("#email").val();
       
    var postphone = $("#phone").val();
       
       
       
      $.post("process.php", {fname:postname, email:postemail, phone:postphone }, function(postresult) {
       
      $("#postdiv").html(postresult);
 
    });


}); 
 
 
});

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

    </head>

<body>
<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>
      </div>
        
      <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>
      </div>

        <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>
      </div>           

    </form>
   </div> 
<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>
 </body>
</html>
&#13;
&#13;
&#13;

以下是我的process.php

         <?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..!";

}
else{
    echo "Message Failed..!";
}


?>

请帮助Jquery很好并且解决但无法发送邮件我想如果(isset($ _ POST [&#39; submit&#39;] {.........} < / p>

2 个答案:

答案 0 :(得分:1)

传递给$.post的对象具有在请求中发送的所有键/值对。

你把

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

而不是

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

fname上有拼写错误。

要解决if (isset($_POST['submit']))的问题,请务必在请求中加入submit

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

答案 1 :(得分:0)

根据我的理解。您的页面已提交为提交按钮发布所有值。您只需按照给定的打击添加返回false。你的代码应该有用。

$(document).ready(function(){

$("#submit").click(function(){   


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

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

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



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

      $("#postdiv").html(postresult);

    });
return false;

}); 


});