如何在HTML中的弹出窗口上显示联系表单

Question

单击按钮时，我需要显示一个弹出窗口。 在该弹出窗口中，我必须显示一个表单，其中包含一些字段，例如姓名，位置，日期和电话号码。 输入所有字段后，我需要将此数据发布到另一页中，为此我正在使用ajax。 当我单击提交按钮时，数据不会发布。 你能帮我吗？

这是我的代码。

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/reset.css"> 
    <link rel="stylesheet" href="css/style.css"> 
  </head>
  <body>
    <div class="wrap">
      <a href="#modal-one" class="btn btn-big">CLICK ME!</a>
   </div>
  <form>
    <div class="modal" id="modal-one" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-header">
          <a href="#close" class="btn-close" aria-hidden="true">×</a> 
        </div>
        <div class="modal-body">
          <p>CATEGORY:
            <input type="text" name="product" placeholder="CATEGORY"   list="productName" />
          </p>
          <datalist id="productName">
            <option value="Pen">Pen</option>
            <option value="Pencil">Pencil</option>
            <option value="Paper">Paper</option>
          </datalist>
          <p>LOCATION:
            <input type="text" placeholder="LOCATION" list="LocationName" />
          </p>
          <datalist id="LocationName">
            <option value="HYDERABAD">HYDERABAD</option>
            <option value="BANGLORE">BANGLORE</option>
            <option value="MUMBAI">MUMBAI</option>
          </datalist>
          <p>DATE:
            <input type="date" name="bday" max="1979-12-31">
          </p>
          <p>PHONE NUMBER:
            <input type="text" placeholder="PHONE NUMBER">
          </p>
        </div>
        <div class="modal-footer">
          <input type="submit" name="book now" class="btn btn-warning btn-  md" value="BookNow">
        </div>
      </div>
    </div>
  </form>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<script src="js/index.js"></script>
<script>
$(function () {
  $('form').bind('submit', function (event) {
  event.preventDefault();
  $.ajax({
    type: 'post',
    url: 'get.php',
    data: $('form').serialize(),
    success: function ($id) {
      $.fancybox("#data");
    }
    });
    return false;
  });
});
</script>
</body>
</html>

Answer 1

    // this is the id of the form
    $("#idForm").submit(function(e) {
    var url = "your.php"; // the script where you handle the form input.

    $.ajax({
       type: "POST",
       url: url,
       data: $("#idForm").serialize(), // serializes the form's elements.
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

     e.preventDefault(); // avoid to execute the actual submit of the form.
   });

如何在HTML中的弹出窗口上显示联系表单

问题描述

1 个解决方案

解决方案1
0 2016-02-25 11:06:48

如何在HTML中的弹出窗口上显示联系表单

问题描述

1 个解决方案

解决方案1 0 2016-02-25 11:06:48

解决方案1
0 2016-02-25 11:06:48