如何使用 jQuery Mobile 创建表单弹出窗口？(1)

📌 相关文章

📜 如何使用 jQuery Mobile 创建表单弹出窗口？(1)

📅 最后修改于: 2023-12-03 15:38:03.554000 🧑 作者: Mango

如何使用 jQuery Mobile 创建表单弹出窗口？

在移动应用程序和响应式网站中，表单是必不可少的一部分。jQuery Mobile 是一个流行的框架，可以轻松创建表单和弹出窗口。在本教程中，我们将学习如何使用 jQuery Mobile 创建表单弹出窗口，让用户可以方便地填写表单并提交数据。

步骤 1：创建表单

首先，我们需要创建一个 HTML 表单，用于收集用户输入的数据。表单应使用

以下是一个简单的表单示例：

<form id="myform" method="post">
  <fieldset>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" value="">
  
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" value="">
  
    <label for="age">Age:</label>
    <input type="number" name="age" id="age" value="">
  
    <label for="gender">Gender:</label>
    <select name="gender" id="gender">
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
  
    <label for="terms">Terms and Conditions:</label>
    <input type="checkbox" name="terms" id="terms">
  </fieldset>
</form>

步骤 2：创建弹出窗口

接下来，我们将创建一个弹出窗口，用于显示表单。jQuery Mobile 提供了一个称为“对话框（dialog）”的组件，可以轻松创建弹出窗口。

在页面中添加以下代码，以创建弹出窗口：

<div data-role="dialog" id="mydialog">
  <div data-role="header" data-theme="b">
    <h1>My Form</h1>
  </div>
  <div data-role="content" data-theme="a">
    <p>Please fill in the form below:</p>
    <form id="myform" method="post">
      <!-- Add form fields here -->
    </form>
  </div>
  <div data-role="footer" data-theme="b">
    <a href="#" data-role="button" data-rel="back">Cancel</a>
    <a href="#" data-role="button" data-theme="a" id="submit">Submit</a>
  </div>
</div>

这将创建一个包含头部、内容和底部的弹出窗口。头部包含一个标题，内容包含表单，底部包含“取消”和“提交”按钮。

步骤 3：显示弹出窗口

现在，我们将使用 jQuery Mobile 的 JavaScript API，以编程方式显示弹出窗口。在按钮或链接的单击事件中，添加以下代码：

$("#mydialog").popup("open");

这将打开名为“mydialog”的弹出窗口。

步骤 4：处理表单提交

最后，我们需要编写 JavaScript 代码，以便在用户单击“提交”按钮时，处理表单的提交操作。可以使用 jQuery 的 .submit() 方法来捕获表单提交事件，并执行自定义代码处理。

以下是处理表单提交的示例代码：

$("#myform").submit(function(event) {
  // Prevent form from submitting normally
  event.preventDefault();
  
  // Get form data
  var formData = $(this).serialize();
  
  // Send form data using AJAX
  $.ajax({
    url: "submit.php",
    method: "POST",
    data: formData,
    success: function(response) {
      // Handle response from server
      alert(response);
    }
  });
  
  // Close popup
  $("#mydialog").popup("close");
});

此代码使用 AJAX 将表单数据发送到服务器，并在成功时显示响应消息。最后，它将关闭弹出窗口。

完整示例

以下是完整的 HTML 和 JavaScript 代码示例，包括创建表单、弹出窗口和处理表单提交：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile Form Popup</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  <div data-role="page">

    <div data-role="header" data-theme="b">
      <h1>My App</h1>
    </div>

    <div data-role="content" data-theme="a">

      <a href="#" id="showform" data-role="button" data-icon="plus" data-iconpos="left">Show Form</a>

      <div data-role="dialog" id="mydialog">
        <div data-role="header" data-theme="b">
          <h1>My Form</h1>
        </div>
        <div data-role="content" data-theme="a">
          <p>Please fill in the form below:</p>
          <form id="myform" method="post">
            <fieldset>
              <label for="name">Name:</label>
              <input type="text" name="name" id="name" value="">

              <label for="email">Email:</label>
              <input type="email" name="email" id="email" value="">

              <label for="age">Age:</label>
              <input type="number" name="age" id="age" value="">

              <label for="gender">Gender:</label>
              <select name="gender" id="gender">
                <option value="male">Male</option>
                <option value="female">Female</option>
              </select>

              <label for="terms">Terms and Conditions:</label>
              <input type="checkbox" name="terms" id="terms">
            </fieldset>
          </form>
        </div>
        <div data-role="footer" data-theme="b">
          <a href="#" data-role="button" data-rel="back">Cancel</a>
          <a href="#" data-role="button" data-theme="a" id="submit">Submit</a>
        </div>
      </div>

    </div>

    <div data-role="footer" data-theme="b">
      <h4>&copy; My Company</h4>
    </div>

  </div>

  <script>
    $(document).on("click", "#showform", function() {
      $("#mydialog").popup("open");
    });
  
    $("#myform").submit(function(event) {
      event.preventDefault();
  
      var formData = $(this).serialize();
  
      $.ajax({
        url: "submit.php",
        method: "POST",
        data: formData,
        success: function(response) {
          alert(response);
        }
      });
  
      $("#mydialog").popup("close");
    });
  </script>

</body>
</html>

结论

通过本教程，你了解了如何使用 jQuery Mobile 创建表单弹出窗口。这使用户可以方便地填写表单并提交数据，而无需离开当前页面。这是移动应用程序和响应式网站中非常有用的功能，能够增强用户交互性和可用性。