java - 如何在回发后保留动态添加的控件? JavaScript、JSP

标签 java javascript jsp hidden

大家早上好。我有一个正在尝试解决的问题,但我陷入了困境,部分原因是我没有完全理解 JSP/Java 平台,也没有完全理解什么/如何以正确的方式实现我的代码。我确实有ASP背景,所以我对一些概念有点熟悉。

我遇到的问题是:我正在尝试填充动态标签和文本框以显示在网页(JSP)上。我已经成功地使用一段 JavaScript 代码填充文本框,但是,当我提交表单(在回发时)时,我的动态控件消失了,但所有静态控件仍然存在。我需要找到一种方法来将我的信息保持在提交时的动态控制中。当我有错误时,表单不会提交,但当表单完成渲染时,所有信息和动态文本都将丢失。

我的解决方案:我决定使用隐藏字段来保存此信息,但我无法在表单提交后触发隐藏字段:请看下面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
    function validateForm(){
        var x=document.forms["myForm"]["fname"].value;
        if (x==null || x=="" && document.getElementById('two').value==1){
            alert("EMPTY");
            document.getElementById('text').style.display = "block";
            return false;
        }else{
            document.myform.submit();
        }
    }

    function display(el) {
        if (el.value == "two") {
            document.getElementById('text').style.display = "block";
        }else {
            document.getElementById('text').style.display = "none";
            document.getElementById('dynbox').value = '';
        }
    }
</script>
</head>
<body>

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    <label >First Name</label> <input type="text"/>
    <div>
        <input type="radio" name="radio1" id="one" value="one" onchange="display(this);"/>Eligible
    </div>
    <div>
        <input type="radio" name="radio2" id="two" value="two" onchange="display(this);"/>Not Eligible
    </div>
        <div id="text" class="glassy" name="mytext" style="display:none;">Other: <input type="text" id="dynbox"/>
    </div>
    <div> 
        <input type="hidden" name="mytext" value="${mytext}" />
        <br></br>
        <input type="submit" onclick="validateForm()" value="Submit"/>
    </div>
</form>

</body>
</html>

我想要做的是选择“不符合条件”选项并在文本框“mytext”中输入一些文本,然后按提交。一旦我按下提交,并且如果名字文本框未填写,那么我想触发我的隐藏文本框,这样我就不会在动态创建的文本框中丢失我的信息。

我希望这是有道理的。我不知道在 JSP 中该怎么做。有人可以指导如何获得预期结果吗?回发后保留动态控件吗?

提前致谢。

最佳答案

首先有一件事:不要让 JavaJava-Script 这两个名称让您感到困惑。他们(几乎)没有任何共同点。您在这里使用的只是 Java 脚本(没有 Java,任何地方都没有 JSP)。

无论如何,我认为这是您的 validateForm() 函数中的条件不起作用。 我对其进行了一些测试,它适用于这些更改:

您的表单

 <form name="myForm" action="test.html" method="get"  onsubmit="return validateForm();">
        <label >First Name</label> <input type="text" id="firstName"/>
        <div>
            <input type="radio" name="radio1" id="one" value="one" onchange="display(this);"/>Eligible
        </div>
        <div>
            <input type="radio" name="radio2" id="two" value="two" onchange="display(this);"/>Not Eligible
        </div>
        <div id="text" class="glassy" name="mytext" style="display:none;">Other: <input type="text" id="dynbox"/>
        </div>
        <div> 
            <input type="hidden" name="mytext" value="${mytext}" />
            <br></br>
            <input type="submit" value="Submit"/>
        </div>
    </form>

我只是更改了第一个输入并给了它一个 ID(因为我在任何地方都找不到 id“fname”),因此我们可以使用 JavaScript 访问它。

接下来是您的提交按钮。您还有一个额外的 onclick="validateForm()"; ,它确实调用了 validateForm 函数,但不监听返回值(它执行该函数......仅此而已)。所以 onsubmit="return validateForm()" 就足够了。

您的验证函数

       function validateForm() {
            var x = document.getElementById('firstName').value;
            if ((x == null || x == "")) {
                alert("EMPTY");
                //  document.getElementById('text').style.display = "block";  
                return false;
            } else {
                return true;
            }
        }

x 现在可以通过元素的 id 进行检索(我发现这更容易)。无论如何,if 条件是问题之一。在表单中,将单选按钮“two”的值设置为 two。但在 if 条件下,你会问是否可能是 1...(以我的理解)这永远不应该发生。我刚刚删除它是为了向您展示您的函数是这样工作的。如果你想检查第二个单选按钮的状态,你可以这样测试:

if(document.getElementById('two').checked == true)

甚至更好

if(document.getElementById('two').checked)

最后一件事:在 else 语句中,您可以简单地返回 true 而不是调用 submit.. 因为这里:

 onsubmit="return validateForm();"

您要求 validateForm() 函数返回 true 然后提交,或者返回 false 然后停止提交。

哦,最后一件事(这是最后一件事, promise ):Java 和 JavaScript 按顺序处理所有 &&||:第一个 ´x== null´ 将被测试,然后 x==""&& document.getElementById('two').value==1 将被一起评估(&& 具有比 || 更强的绑定(bind))..供您引用:)

关于java - 如何在回发后保留动态添加的控件? JavaScript、JSP,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23018796/

相关文章:

java - java中的组和模式匹配

java - LWJGL 计时器不工作?

java - 如何在1个Java类中加载同一个Jar的2个版本

javascript - 检查 ('div' )mouseenter on ('a' )mouseleave

java - Struts2自定义登录拦截器

java - 检查 ArrayList 中的子字符串

javascript - 多个 redux-sagas

java - ForEach 循环迭代从外部类获取的 ArrayList

java - 如何在 JSP 循环中使用动态集合名称?

javascript - 很好地将 json 显示为错误