首页 文章

提交按钮不适用于HTML代码

提问于
浏览 次
0

我有这个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 sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur . Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum . ）

jquery html

2 回答

  • 6

    对话框中的提交按钮不起作用，因为您已经嵌套了表单 - form2 在 form1 内，这是无效的 .

    将对话框（ <div id="dialog" 及其中的所有内容）移到 form1 之外，提交按钮将按预期进行回发 .

    附：尽管问题的 Headers ，这个问题的根本原因与jQuery，甚至Javascript无关 . 它只是格式错误的HTML .

    回复于
  • -1

    如果您可以使用内联Javascript，则可以尝试使用 onclick 属性 .

    这就像：

    <input type="button" value="Show Dialog" id="create-user" onclick='$("#dialog").dialog("open");' />

    如果您可以使用内联Javascript，请尝试使用事件侦听器抛弃jQuery .

    <input type="button" value="Show Dialog" id="create-user"/>
<script>
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("create-user").addEventListener("click", function () {
        $('#dialog').dialog("open");
    });
});
</script>

    编辑：正如其他人所说，您也可以将输入元素更改为按钮 . 这看起来会更好，因为按钮不在表单中 .

    <button type="button" id="create-user">Show Dialogue</button>
    回复于

相关问题