Question

我作为初级网站管理员工作也许这就是为什么我在这里提出一个简单的问题。我为客户设计了一个单页应用程序，在页面末尾有联系表单，验证是使用bootstrap完成的，但是将表单数据发送到邮件id只有我知道的方法是使用php来指导不同的页面。由于我的网站是单页面应用程序，我想要成功提交到邮件ID

的弹出窗口

以下是联系表单的HTML代码

<form class="form-inline" data-toggle="validator" role="form" method="post" id="enquiry" action="index.php">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Name</label>
    <input type="text" class="form-control" name="name" id="exampleInputEmail3" placeholder="Name" required>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Mobile Number</label>
    <input type="text" class="form-control" id="exampleInputPassword3" name="mobile" placeholder="Mobile Number" required>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Email Id</label>
    <input type="email" class="form-control col-lg-12" id="exampleInputPassword3" name="email" placeholder="Email Id" required>
  </div>
  <br/> <br/>
  <div class=" col-lg-12 form-group">
    <textarea cols="80" placeholder="Enter query Here" class="form-control" name="query" id="address" data-error ="Please Enter Your Query" required></textarea><br/><br/>
  </div>
  <button style="background-color:#f15a24; color:#FFF;" name="submit" id="submit" type="submit">Submit</button>
</form>

可以使用php发送表单数据并在同一页面中弹出一个吗？

或者我是否需要使用jquery发送数据和弹出窗口？

如果有人帮我解决代码问题，那将会很棒，感谢提前

更新

下面的

（index.php页面）我已经添加了你给出的代码，

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/creative.js"></script>
<script src="js/validator.js"></script>
<script>
    $(document).ready(function(){
        $("#enquiry").on("submit",function(e){
    e.preventDefault();
    var dataString = $('#enquiry').serialize();
      $.ajax({
        type: "POST",
        url: "submit.php",
        data: dataString,
        success: function(ret) {
            if(ret === "Success"){ alert("Success"); }else{ alert("Failed"); }
            //Failure message if ret is false
          });
        }
      });
    });
</script>

Answer 1

将此js添加到您的脚本

<script>
$(document).ready(function(){
    $("#enquiry").on("submit",function(e){
e.preventDefault();
var dataString = $('#enquiry').serialize();
  $.ajax({
    type: "POST",
    url: "submit.php",
    data: dataString,
    success: function(ret) {
        if(ret === "Success")
        { 
          alert("Success"); 
        } else { 
          alert("Failed"); 
        }
       } 
     });
    }
  );
});

submit.php包含使用success（true）或failure（false）消息发送和退出的代码。这将在ret变量中捕获。

Answer 2

<强>被修改

这将是我正在寻找的更详细的答案，我认为这对某人有帮助所以我已经回答了我自己的问题作为替代解决方案，请查看下面的链接。

Show submitted form response on the same page. (No Reload)

http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html

将表单数据发送到邮件时的Bootstrap弹出窗口

2 个答案: