javascript - 我用js动态生成一些表单但是数据无法传递到后端

标签 javascript html jsp

如问题中所述

我创建了两个按钮。一个是用来添加表单的,另一个是用来提交数据的,但是输入数据后点击提交按钮却不起作用

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GA'S WEB APPLY</title>
</head>
<body>
    <script>var i=1</script>
    <p>test is ing!</p>
    <hr>
    <div>
    <form action="/webTest/TestWeb" method="post">
    <input type=button onclick="document.body.insertAdjacentHTML('beforeEnd','<input type=text name='+i+' value='+i+++'> ')" value=add />
    <input type="submit" value="submit" />
    </form>
    </div>
</body>
</html>

最佳答案

您的代码中的问题在于 ''引号以及,每当您附加新 input 时它出现在 <form></form> 中tag ,因此每当您提交表单时,该值都不会传递到您的 backened页面并始终返回 null 。相反,请像下面这样:

var i = 1
$(document).ready(function() {
 //location to add new inputs
  var to_Add_at = $(".inputs");
  var add_button = $("input[name='add']");
  //on click of button
  $(add_button).click(function(e) {
    e.preventDefault();
    $(to_Add_at).append('<input type=text name='+i+' value='+i++ +'>'); //add input box

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="/webTest/TestWeb" method="post">
  <input type="button"  value="add" name="add" />
  <div class="inputs"></div>
  <input type="submit" value="submit" />
</form>

关于javascript - 我用js动态生成一些表单但是数据无法传递到后端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57281747/

相关文章:

javascript - window.on ('load' , function() {}) 完成后页面元素仍在加载?

java - 自定义 JSP 标记文件 <%@ variable ..> 不起作用?

html - Ie7 随机浮点偏移

java - 将 ArrayList<someObjects> 转换为 HTML 表

javascript - 在JSP中添加多条记录并将选定的数据发送到Servlet

javascript - 访问 ng-grid 中的选择元素

javascript - 如何计算给定时间超过 24 小时的时间百分比 hh :mm:ss?

javascript - 如何在webix中制作平面按钮

javascript - Node 流在结束错误后写入

html - 如果我的 html 看起来乱七八糟,Django 循环模板将不允许换行 我该如何解决这个问题?