提问者:小点点

提交“按钮不能用于html代码


我有这个HTML代码:

<!DOCTYPE html>
<html>
<head>
    <title>Modal</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="modalUI.css">

    <script src="jquery-3.1.1.js"></script>
    <script src="jquery-3.1.1.min.js"></script>

    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
    <script src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
    <script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#create-user').click(function(){
                $('#dialog').dialog("open");
            });

            $('#dialog').dialog({
                draggable: true, 
                resizable: false, 
                closeOnEscape: true,
                modal: true,  
                autoOpen: false
            });
        });
    </script>
</head>
<body>
    <form id="form1">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                </tr>
            </tbody>
        </table><br>

        <input type="button" value="Show Dialog" id="create-user"/>
        <div id="dialog" title="Create new User">
            <form id="form2" action="">
                <label for="name">FirstName</label><br>
                <input type="text" name="fname" ><br>

                <label for="lastname">LastName</label><br>
                <input type="text" name="lname" ><br>

                <label for="email">Email</label><br>
                <input type="email" name="email" ><br><br>

                <button type="submit" value="Submit" id="submitDemo">Submit</button>
                <button type="reset" value="Reset">Reset</button>
            </form>
        </div>
    </form>
</body>
</html>

当对话框弹出时,我的提交按钮不起作用。我应该在jQuery上写些什么?p.s Submit在div对话框之外工作。但是如何让它在对话中发挥作用??

别介意这个lorem ipsum的事。(Lorem ipsum dolor site amet,consectetur adipisicing elit,sed do deusmod tempor incidunt ut labore and dolore magna aliqua.ut enim ad minim veniam,quis restrudit ullamco laboris nisi ut aliquip ea commodo ator.Duis aute irure dolor in voluptate velit esse cillum dolore eu fugiatur nulla pariatur.Excepteur sunt in the culpa quiunt mollit anim id est laborum.)


共2个答案

匿名用户

对话框中的“提交”按钮无法工作,因为您有嵌套的表单-Form2Form1中,这是无效的。

将对话框(

及其内部的所有内容)移到Form1之外,提交按钮将导致预期的回发。

附注。尽管问题的标题是这样的,但这个问题的根本原因与jQuery无关,甚至与JavaScript无关。它只是格式错误的HTML。

匿名用户

表单标记缺少说明,即...method=“post”action=“”

相关问题