Question

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

我在表单标签中有div标签，他有自己的提交按钮。在这个div标签里面，我有一个带有一些名字的combox和两个按钮，一个用于在列表中添加一个项目（li）e另一个用于删除它。

我的问题是，当我选择一个名字并按下添加按钮时，我会调用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>

Answer 1

替换

<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 false设置为onclick函数可防止提交表单。

Answer 2

您可以使用以下input type="button"修改按钮，但不会提交表单：

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

在没有刷新页面的div上添加和删除项目

2 个答案: