Fields become empty when adding using innerHTML

2023-02-27 00:22 问答作者：

Hi im trying to create a page that allows more fields to be added.

I have got it to add new fields to the page but they clear. I need it to save on a loop and cant seem to get my head round the logic.

any help would be appriciated heres my code so far.

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

The reason why the field are cleared, is because you are adding the field using innerHTML. The previous contents are replace by the new elements you stored. If you have knowledge with JQuery, this will be more easy. Anyway here's the sample working code, just take a look on the changes.

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

Quite a few issues.

Have a look at this. Note the return false and that I use jQuery to change the data

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

继续阅读：javascript

Fields become empty when adding using innerHTML

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？