单击添加到列表按钮从javascript中的文本框和收音机中获取添加到列表框中的项目答案

【问题标题】：click on add to list button get items added to list box from textbox and radio in javascript单击添加到列表按钮从javascript中的文本框和收音机中获取添加到列表框中的项目
【发布时间】：2014-07-01 20:52:22
【问题描述】：

我有两个表单，在表单1中，当用户选择单选按钮时，在文本框中输入值并单击添加到列表按钮，（单选按钮的文本+文本框的值）应该被添加到表单2的列表框中。

我编写了 javascript 函数来添加项目并将脚本包含在两种表单中，即在 form1 中，该函数被触发为添加到列表按钮的 onclick 事件和 form2 中的 body 标签 onload 事件。

但它不起作用，任何人都可以在这方面提供帮助，因为我是 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>

Form2：

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

【问题讨论】：

在加载时运行时，用户还没有机会填写输入字段。
他也无法检查任何单选按钮。您希望这在 onload 案例中如何工作？
您不应该重复使用 ID，它们应该是唯一的。如果您没有将 ID 用于任何用途，只需将它们排除在外。
在onclick 情况下可以正常工作：jsfiddle.net/barmar/d5U7u
非常真实，绝不重复使用 ID

标签： javascript

【解决方案1】：

您的脚本确实按预期工作。但是，您的 HTML 非常无效。这可能会破坏某些浏览器中依赖于 doctype 的正确解析以及随后 JavaScript 的正确执行。使用 ID 时，将它们定义为唯一的。 <input> 是一个空标签，这意味着它不能有结束标签！当您使用 XHTML 文档类型时，将打开标记标记为自关闭 <input />。使用<label for="the-input-id">My Label</label> 获取连接到输入元素的可点击标签。

不要依赖名称映射来记录和形成对象。其他脚本可以覆盖此名称，例如JS 框架可以将 items 定义为文档属性/方法。请改用document.getElementById() 或document.querySelector() / document.querySelectorAll() 或类似的方法。

我假设第二个代码片段中的 <body> 在您的代码中仅在页面顶部出现一次。

【讨论】：

不完全。脚本实际上不起作用，他实际上并没有抓取任何他想要的文档元素。 'addItemList()' 在第一行崩溃：'var it = document.orderForm.item.value'。看看小提琴。
@WebWanderer 当标记有效时，它不会在我的浏览器中崩溃，甚至在 HTML5 文档类型中没有无效标记。但正如我已经说过的，依赖名称映射到文档和表单并不是一个好习惯，因为它可以被覆盖。
我完全同意你@Quasimodo 的克隆，这根本不是一个好习惯。就个人而言，我更喜欢通过 JavaScript 生成所有对象，然后保留对象的引用以供以后使用，这样我就不需要任何类型的单词映射。我很好奇为什么它没有在您的浏览器中崩溃。我在 Chrome、Firefox 或 IE 中没有收到错误弹出窗口，但如果您在调试器中跟踪它，您会看到他没有正确抓取订单并且该功能不会从那里继续。你用的是什么浏览器？
@WebWanderer 我已将代码复制到一个包含一个正文的简单文档中，它适用于我的 Firefox 30。由于 DOM 解析会减慢任务速度，因此解析一次并将引用存储在变量中是一种不错的方法。

【解决方案2】：

您没有正确检索“orderForm”或“categories”。你需要正确地抓住这些物品。您不能仅根据标签名称浏览文档，尽管如果可以的话那会很酷。这是 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);                
}

现在效果很好！希望这就是您想要的！

【讨论】：