Fatal编程技术网
  • jquery/
  • Jquery 如何在加载时设置输入字段中的值

Jquery 如何在加载时设置输入字段中的值

jquery jsp

Jquery 如何在加载时设置输入字段中的值,jquery,jsp,Jquery,Jsp,我有一个JSP，在这里我动态地读取一些值。根据我收到的值的数量，我希望动态添加字段，如果用户愿意，可以在相同的序列中添加更多字段 我被卡住了，无法在启动时动态加载的字段中添加值 <fieldset id="statusETA" name="statusETA"></fieldset> </br> <script type="text/javascript"

我有一个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>



$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
var lastField=$（“#statusETA div:last”）；
var intId=（lastField&&lastField.length&&lastField.data（“idx”）+1）| 1；
var fieldWrapper=$（“”）；
fieldWrapper.data（“idx”，intId）；
变量fName=$（“”）；
var fType=$（“”）；
var removeButton=$（“”）；
移除按钮。单击（函数（）{
$（this.parent（）.remove（）；
});
fieldWrapper.append（fName）；
fieldWrapper.append（fType）；
fieldWrapper.append（removeButton）；
$（“#statusETA”）.append（fieldWrapper）；
});
});
我想在status（输入字段）和eta（日期字段）中设置值，我将从请求变量中检索这些值

非常感谢您的帮助。

您的代码有太多错误，很难说您在这里想要实现什么。乍一看：

  • 请用更具可读性的术语描述您的目标和问题。我们不在你脑子里
  • 请正确缩进和格式化您的代码，以便我们能够轻松阅读
  • 不要使用scriptlet标记is-jsp（这些东西至少从2009年起就被弃用了）。您应该研究JSTL/el
  • 您应该完全从JSP生成初始HTML，然后为用户提供一种使用JavaScript附加某些字段的方法，可能是使用JSP制作某种HTML模板（不可见），然后根据需要复制它
这里有一个解决方案：

Java文件
DataFilter.Java

import java.io.IOException；
导入javax.servlet.Filter；
导入javax.servlet.FilterChain；
导入javax.servlet.FilterConfig；
导入javax.servlet.ServletException；
导入javax.servlet.ServletRequest；
导入javax.servlet.ServletResponse；
导入javax.servlet.annotation.WebFilter；
@WebFilter（urlPatterns=“/data.jsp”）
公共类DataFilter实现过滤器{
@凌驾
public void init（FilterConfig arg0）抛出ServletException{}
@凌驾
public void destroy（）{}
@凌驾
公共无效doFilter（ServletRequest-req、ServletResponse-res、FilterChain链）
抛出IOException、ServletException{
字符串[]状态={“状态1”、“状态2”、“状态3”}；
字符串[]eta={“2021-05-01”、“2021-05-02”、“2021-05-03”}；
请求设置属性（“状态”，状态）；
请求设置属性（“eta”，eta）；
链式过滤器（要求、恢复）；
}
}
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>
我在JSP方面没有太多的经验，但据我所知，如果您只是将作为输入的value属性，您可能可以跳过使用jQuery来插入所有字段。现在您已经编辑掉了所有JSP代码。为了回答你最初的问题，花了这么多时间。如果你在开始发帖之前就想到了，那就太好了……谢谢大家的帮助，特别是朱利安。我会试试你的建议。 
<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>