【问题标题】:Bootstrap Popup on sending form data to mail将表单数据发送到邮件的引导弹出窗口
【发布时间】:2016-01-29 03:32:39
【问题描述】:

我是一名初级网站管理员,也许这就是我在这里提出一个简单问题的原因。我为客户端设计了一个单页应用程序,该应用程序在页面末尾有联系表单,验证是使用引导程序完成的,但是将表单数据发送到邮件 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>

【问题讨论】:

    标签: javascript php jquery html twitter-bootstrap


    【解决方案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 包含发送和退出成功 (true) 或失败 (false) 消息的代码。这将被ret 变量捕获。

    【讨论】:

    • 请帮我解决一下 submit.php 代码,我刚开始我的 jquery 或 javascript 职业生涯,如果你这样做会很有帮助
    • 我当然可以帮你,但先试试,如果出现问题我会
    • 是的。确保不推荐使用 mysql,尝试使用 mysqli 或 PDO
    • 但我没有弹出任何窗口
    【解决方案2】:

    已编辑

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-01-26
      • 1970-01-01
      • 2017-01-30
      • 1970-01-01
      • 1970-01-01
      • 2023-03-21
      相关资源
      最近更新 更多