2010-07-21 68 views
13

Tôi làm cách nào để tạo biểu mẫu bằng javascript?Tự động tạo biểu mẫu HTML với Javascript

Tôi KHÔNG có ý tưởng về cách tiến hành, tôi đã googling khuôn mặt của tôi ra nhưng không có gì dứt khoát mà có thể chỉ cho tôi cách tự động tạo ra các hình thức với nó.

Thanx trước!

+0

Về cơ bản, chính xác khi bạn tạo các phần tử khác bằng JavaScript, sử dụng 'createElement' hoặc jQuery. Bạn có thể sử dụng jQuery không? –

+0

Có, tôi có thể sử dụng jQuery, không quá familliar với nó mặc dù. – Odyss3us

Trả lời

5

Tôi nghĩ đăng một giải pháp hoàn chỉnh sẽ là quá nhiều, nhưng hãy kiểm tra jQuery cho việc này. Tôi cung cấp cho bạn gợi ý, số .append() của jQuery có thể rất hữu ích cho bạn :)

0

Chỉ cần sử dụng API DOM chuẩn (document.createElement(), see these docs for an example) để tạo tất cả các phần tử của biểu mẫu.

0

Đề xuất của tôi là nhận thư viện underscore.js và sử dụng chức năng template để tạo biểu mẫu của bạn. (Nếu dấu gạch dưới quá lớn đối với bạn, hàm mẫu cũng có thể tự đứng).

3

Vâng, bạn có thể tạo bất kỳ số lượng html bao gồm các hình thức bằng cách chạy javascript,

lẽ: `

<html> 
    <body> 
    <h1>My Form</h1> 
    <div id="formcontent"> 
    </div> 
    </body> 
</html> 

javascript của chúng tôi có thể trông giống như:

var e1 = document.CreateElement("input"); 
el.type = "text"; 
el.name = "myformvar"; 

var cont = document.GetElementById("formcontent") 
cont.appendChild(e1); 
0

TRY NÀY .. .

myWin = open("", "displayWindow", "width=800,height=500,status=yes,toolbar=yes,menubar=yes"); 

       myWin.document.open(); 
       myWin.document.write("<html><head><title>V E N U S </title>"); 
       myWin.document.write("<style type='text/css'>.hdr{.......}</style>"); 
        myWin.document.write("</head><body onload='window.print()'>"); 
          myWin.document.write("<div class='hdr'>"); 

           myWin.document.write("what ever you want"); 
           . 
           . 


         myWin.document.write("</div>");    
        myWin.document.write("</body></html>"); 
       myWin.document.close(); 

đó là sẽ tạo ra một hình thức với DIV bên trong nó ...

25

Bạn có thể thử một cái gì đó như thế này:

HTML phần:

<html> 
<head></head> 
<body> 

<body> 
</html> 

Các javascript:

<script> 
//create a form 
var f = document.createElement("form"); 
f.setAttribute('method',"post"); 
f.setAttribute('action',"submit.php"); 

//create input element 
var i = document.createElement("input"); 
i.type = "text"; 
i.name = "user_name"; 
i.id = "user_name1"; 

//create a checkbox 
var c = document.createElement("input"); 
c.type = "checkbox"; 
c.id = "checkbox1"; 
c.name = "check1"; 

//create a button 
var s = document.createElement("input"); 
s.type = "submit"; 
s.value = "Submit"; 

// add all elements to the form 
f.appendChild(i); 
f.appendChild(c); 
f.appendChild(s); 

// add the form inside the body 
$("body").append(f); //using jQuery or 
document.getElementsByTagName('body')[0].appendChild(f); //pure javascript 

</script> 

này cách bạn có thể tạo nhiều phần tử như bạn muốn động.

+0

Giải pháp này hiệu quả. Cảm ơn! –

+0

Trong trường hợp nếu DOM không được tải tại thời điểm thực thi tập lệnh, bạn có thể gặp lỗi - Trong trường hợp của tôi, tôi đã nhận "Không thể đọc thuộc tính 'appendChild' không xác định". Vì vậy, tốt hơn để kèm theo mã javascript bên trong khối cửa sổ-onload. Ví dụ: Dilruk

3

Ý tưởng của tôi là bạn có thể sử dụng plugin jquery dform từ github để tạo biểu mẫu trực tiếp bằng cách cung cấp dữ liệu đầu vào làm dữ liệu json.

Các vấn đề liên quan