Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
How to generate a new field once one has data in, HTML forms help!?
I am creating a Html form which allows users to input products they wish to hire. I wish to create a row of fields so that once that row has data in, another row will be created underneath it to input the next product. Can anyone help?
2 Answers
- ʃοχειλLv 71 decade agoFavorite Answer
This is a very simple demo. You could edit it as you wish. I tested it with IE8 and FireFox 3.5.3 under Windows 7. I gave the NextIndex input a name attribute to view it in the URL when you submit the form. You could use a more complex logic to arrange the new input textboxes in a tabular form:
copy and paste this form to a page named AddField.htm, or give the action attribute of the form the name of your page; so that "submit" returns to your page with a trailing query string.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
<html xmlns="http://www.w3.org/1999/xhtml%22%3E
<head>
<title>Add Field Demo</title>
<script type="text/javascript">
function AddField ()
{
var pSec = document.getElementById ("ProductSection");
var nextIndexObject = document.getElementById ("NextIndex");
var nextIndex = parseInt (nextIndexObject.value);
nextIndexObject.value = (nextIndex + 1).toString ();
var newProduct = document.createElement ("input");
pSec.appendChild(newProduct);
var idAttrib = document.createAttribute ("id");
idAttrib.value = "Product" + nextIndex.toString ();
newProduct.attributes.setNamedItem (idAttrib);
var nameAttrib = document.createAttribute ("name");
nameAttrib.value = idAttrib.value;
newProduct.attributes.setNamedItem (nameAttrib);
var typeAttrib = document.createAttribute ("type");
typeAttrib.value = "text";
newProduct.attributes.setNamedItem (typeAttrib);
}
</script>
</head>
<body>
<form method="get" action="AddField.htm">
<input id="NextIndex" type="hidden" value="1" name="NextIndex" />
<input type="submit" value="Submit" />
<input type="button" value="Add New Product" onclick="AddField()" />
<div id="ProductSection">
<input id="Product0" type="text" name="Product0" />
</div>
</form>
</body>
</html>
