javascript 增加表單的input

2008-12-21

利用javascript增加form的input

其實不會很難(爆)
createElement跟appendChild還有很多地方可以用
至於哪裡.. .下次再跟你講 (誤)

這是js的部份

//用來區分不同input的name
var element_count = 0;

function add_element(obj)
{
  element_count++;
  //先建立一個input的tag
  var new_element = document.createElement("input");
  //設定這個input的屬性
  //可以這樣用
  new_element.type = "text";
  new_element.name = "new" + element_count;
  new_element.value = element_count;
  //也可以這樣用
  new_element.setAttribute("type","text");
  new_element.setAttribute("name","new" + element_count);
  new_element.setAttribute("value",element_count);
  //最後再使用appendChild加到要加的form裡
  obj.form.appendChild(new_element);
  //換行用~ 一樣是要加到form裡
  var s = document.createElement("br");
  obj.form.appendChild(s);
}

這是html的部份

增加form的input<br />
<form name="myform">
<input type="button" value="增加input" onclick="add_element(this)"><br />
</form>

這裡可以看範例

一樣是配合ajax來使用這個功能
good~

Comments

  • Eric 說:

    請問要如何減少intput呢?

  • hsin 說:

    跟appendChild相反的removeChild可以減少
    可以參考這個喔
    http://www.w3schools.com/dom/dom_nodes_remove.asp

    拍寫我的gmail把迴響通知判別成垃圾信了orz 現在才看到回應

  • 發表迴響

    彙整

    分類