JQuery在表单中添加按钮

sdnqo3pr  于 2022-11-03  发布在  jQuery
关注(0)|答案(1)|浏览(213)

我不太擅长JQuery。我只需要在表单中添加“add”和“remove”行,就可以创建一个酒店房间数组。我尝试修改在Internet上找到的代码,得到了以下代码:

<html>
    <header>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
        <script type="text/javascript">
            $(function() {
              $("#add").click(function() {
                  div = document.createElement('div');
                  $(div).addClass("room").html("new Room Type");
                  $("#roomTypes").append(div);
                });
            });
        </script>
        <style>
            #container {border: 1px solid red; padding: 10px; width: 100%;}
            .inner {border: 1px solid green; margin: 10px; width: auto; height: 20px;}
           </style>
    </header>
    <body>
        <h1>Numbers Project</h1>
        <p>Version 0.1</p>

        <form>
            Hotel Name: <input type="text" name="Name" value="Roma Nord"><br>
            Hotel Stars: <input type="number" name="Stars" value="3"><br>

            <div id="roomTypes">
                <div class="room">
                    Room Type: <input type="text" name="RoomType" value="Double"><br>
                </div>

            </div>
            <button id="add">Add new div</button>
            Opening Date: <input type="date" name="OpenDate" value="2021-01-01"><br>
            Closing Date: <input type="date" name="CloseDate" value="2021-06-30"><br>
            <h3>Previous Year Data</h3>

            Rooms sold: <input type="number" name="RoomsSold" value="12000"><br>
            Arrivals Presences: <input type="number" name="ArrivalsPresences" value="15000"><br>
            Presences: <input type="number" name="Presences" value="23000"><br>

            <br><input type="submit" value="Submit">
        </form>

    </body>
</html>

但是按钮只显示了一秒钟新的Div,然后它就消失了。

<button id="add">Add new div</button>

只有当我把它放在表单外(在正文中)时才起作用。有人能帮我添加这些按钮吗?谢谢你的时间。

4uqofj5v

4uqofj5v1#

要防止form提交和重新加载页面,只需添加

<button id="add" type="button">Add new div</button>

您的完整代码正在运行:
第一个

相关问题