...

View Full Version : InnerHTML Save Data Question



theflyingminstr
01-05-2011, 06:17 PM
Hi, I got the following script to work the way I want it by adding new text inputs with new name values, but if there is data added and the add button is clicked again everything disappears. Is there any way to keep the data from going AWAL?


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script>
var counter = 0;
function generateRow() {
counter += 1;
var d=document.getElementById("add_new");
d.innerHTML+="<p><input type='text' name='new_item" + counter + "'>";
}

</script>
</head>

<body>
<form id="form1" name="form1" method="get" action="">
<div id="add_new"></div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
<p>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</p>
</form>
</body>
</html>

Thanks much!

EDIT: I was looking on Google and saw a JQuery method of doing it if someone has an idea of how to get this one to hold up..


<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript"><!--


$(document).ready(function(){

var counter = 2;
$("#add").click(function () {
if(counter==11){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' name='t"+counter+"' id='t"+counter+"' > </div>\n");
++counter;
});

$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
// --></script>


</head>

<body>

<form id="form1" name="form1" method="get" action="">
<div id='textBoxes'>
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' name='t1' id='t1' ></div>
</div>
<input type='button' value='add' id='add'>
<input type='button' value='remove' id='remove'>

<br/>
<input type="submit" name="Submit" value="Submit" />

</form>

</body>

</html>


Thanks again

theflyingminstr
01-05-2011, 07:42 PM
Answer: http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum