Javascript 使用innerHTML添加时，字段变为空_Javascript

Javascript 使用innerHTML添加时，字段变为空

javascript

Javascript 使用innerHTML添加时，字段变为空,javascript,Javascript,嗨，我正在尝试创建一个允许添加更多字段的页面我有它添加新的领域的网页，但他们清除。我需要它来保存一个循环，但我似乎无法理解逻辑如果有任何帮助，我们将不胜感激。这是我目前的代码 <!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.or

嗨，我正在尝试创建一个允许添加更多字段的页面

我有它添加新的领域的网页，但他们清除。我需要它来保存一个循环，但我似乎无法理解逻辑

如果有任何帮助，我们将不胜感激。这是我目前的代码

<!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>


无标题文件
$（函数（）{
$（“.datepicker”）.live（'click'，function（）{
$（this.datepicker（{showOn:'focus'}）.focus（）；
});
});
var num=0；
函数addField（）{
num++；
如果（num>14）{num--；}
makefields（）；
}
函数rmField（）{
num--；
如果（num0）{fields+=“Remove”；}
字段+=“”；
document.getElementById（“字段”）.innerHTML=字段；
}

配方名称：


描述：


类别：
选择类型




成分
数量：
或/
重量



>

有很多问题

看看这个。注意返回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>


无标题文件
$（函数（）{
$（“.datepicker”）.live（'click'，function（）{
$（this.datepicker（{showOn:'focus'}）.focus（）；
});
});
var num=0；
函数addField（）{
num++；
如果（num>14）{num--；}
makefields（）；
返回false；
}
函数rmField（）{
num--；
如果（num0）{fields+='Remove'；}
字段+=''；
$（“#字段”）。追加（字段）；
}
函数checkaddservice（）{return false}

配方名称：


描述：


类别：
选择类型


成分
数量：
或/
重量

清除该字段的原因是，您正在使用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>


无标题文件
$（函数（）{
$（“.datepicker”）.live（'click'，function（）{
$（this.datepicker（{showOn:'focus'}）.focus（）；
});
});
var num=0；
var fieldCount=1；
函数addField（）{
makefields（fieldCount++）；
}
函数rmField（fieldId）{
var remThis=document.getElementById（fieldId）；
remThis.parentNode.removeChild（remThis）；
}
函数makefields（）{
var字段=”；
字段+=“成分”；
字段+=“数量：或/”；
字段+=“权重”；
字段+=''；
var newDiv=document.createElement（'div'）；
newDiv.innerHTML=字段；
newDiv.setAttribute（'id'，'fieldCnt'+fieldCount）；
document.getElementById（'fieldContainer'）.appendChild（newDiv）；
}

配方名称：


描述：


类别：
选择类型




成分
数量：
或/
重量



>

Hi-mplugjan，我看到了这一点，我找到了一种模拟方法来显示字段，它创建了所有内容的多个。因此，您需要定义要创建的内容。我帮不了你。这是你的决定。