Question

没有表单标记，一切正常，但表单标记的存在不会导致jQuery工作。

当我放置表单runat = server标签时，页面的行为与没有表单标签的行为不同。

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mytests.aspx.cs" Inherits="DDCMS.mytests" %>

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">

      <meta charset="utf-8" />

      <title>jQuery UI Dialog - Modal form</title>

      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


      <style>

        body { font-size: 62.5%; }

        label, input { display:block; }

        input.text { margin-bottom:12px; width:95%; padding: .4em; }

        fieldset { padding:0; border:0; margin-top:25px; }

        h1 { font-size: 1.2em; margin: .6em 0; }

        div#users-contain { width: 350px; margin: 20px 0; }

        div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }

        div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }

        .ui-dialog .ui-state-error { padding: .3em; }

        .validateTips { border: 1px solid transparent; padding: 0.3em; }

      </style>
        <script>



         $(function () {

        var name = $("#name"),
            email = $("#email"),
            password = $("#password"),
            allFields = $([]).add(name).add(email).add(password),
            tips = $(".validateTips");

        $("#dialog-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function () {
                    var bValid = true;
                    if (bValid) {
                        $("#users tbody").append("<tr>" +
                            "<td>" + name.val() + "</td>" +
                            "<td>" + email.val() + "</td>" +
                            "<td>" + password.val() + "</td>" +
                            "</tr>");
                        $(this).dialog("close");
                    }
                },

                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });

        $("#create-user")
            .button()
            .click(function () {
            $("#dialog-form").dialog("open");
        });
    });



  </script>
    </head>

    <body>

         <form id="form1" runat="server">


    <div id="dialog-form" title="Create new user">

      <p class="validateTips">All form fields are required.</p>





      <fieldset>

        <label for="name">Name</label>

        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />

        <label for="email">Email</label>

        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />

        <label for="password">Password</label>

        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

      </fieldset>



    </div>





    <div id="users-contain" class="ui-widget">

      <h1>Existing Users:</h1>

      <table id="users" class="ui-widget ui-widget-content">

        <thead>

          <tr class="ui-widget-header ">

            <th>Name</th>

            <th>Email</th>

            <th>Password</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>John Doe</td>

            <td>john.doe@example.com</td>

            <td>johndoe1</td>

          </tr>

        </tbody>

      </table>

    </div>

    <button id="create-user">Create new user</button>




     </form>
    </body>


    </html>

Answer 1

防止表单的默认操作

$("#create-user")
    .button()
    .click(function (e) {
        e.preventDefault();
        $("#dialog-form").dialog("open");

     // If you want to submit the form use $('form').submit()
     // explicitly
});

jQuery Modal里面的表单元素不起作用

1 个答案: