如何在 html 弹出窗口中显示联系人表单

How to show a contact form on popup in html

本文关键字：显示 联系人 表单 窗口 html      更新时间：2023-09-26

我需要在单击按钮时显示一个弹出窗口。在该弹出窗口中，我必须显示一个表单，其中包含一些字段，例如名称，位置，日期和电话号码。输入所有字段后，我需要将这些数据发布在另一个页面中，为此我使用的是 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>

    // 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.
   });
相关文章：