0

我是 javascript 新手，我需要一些帮助。

我在一个表单标签中有 div 标签，他有自己的提交按钮。在这个 div 标签内，我有一个带有一些名称的组合框和两个按钮，一个用于在列表 (li) 中添加一个项目，另一个用于删除它。

我的问题是当我选择一个名称并按下添加按钮时，我调用了 javascript 函数来执行此操作，但它也会刷新我的 html 页面。我不想要那个。

我该怎么做？

没有表单标签它工作得很好。

此致

这是代码：

<@s.form action="confuserpermission" theme="simple">
<@s.hidden name="saveuserpermission" value="true"/>
<div style="float: left; margin-top: 0.8em;">
    <h5 style="color: #1E1E1E;">Login Utilizador:</h5>
<div class="input">
    <@s.textfield name="confUserBean.name" label="Nome" cssClass="input"/>
</div>
<div style="display: inline">
    <h5 style="color: #1E1E1E; display: inline">Escolhe e Adiciona uma Entidade</h5>
    <select id="entityList">
        <option value="default">-----Select-----</option>
        <@s.iterator value="listaEntidades">
            <option value="<@s.property />"><@s.property /></option>
        </@s.iterator>
    </select>
    <button class="submit" onclick="adicionaEntidade()">Adicionar</button> <button class="submit" onclick="removaEntidade()">Remover</button>
    <ul id="myList"></ul>
</div>

<script>
    function isInArray(value, array) {
        return array.indexOf(value) > -1 ? true : false;
    }
    function checkIfEntityIsAlreadyInList(entidade) {
        var texts = [], lis = document.getElementById("myList").childNodes;
        for (var i = 0, im = lis.length; im > i; i++) {
            texts.push(lis[i].firstChild.nodeValue);
        }
        return isInArray(entidade, texts);
    }
    function adicionaEntidade()
    {
        var e = document.getElementById("entityList");
        var entidade = e.options[e.selectedIndex].value;
        if (entidade !== "default" && !checkIfEntityIsAlreadyInList(entidade)) {
            var node = document.createElement("LI");
            var textnode = document.createTextNode(entidade);
            var fileTypeNode = document.createElement("UL");
            var optionArray = ["PSX", "PS2", "XLS"];
            for (var option in optionArray) {
                if (optionArray.hasOwnProperty(option)) {
                    var pair = optionArray[option];
                    var checkbox = document.createElement("input");
                    checkbox.type = "checkbox";
                    checkbox.name = pair;
                    checkbox.value = pair;
                    fileTypeNode.appendChild(checkbox);
                    var label = document.createElement('label');
                    label.htmlFor = pair;
                    label.appendChild(document.createTextNode(pair));
                    fileTypeNode.appendChild(label);
                    //fileTypeNode.appendChild(document.createElement("br"));
                }
            }

            node.appendChild(textnode);
            node.appendChild(fileTypeNode);
            document.getElementById("myList").appendChild(node);
        }
    }
    function removaEntidade()
    {
        var e = document.getElementById("entityList");
        var entidade = e.options[e.selectedIndex].value;
        if (entidade !== "default" && checkIfEntityIsAlreadyInList(entidade)) {
            var lis =  document.getElementById("myList").childNodes;
            var indexOfChildToRemove = -1;
            for (var i = 0, im = lis.length; im > i; i++) {
                if(lis[i].firstChild.nodeValue === entidade){
                    indexOfChildToRemove = i;
                    break;
                }
            }
            if(indexOfChildToRemove>-1){
                document.getElementById("myList").childNodes[indexOfChildToRemove].remove(indexOfChildToRemove);
            }
        }
    }
</script>
<div class="submit">
    <@s.submit theme="xhtml" value="Guardar"/>
</div>

4

2 回答 2

0

You can modify the button with input type="button" as follows which will not submit the form:

<input type="button" class="submit" onclick="adicionaEntidade()" value="Adicionar"/>
<input type="button" class="submit" onclick="removaEntidade()" value="Remover"/>
于 2013-11-18T11:30:54.760 回答
0

代替

<button class="submit" onclick="adicionaEntidade()">Adicionar</button> <button class="submit" onclick="removaEntidade()">Remover</button>

经过

<button class="submit" onclick="adicionaEntidade()">Adicionar</button> <button class="submit" onclick="removaEntidade(); return false">Remover</button>

问题是这个按钮提交表单，因此重新加载页面。制作return falseonclick 功能可防止提交表单。

于 2013-11-15T10:09:50.593 回答