<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
</style>
<script type="text/javascript">
function createTextBoxes(){
if(parseInt(document.getElementById('num').value) > 40 || parseInt(document.getElementById('num').value) < 1){
alert('invalid number use number between 1 and 40')
return;
}
document.getElementById('inp').style.display = 'none';
for(var i = 0; i < parseInt(document.getElementById('num').value); i++){
var input = document.createElement('input');
var span = document.createElement('span');
span.appendChild(document.createTextNode('name '+ i));
var br = document.createElement('br');
input.type='text';
input.name='text'+i;
input.id='text'+i;
document.getElementById('tb').appendChild(span);
document.getElementById('tb').appendChild(input);
document.getElementById('tb').appendChild(br);
}
}
</script>
</head>
<body>
<form name="f1">
<div id="inp">
<label>No of Textbox</label><input type="text" id="num" name='num' /><br/>
<input type="button" value="Create Textboxes" onclick="javascript: createTextBoxes();"/>
</div>
<div id="tb">
</div>
</form>
</body>
</html>
Check the above code I've done it quickly so haven't done the validation much but the core functionality works correctly.