使用innerHTML添加时，字段变空

时间：2011-04-20 09:06:17

标签： 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.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>

2 个答案:

答案 0 :(得分：0)

相当多的问题。

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

答案 1 :(得分：0)

清除字段的原因是因为您使用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>
相关问题
最新问题