用Javascript動態創建一個HTML表單

我該如何去創建一個JavaScript表單？用Javascript動態創建一個HTML表單

我對如何進行沒有任何想法，我一直在使用Google搜索，但沒有任何明確指示可以告訴我如何動態創建表單。

Thanx提前！

來源

2010-07-21 Odyss3us

基本上，就像您使用'createElement'或jQuery創建其他JavaScript元素一樣。你可以使用jQuery嗎？ – 2010-07-21 07:42:22

是的，我可以使用jQuery，但不是太熟悉。 – Odyss3us 2010-07-21 07:55:58

我認爲發佈一個完整的解決方案將是太多，但檢查出的jQuery這一點。我給你一個提示，jQuery的.append()能爲你是非常有用的:)

來源

2010-07-21 07:44:06

使用document.write，或者如果你想要更多的靈活性，使用jquery

來源

2010-07-21 07:43:42 zaynyatyi

只需使用標準DOM API（document.createElement()，see these docs for an example）創建窗體中的所有元素。

來源

2010-07-21 07:44:21

我的建議是獲得underscore.js庫並使用它的template函數來創建表單。（如果下劃線對您來說太大，模板功能也可以自行設置）。

來源

2010-07-21 07:44:43

是的，你可以創建HTML包括運行的JavaScript形式的任何金額，

也許：`

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

我們的JavaScript可能看起來像：

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

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

來源

2010-07-21 07:46:46 IanNorton

試試這個.. 。

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();

這將創建一個與它裏面DIV形式...

來源

2011-03-18 19:12:37 MuniR

你可以嘗試這樣的事：

的HTML部分：

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

<body> 
</html>

的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>

這你可以動態地創建儘可能多的元素。

來源

2013-03-14 12:37:03 user1451533

該解決方案效果很好。謝謝！ – 2014-03-01 22:34:40

如果在腳本執行的時候沒有加載DOM，你可能會得到一個錯誤 - 在我的例子中，我得到了「無法讀取未定義的屬性'appendChild'」。所以最好把javascript代碼放在window-onload塊中。例如， – Dilruk 2017-09-24 20:45:07

我的想法是，您可以使用github上的dform jquery插件直接通過給出輸入爲json數據來創建表單。

來源

2013-08-26 10:36:20

用Javascript動態創建一個HTML表單

回答

相關問題