Javascript 如何动态保存从html表单接收并发送到服务器的值
我试图创建将数据发送到servlet的表单。 在这里，我添加了一些动态点击按钮的输入框。但每当我输入数据并单击新建“添加数据”时，以前的数据就会丢失，并且不会显示在输入框中。 单击“添加数据”后表单的屏幕截图 我必须动态创建它。 但是，当我单击AddContent的AddData时，数据字段的值已经填充到了屏幕截图中显示的对话框中。如何在那里保存数据？ 然后，如何在单击提交按钮时将整个表单数据发送到servlet？ html代码Javascript 如何动态保存从html表单接收并发送到服务器的值,javascript,jquery,html,servlets,forms,Javascript,Jquery,Html,Servlets,Forms,我试图创建将数据发送到servlet的表单。 在这里，我添加了一些动态点击按钮的输入框。但每当我输入数据并单击新建“添加数据”时，以前的数据就会丢失，并且不会显示在输入框中。 单击“添加数据”后表单的屏幕截图 我必须动态创建它。 但是，当我单击AddContent的AddData时，数据字段的值已经填充到了屏幕截图中显示的对话框中。如何在那里保存数据？ 然后，如何在单击提交按钮时将整个表单数据发送到servlet？ html代码 <!DOCTYPE html> <html&g
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function add_fields() {
console.log(document.getElementById('wrapper').innerHTML);
document.getElementById('wrapper').innerHTML += "<br /><span>Step Number: <input name='step' type='number'style='width:75px;'value='' /></span> <span> Add Content: <input type='button' onClick='addContent()' value='Add Content' /></span>";
console.log(document.getElementById('wrapper').innerHTML);
}
function addContent(){
console.log(document.getElementById('wrapper').innerHTML);
document.getElementById('wrapper').innerHTML +="<br /><span><input name='contentimage' type='text' placeholder='enter image url' /></span><span><input name='contentmessage' type='text' placeholder='enter message' /></span><span><input name='alert' type='text' placeholder='enter alert' /></span>";
console.log(document.getElementById('wrapper').innerHTML);
}
</script>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Share Solutions</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Add Solutions</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="cost">Cost</label>
<input type="text" class="form-control" name="cost" id="cost" placeholder="Enter cost">
</div>
<div class="form-group">
<label for="difficulty">Difficulty</label>
<input type="text" class="form-control" name="difficulty" id="difficulty" placeholder="Enter Difficulty">
</div>
<div class="form-group">
<label for="image">Image</label>
<input type="text" class="form-control" name="image" id="image" placeholder="Enter Image Url">
</div>
<div class="form-group">
<label for="message">Message</label>
<input type="text" class="form-control" name="message" id="message" placeholder="Enter Message">
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" id="title" placeholder="Enter Title">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" name="description" id="description" placeholder="Enter Description">
</div>
<div class="form-group" id="wrapper">
<label for="description">Data</label> <button class="btn btn-success btn-block" type="submit" onClick="add_fields()"> Add Data</button>
</div>
<div>
</div>
<button type="submit" class="btn btn-success btn-block">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal" onClick="window.location.reload()"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
</body>
</html>
函数add_fields（）{
log（document.getElementById（'wrapper'）.innerHTML）；
document.getElementById（'wrapper'）.innerHTML+=“
步骤号：添加内容：”；
log（document.getElementById（'wrapper'）.innerHTML）；
}
函数addContent（）{
log（document.getElementById（'wrapper'）.innerHTML）；
document.getElementById（'wrapper'）.innerHTML+=“
”；
log（document.getElementById（'wrapper'）.innerHTML）；
}
.模式收割台，h4，.关闭{
背景色：#5cb85c；
颜色：白色！重要；
文本对齐：居中；
字体大小：30px；
}
.模态页脚{
背景色：#f9f9f9；
}
共享解决方案
&时代；
添加解决方案
成本
困难
形象
消息
标题
描述
数据添加数据
提交
取消
$（文档）.ready（函数（）{
$（“#myBtn”）。单击（函数（）{
$（“#myModal”）.modal（）；
});
});
<p>This is to demonstrate how to use delegation to make dynamically created buttons (or any dynamically created element) respond to an event handler.</p>
<p>Note that in order to do this, there must be some element that loads with the DOM so that the listener can find the child element inside of it.</p>
<p>In this case, we're using the div with the id of "inside_div" as our pre-loaded element and then adding the button dynamically to that div when button 1 is clicked.</p>
<div id='test_div'>
<button id='button1' value='button1'>Button 1</button>
<div id='inside_div'></div>
</div>
$('#button1').click(function () {
var btn_txt = "<br><button id='button2'>Button 2</button>";
$('#inside_div').append(btn_txt);
});
//Note that a standard event listener will not work on Button 2 because
//it was created dynamically and so the event listener cannot find it.
//$('#button2').click(function(){
// alert('button2 event');
//});
//Delegated event listener
//Note that we're referencing the element that loaded with the DOM ('#inside_div')
//Also note that insted of using a click event, we use .on() and then specificy 'click' inside of it.
//Because #inside_div already exists, we can then locate the
//dynamically created child element inside of it.
$('#inside_div').on('click', '#button2', function () {
var i = 3;
while (i <= 5) {
var btn_txt = "<br><br><button class='test_class' id='button" + i + "' >Button " + i + "</button>";
$('#inside_div').append(btn_txt);
i++;
}
});
//This is to demonstrate a listener that works on multiple elements with the same class.
$('#inside_div').on('click', '.test_class', function () {
alert('Class Alert');
});
这是为了演示如何使用委派使动态创建的按钮（或任何动态创建的元素）响应事件处理程序
请注意，为了做到这一点，必须有一些元素随DOM一起加载，以便侦听器可以在其中找到子元素
在本例中，我们使用id为“inside_div”的div作为预加载元素，然后在单击按钮1时将按钮动态添加到该div中
按钮1
$（'#button1'）。单击（函数（）{
var btn_txt=“
按钮2”；
$（'#inside_div'）.append（btn_txt）；
});
//请注意，标准事件侦听器无法在按钮2上工作，因为
//它是动态创建的，因此事件侦听器无法找到它。
//$（'#按钮2'）。单击（函数（）{
//警报（“按钮2事件”）；
//});
//委托事件侦听器
//注意，我们正在引用加载DOM的元素（“#inside_div”）
//还要注意的是，除了使用click事件之外，我们还使用了.on（），然后在其内部使用“click”。
//因为#inside_div已经存在，所以我们可以找到
//在其中动态创建子元素。
$（'#inside_div'）。在（'click'，'#button2'，函数（）{
var i=3；
而（我见此处：
您应该使用appendChild而不是innerHTML：
function add_fields() {
var newElement = document.createElement('span'),
newBr = document.createElement('br');
newElement.innerHTML = "Step Number: <input name='step' type='number'style='width:75px;'value='' /></span> <span> Add Content: <input type='button' onClick='addContent()' value='Add Content' />";
document.getElementById("wrapper").appendChild(newBr);
document.getElementById("wrapper").appendChild(newElement);
}
函数添加_字段（）{
var newElement=document.createElement（'span'），
newBr=document.createElement（'br'）；
newElement.innerHTML=“步骤编号：添加内容：”；
document.getElementById（“包装器”）.appendChild（newBr）；
document.getElementById（“包装器”）.appendChild（新元素）；
}
并且不要忘记将添加数据
按钮的类型更改为：type='buttom'
当您使用+=”附加到元素的内部HTML时，整个现有元素内容将被指定的新HTML替换，因此您会丢失用户已经输入的所有数据，因为您甚至正在替换现有字段您已经在使用jQuery了，所以不要再胡闹innerHTML了，使用jQuery方法来添加新元素。“那么，如何在单击submit按钮时将整个表单数据发送到servlet？”–太广泛了。研究如何使用jQuery序列化表单，以及如何发出AJAX请求将数据发送到服务器。当我单击“添加数据”时，当我更改“添加”字段（）时，页面将重新加载在添加数据中更改type='submit'
到type='button'
，我不知道如何在我的代码中使用委托，这样以前的数据就不会被删除。你能帮我吗？你可以使用AJAX。有大量的教程用于此。在服务器端，你可以使用会话。但是如果你这样做的话，可以使用AJAX不希望您的页面刷新。