點擊添加到列表按鈕獲得項目添加到列表中的JavaScript

從文本框，單選框我有兩種形式，在Form1當用戶選擇單選按鈕，在附加輸入在文本框和值點擊列出按鈕（文本單選按鈕+文本框的值）應添加到form2中的列表框中。點擊添加到列表按鈕獲得項目添加到列表中的JavaScript

我寫的JavaScript函數來添加項目，其中包括在兩種形式的腳本在Form1的功能被觸發爲附加的onclick事件列表按鈕即和在body標籤onload事件窗口2。

但它不工作，任何人都可以在這方面幫助，因爲我是新的JavaScript。

Form1中：

<form name="orderform"> 
    Category: 
<input type="radio" name="category" id="category" value="0">Apple</input> 
<input type="radio" name="category" id="category" value="1">Orange</input> 
<input type="radio" name="category" id="category" value="2">Banana</input> 
<input type="radio" name="category" id="category" value="3">Guava</input> 
<br> 
Item: <input type="text" length="30" name="item" id="item"/> 
<br> 
<input type="button" name="add" value="Add to List" onClick="addItem_list()"/> 
</form>

窗體2：

<body onload="addItem_list()"> 
     <form name="items"> 
      Items <SELECT name="item_list" id="item_list"> 
       <option value="">Select item</option> 
      </SELECT>

的Javascript：

function addItem(selectbox,text,value) 
{ 
    var item = document.createElement("OPTION"); 
    item.text = text; 
    item.value = value; 
    selectbox.options.add(item); 
} 

function addItem_list(){ 
    var it=document.orderform.item.value; //getting item value from textbox 
    //To determine which radio button has been selected: 
    for (var i=0; i<document.orderform.category.length; i++) 
    { 
     if (document.orderform.category[i].checked==true) 
     { 
      var y = orderform.category[i].value; 
     } 
    } 
    var val=y+" "+it; 
    addItem(document.items.item_list,val,val);     
}

來源

2014-07-01 user3791885

當你在加載時運行，用戶還沒有來得及填寫輸入字段呢。 – Barmar

他也無法檢查任何單選按鈕。你如何期待這在'onload'情況下工作？ – Barmar

您不應該重複使用ID，它們應該是唯一的。如果你沒有使用任何ID，就把它們放在外面。 – Barmar

您的腳本不工作作爲intende d。但是，您的HTML非常無效。這可能會破壞某些瀏覽器中的正確解析，並依賴於doctype並隨後正確執行JavaScript。使用ID時，請將其定義爲唯一。 <input>是一個無效標籤，這意味着它不能有結束標籤！當您使用XHTML文檔類型時，請將打開的標記標記爲自動關閉<input />。使用<label for="the-input-id">My Label</label>獲得連接到輸入元素的可點擊標籤。

不要依賴名稱映射到文檔和表單對象。其他腳本可以覆蓋這個名字，例如JS框架可以將items定義爲文檔屬性/方法。改用document.getElementById()或document.querySelector()/document.querySelectorAll()或其他類似的方法。

我認爲在第二個代碼片段<body>在頁面的頂部會出現在你的代碼只有一次。

來源

2014-07-01 21:23:10

不完全。該腳本實際上不起作用，他實際上並沒有抓取他想要的任何文檔元素。 'addItemList（）'在第一行崩潰：'var it = document.orderForm.item.value'。看小提琴。 – WebWanderer

@WebWanderer當標記有效時，它不會在我的瀏覽器中崩潰，甚至不會在HTML5文檔類型中使用無效標記。但正如我已經指出的那樣，依靠名稱映射來記錄文檔和表單並不好，因爲它可以被覆蓋。 –

它的工作..謝謝 – user3791885

您無法正常檢索「orderForm」或「類別」。你需要正確地抓住這些物品。你不能通過基於標籤名稱的文檔導航，儘管如果可以的話，這將很酷。這是JS。

function addItem(selectbox,value) 
{ 
    var item = document.createElement("OPTION"); 
    item.text = value; 
    item.value = value; 
    selectbox.options.add(item); 
} 

function addItem_list(){ 
    var item =document.getElementById('item'); 

    var it = item.value; 

    if(!it) 
     it = 'blank'; 

    var categories = document.getElementsByTagName('category'); 


    //To determine which radio button has been selected: 
    for (var i=0; i<categories.length; i++) 
    { 
     if (categories[i].checked==true) 
     { 
      var y = categories[i].value; 
     } 
    } 
    var val; 

    if(y) 
     val = y + ' ' + it; 
    else 
     val = it; 

    var item_list = document.getElementById('item_list'); 

    addItem(item_list,val);     
}

現在它很好用！希望這就是你想要的！

來源

2014-07-01 21:35:42 WebWanderer

點擊添加到列表按鈕獲得項目添加到列表中的JavaScript

回答

相關問題