hack cho jQuery để tuần tự hóa các giá trị của <input> và <select> các phần tử KHÔNG ở bên trong một biểu mẫu

Question

Tôi đã xem xét rất nhiều bài đăng trên stackoverflow và ở nơi khác cho câu trả lời này, nhưng vẫn đang đấu tranh để tìm một thứ sẽ hoạt động với ranh giới của đơn đăng ký của tôi.

Tôi đang xây dựng một plugin hiện tại (http://johnny.github.com/jquery-sortable/) để tạo trình chỉnh sửa kéo và thả cho học sinh tiểu học. Plugin này sử dụng jQuery để tuần tự hóa đầu ra thành một định dạng giống với mã nguồn HTML, do đó tự động cập nhật cửa sổ xem trước trang web. Các span có thể chỉnh sửa nội dung hoạt động tốt cho phép người dùng nhập các giá trị mà không vô tình tự chỉnh sửa các thẻ html.

Tuy nhiên, tôi không thể nhận được các giá trị của đầu vào hoặc chọn các yếu tố được đưa vào đầu ra tuần tự. Sau khi xem API jQuery để tuần tự hóa, có vẻ như chỉ ra rằng đầu vào <> phải nằm trong một biểu mẫu và cũng có thuộc tính tên. Đây không phải là cái gì đó sẽ làm việc với bản chất của dự án của tôi, vì vậy tôi đang tìm kiếm một hack/workaround.

Nếu bất kỳ ai nhận thức được một hack để đảm bảo rằng các giá trị đầu vào và lựa chọn phần tử được bao gồm trong đầu ra tuần tự, tôi sẽ đánh giá cao nó!

Chỉnh sửa: Đây là liên kết đến trạng thái có thể demo trực tiếp nhất mà tôi có thể truy cập: http://tinker.io/5bdab/5. Sau khi thử một vài nơi để đặt mã của tôi (jsbin, tinkerbin, jsfiddle), có vẻ như tất cả chúng đều có sự cố khi hiển thị iframe? Vì vậy, bạn không thể thấy thực tế tuyệt vời khi kéo và thả các phần tử ở cột giữa cuối cùng dẫn đến xem trước trang html trực tiếp đang được thay đổi bên cạnh nó ... Tuy nhiên, bạn vẫn có thể thấy rằng các kết quả trong mã nguồn được tạo bên dưới nhận được thay đổi bằng cách được tuần tự hóa (phần mà tôi cần hỗ trợ trong việc tìm ra cách serialize đầu vào và chọn các phần tử sao cho giá trị của chúng sẽ hiển thị trong vùng văn bản).

Tuy nhiên, toàn bộ tệp chỉ nằm trong phần HTML (để thuận tiện cho các trường hợp như thế này, không phải để thực hành chuẩn), vì tôi liên kết đến tệp js bên ngoài và có kiểu nội bộ được xác định - nếu bạn nghiêng chỉ có thể lưu tệp html vào máy tính của bạn và kiểm tra. Tôi không nhận thức được một lựa chọn tốt hơn cho việc hiển thị một bản demo trực tiếp với iframe hỗ trợ:/

Answer 1

Hãy thử gói tất cả các nội dung của bạn bên trong một div

<div id="wrapper"> 
    <input type="text" value="text text" name="text"> <br> 
    <select name="single"> 
     <option>Single</option> 
     <option>Single2</option> 
    </select> 
    <textarea name="textarea">textarea text</textarea> 
</div> 

và sau đó serialize tất cả các yếu tố bên trong này div

$("#wrapper").find("select,textarea, input").serialize(); 

Demo