Question

我有两种形式，在form1中，当用户选择单选按钮时，在文本框中输入值并单击添加到列表按钮（单选按钮的文本+文本框的值）应该被添加到form2中的列表框中。< / p>

我编写了javascript函数来添加项目，并在两种形式中包含脚本，即在form1中，函数被触发为onclick事件的add to list按钮和form2 in body tag 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>

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

Answer 1

您的脚本按预期工作。但是，您的HTML非常无效。这可能会破坏某些浏览器中正确的解析依赖于doctype以及随后正确执行JavaScript。使用ID时，请将它们定义为唯一。 <input>是一个void标记，表示它必须没有结束标记！使用XHTML doctype时，请将open标记标记为自闭<input />。使用<label for="the-input-id">My Label</label>获取连接到input元素的可点击标签。

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

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

Answer 2

您没有正确检索'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);                
}

现在效果很好！希望这就是你要找的东西！

点击添加到列表按钮获取项目从文本框添加到列表框和javascript中的无线电

2 个答案: