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

更多精彩内容

精彩评论

最新问答

第一次出国飞行流程+注意事项？

再生油（关于再生油的介绍）？

东莞科技进修学院（关于东莞科技进修学院的介绍）？

均为镇政府人员平均年龄不超30？

手机msn在哪里下载（其实很简单）？

问答排行榜

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

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

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？