如何在加载时在输入字段中设置值答案

【问题标题】：How to set value in input field on load如何在加载时在输入字段中设置值
【发布时间】：2021-04-17 07:32:10
【问题描述】：

我有一个动态读取一些值的 JSP。根据我收到的值的数量，我想动态添加字段，并且用户可以根据需要以相同的顺序添加更多字段。

我卡住了，不知道如何在启动时动态加载的字段中添加值。

<fieldset id="statusETA" name="statusETA"></fieldset> </br>
                    <script type="text/javascript">
                            $(document).ready(function() {
                                $("#add").click(function() {
                                    var lastField = $("#statusETA div:last");
                                    var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
                                    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
                                    fieldWrapper.data("idx", intId);
                                    var fName = $("<input type=\"text\" class=\"fieldname\" name=\"status\"/>");
                                    var fType = $("<input type=\"date\" name=\"eta\"/>");
                                    var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
                                    removeButton.click(function() {
                                        $(this).parent().remove();
                                    });
                                    fieldWrapper.append(fName);
                                    fieldWrapper.append(fType);
                                    fieldWrapper.append(removeButton);
                                    $("#statusETA").append(fieldWrapper);
                                });
                                
                                
                               
                            });
                    </SCRIPT>

我想在状态（输入字段）和 eta（日期字段）中设置值，我将从请求变量中检索。

非常感谢任何帮助。

【问题讨论】：

我在 JSP 方面没有太多经验，但据我了解，如果您只需将 JSP values directly into the page 作为输入。
像这样：把<input value="value that should be here" type="text" />放到你的HTML中。
好的，让您的问题更清晰。现在您已经编辑掉了所有的 JSP 代码。试图回答你最初的问题的时间已经过去了这么多。如果您在最初发布之前想到它会很好......
感谢大家的帮助，特别是 Julien。我会尝试你的建议。

标签： jquery jsp

【解决方案1】：

您的代码有很多错误，以至于很难说出您要在此处实现的目标。乍一看：

请用更易读的术语描述您的目标和问题。我们不在你的脑海里
请正确缩进并格式化您的代码，以便我们轻松阅读。
不要使用 scriptlet 标记是 JSP（那些的东西至少从 2009 年开始就被弃用了）。你应该看看 JSTL/el
您应该完全从 JSP 生成初始 HTML，然后为用户提供一种使用 javacript 附加一些字段的方法，可能通过使用 JSP 制作某种 HTML 模板（不可见），然后根据需要复制它

这里有一个解决方案：

Java 文件 DataFilter.java

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

@WebFilter(urlPatterns = "/data.jsp")
public class DataFilter implements Filter {

    @Override
    public void init(FilterConfig arg0) throws ServletException { }

    @Override
    public void destroy() { }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        
        String[] status = {"status1", "status2", "status3"};
        String[] eta = {"2021-05-01", "2021-05-02", "2021-05-03"};
        
        req.setAttribute("status", status);
        req.setAttribute("eta", eta);
        
        chain.doFilter(req, res);
    }

}

JSP 文件 data.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">
        <title>Tomcat test</title>
        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(_e => {
                const fields = $('.fields');
                
                let lastEntryNum = fields.find('.fieldWrapper').length;
                
                addRemoveHandler(fields.find('button.remove'));
                
                $('#adder-form').on('submit', e=> {
                    e.preventDefault();
                    const jqfrm = $(e.target).closest('form');
                    const frm = jqfrm[0];
                    const template = $('#field-row-template .field-row').clone();
                    template.prop('id', template.prop('id') + (++lastEntryNum));
                    template.find('*[name="status"]').val(frm.status.value);
                    template.find('*[name="eta"]').val(frm.eta.value);
                    const remBut = template.find('button.remove');
                    remBut.value = lastEntryNum;
                    fields.append(template);
                    addRemoveHandler(remBut);
                    frm.reset();
                });
                
                function addRemoveHandler(jQButton) {
                    jQButton.on('click', e => {
                        e.preventDefault();
                        $(e.target).closest('.fieldwrapper').remove();
                    });
                }
            });
        </script>
    </head>
    
    <body>
    
        <main>
            <div class="fields">
                <h5>Data:</h5>
                <c:forEach items="${requestScope.status}" varStatus="fstat" var="curStatus">
                    <c:set var="curEta" value="${requestScope.eta[fstat.index]}" />
                    <div class="fieldwrapper" id="field-${fstat.index}">
                        <input type="text" class="fieldname" name="status" value="<c:out value="${curStatus}" />" />
                        <input type="date" name="eta" value="${curEta}" />
                        <button type="button" class="remove" name="remove" value="${fstat.index}">-</button>
                    </div>
                </c:forEach>
            </div>
            <form name="adder" id="adder-form">
                <h5>Add row:</h5>
                <input type="text" class="fieldname" name="status" />
                <input type="date" name="eta" />
                <button type="submit" name="add">Add</button>
            </form>
        </main>
        
        <template id="field-row-template">
            <div class="field-row">
                <div class="fieldwrapper" id="field-">
                    <input type="text" class="fieldname" name="status" required="required" />
                    <input type="date" name="eta" required="required" />
                    <button type="button" class="remove" name="remove" value="${fstat.index}">-</button>
                </div>
            </div>
        </template>
        
    </body>
    
</html>

附带说明，如果您有与每个“状态”字符串匹配的“eta”日期，您的数据将更好地组织在 LinkedHashMap 中，这将匹配一个状态字符串的一个 ETA 日期，并保留插入顺序。

这将使您的 jstl 更容易，因为您可以在循环中获取每个状态的 ETA，例如：

<c:forEach items="${requestScope.dataMap}" varStatus="fstat" var="entry">
    <div class="fieldwrapper" id="field-${fstat.index}">
        <input type="text" class="fieldname" name="status" value="<c:out value="${entry.key}" />" />
        <input type="date" name="eta" value="${entry.value}" />
        <button type="button" class="remove" name="remove" value="${fstat.index}">-</button>
    </div>
</c:forEach>

【讨论】：