Lỗi append trong jquery

nguyenthedan · August 4, 2016, 6:43am

Khi người dùng nhập vào textbox và nhấn add thì dữ liệu trong textbox được lấy ra và chèn vào #list ul nhưng khi chạy nó mắc lỗi sau: khi nhấn add thì nội dung được chèn vào ul nhưng mất ngay, kết qủa là ko có thẻ <li> nào hết. Mong mọi người chỉ giáo.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Todo App</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style type="text/css">
            .col-center{
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#addTodo').on('click', function(){
                    $('#list ul').append('<li>'+ $('input[type="text"]').val() +'</li>');
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-center">
                    <form class="form-inline">
                        <input type="text" class="form-control" id="textTodo">
                        <button type="submit" class="btn btn-default" id="addTodo">Add</button>
                    </form>
                </div>
            </div>
            <div class="todoList" id="list">
                <ul>
                    
                </ul>
            </div>
        </div>
    </body>
</html>

Update: mình đã tìm ra lỗi rồi, chỉ cầ return flase trong đoạn javascript là đc, làm phiền mọi người.

vhnam · August 4, 2016, 7:15am

Lý do là mỗi lần bạn bấm nút Add là nó tự động gởi request đi mất rồi. Để khắc phục, bạn có thể chọn một trong các cách sau:

Đổi thuộc tính type của nút Add thành button.
Bỏ luôn cái thẻ <form> nhưng vẫn phải làm bước 1.
3.Thêm thuộc tính action cho thẻ <form> như sau

<form class="form-inline" action="javascript:void(0)">
    <!-- TODO -->
</form>