当使用innerHTML添加时，字段变为空
Fields become empty when adding using innerHTML
我正在尝试创建一个允许添加更多字段的页面。
我已经得到它添加新的字段到页面，但他们清除。我需要它保存在一个循环中，似乎无法理解逻辑。
如果有任何帮助，我将不胜感激。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$(".datepicker").live('click', function() {
$(this).datepicker({showOn:'focus'}).focus();
});
});
</script>
<script type="text/javascript">
var num=0;
function addField(){
num++;
if(num>14){num--;}
makefields();
}
function rmField(){
num--;
if(num<0){num++;}
makefields();
}
function makefields(){
var fields="";
for(var o=0;o<=num;o++){
fields+="<p><label>Ingredients</label><input name='"txtingredient"+o+"'" type='"text'" class='"text-long'"/>";
fields+="<label>Quantity:</label><input name='"txtqty"+o+"'" type='"text'" class='"text-long'" /> or / ";
fields+="<label>Weight</label><input name='"txtweight"+o+"'" type='"text'" class='"text-long'" /></p>";
}
fields+="<br/><input type='"hidden'" name='"num'" value='""+o+"'"/>";
if(num!=14){fields+="<button type='"button'" onclick='"addField()'">Add</button>";}
if(num>0){fields+="<button type='"button'" onclick='"rmField()'">Remove</button>";}
fields+="<input type='"submit'" value='"Add recipe'"/></form>";
document.getElementById("fields").innerHTML=fields;
}
</script>
<script language="JavaScript" src="calendar_us.js"></script>
</head>
<body>
<form name="frmaddservice" action="add-recipe.php" method="post" class="jNice" onsubmit="return checkaddservice();">
<fieldset>
<p>
<label>Recipe Name:</label>
<input name="txtname" type="text" class="text-long" id="txtname" />
</p>
<p>
<label>Discription:</label>
<input name="txtdetails" type="text" class="text-long" id="txtdetails" />
</p>
<p>
<label>Cat:</label>
<select name="cat" id="cat">
<option>Select Type</option>
</select>
</p>
<div id="fields">
<p><label></label>
</p>
<p>
<label>Ingredient </label>
<input name="txtingredient0" type="text" class="text-long" id="txtingredient0" />
<label>Quantity:</label>
<input name="txtqty0" type="text" class="text-long" id="txtqty0"/>
or /
<label>Weight</label>
<input name="txtweight0" type="text" class="text-long" id="txtweight0" />
</p>
<p><label></label>
</p>
<input type="hidden" name="num" value="1"/><a href="#" onclick="addField()">Add ingredient</a>
<input type="submit" value="Add recipe"/>
</div><label></label>>
</fieldset>
</form>
</body>
</html>
字段被清除的原因是因为您正在使用innerHTML添加字段。以前的内容将被存储的新元素替换。如果您有JQuery知识，这将更容易。无论如何，这里是示例工作代码，只需看看变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$(".datepicker").live('click', function() {
$(this).datepicker({showOn:'focus'}).focus();
});
});
</script>
<script type="text/javascript">
var num=0;
var fieldCount = 1;
function addField(){
makefields(fieldCount++);
}
function rmField(fieldId){
var remThis = document.getElementById(fieldId);
remThis.parentNode.removeChild(remThis);
}
function makefields(){
var fields="";
fields+="<p><label>Ingredients</label><input name='"txtingredient"+fieldCount+"'" type='"text'" class='"text-long'"/>";
fields+="<label>Quantity:</label><input name='"txtqty"+fieldCount+"'" type='"text'" class='"text-long'" /> or / ";
fields+="<label>Weight</label><input name='"txtweight"+fieldCount+"'" type='"text'" class='"text-long'" />";
fields+='<input type="button" value="remove" onClick="rmField(''fieldCnt'+fieldCount+''')" /></p>';
var newDiv = document.createElement('div');
newDiv.innerHTML = fields;
newDiv.setAttribute('id', 'fieldCnt' + fieldCount);
document.getElementById('fieldContainer').appendChild(newDiv);
}
</script>
<script language="JavaScript" src="calendar_us.js"></script>
</head>
<body>
<form name="frmaddservice" action="add-recipe.php" method="post" class="jNice" onsubmit="return checkaddservice();">
<fieldset>
<p>
<label>Recipe Name:</label>
<input name="txtname" type="text" class="text-long" id="txtname" />
</p>
<p>
<label>Discription:</label>
<input name="txtdetails" type="text" class="text-long" id="txtdetails" />
</p>
<p>
<label>Cat:</label>
<select name="cat" id="cat">
<option>Select Type</option>
</select>
</p>
<div id="fields">
<p><label></label>
</p>
<div id="fieldContainer">
<div id="fieldCnt1">
<p>
<label>Ingredient </label>
<input name="txtingredient0" type="text" class="text-long" id="txtingredient0" />
<label>Quantity:</label>
<input name="txtqty0" type="text" class="text-long" id="txtqty0"/>
or /
<label>Weight</label>
<input name="txtweight0" type="text" class="text-long" id="txtweight0" />
<input type="button" value="remove" onClick="rmField('fieldCnt1')" />
</p>
</div>
</div>
<p><label></label>
</p>
<input type="hidden" name="num" value="1"/><a href="#" onclick="addField()">Add ingredient</a>
<input type="button" value="Add Ingredient" onClick="addField()"/>
<input type="submit" value="Add recipe"/>
</div><label></label>>
</fieldset>
</form>
</body>
</html>
有很多问题。
看看这个。注意返回false，并且我使用jQuery更改数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$(".datepicker").live('click', function() {
$(this).datepicker({showOn:'focus'}).focus();
});
});
</script>
<script type="text/javascript">
var num=0;
function addField(){
num++;
if(num>14){num--;}
makefields();
return false;
}
function rmField(){
num--;
if(num<0){num++;}
makefields();
}
function makefields(){
var fields="";
for(var o=0;o<=num;o++){
fields+='<p><label>Ingredients</label><input name="txtingredient'+o+'" type="text" class="text-long"/>';
fields+='<label>Quantity:</label><input name="txtqty'+o+'" type="text" class="text-long" /> or ';
fields+='<label>Weight</label><input name="txtweight'+o+'" type="text" class="text-long" /></p>';
}
fields+='<br/><input type="hidden" name="num" value="'+o+'"/>';
if(num!=14){fields+='<button type="button" onclick="addField()">Add</button>';}
if(num>0){fields+='<button type="button" onclick="rmField()">Remove</button>';}
fields+='<input type="submit" value="Add recipe"/>';
$("#fields").append(fields);
}
function checkaddservice(){ return false}
</script>
<script language="JavaScript" src="calendar_us.js"></script>
</head>
<body>
<form name="frmaddservice" action="add-recipe.php" method="post" class="jNice" onsubmit="return checkaddservice();">
<fieldset>
<p>
<label>Recipe Name:</label>
<input name="txtname" type="text" class="text-long" id="txtname" />
</p>
<p>
<label>Discription:</label>
<input name="txtdetails" type="text" class="text-long" id="txtdetails" />
</p>
<p>
<label>Cat:</label>
<select name="cat" id="cat">
<option>Select Type</option>
</select>
</p>
<div id="fields">
<p>
<label>Ingredient </label>
<input name="txtingredient0" type="text" class="text-long" id="txtingredient0" />
<label>Quantity:</label>
<input name="txtqty0" type="text" class="text-long" id="txtqty0"/>
or /
<label>Weight</label>
<input name="txtweight0" type="text" class="text-long" id="txtweight0" />
</p>
<p><label></label>
</p>
<input type="hidden" name="num" value="1"/><a href="#" onclick="return addField()">Add ingredient</a>
<input type="submit" value="Add recipe"/>
</div>
</fieldset>
</form>
</body>
</html>
相关文章：
- 将输入字段中的文本提交到我的数据库，同时将其添加到我的列表中
- 而循环只设置php中输入字段中的第一个值
- 在输入字段中将最小金额设置为
- 从Rally获取一个特定的标记，以便计算另一个字段中的值
- 如何在输入字段中的按钮的帮助下打开日历，该字段的类型为“＝”;日期”;
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 在wordpress一定时间后更改自定义字段
- 如何在HTML输入字段中添加不可删除的后缀
- Meteor-添加用户自定义字段的方法不起作用
- 互斥单选按钮和相应的输入字段
- 在innerHTML命令之后，将JQuery函数重新绑定到输入字段
- 如何改变innerHTML内容，如(输入字段名称，id,onclick)属性
- 通过php从innerhtml字段获取值
- Innerhtml创建textarea字段
- 使用javascript函数参数填充Rails3中innerHTML标记的值字段
- 通过innerHTML使用html DOM在输入字段中传递html文本
- 如何在没有隐藏输入字段的情况下将值从javascript(innerhtml）传递到asp.net codeehind
- 如何在保留以前的字段值的同时使用 innerHTML 创建新字段?如何在再次调用之前完全执行 .click
- 为什么innerHTML要清除这些输入字段上的值?
- 当使用innerHTML添加时，字段变为空
