Displaying specific no. of HTML input fields using javascript
I wrote the following code to Calculate determinant of a nXn matrix. I could successfully check if the order (i.e. n )entered by the user is valid or not. However I am stuck now: If I enter 3, I must display 9 text boxes and each must be checked. Firstly how do i display in general n^2 text boxes(i.e. n rows and n columns). Secondly how I check each of them individually(i.e. it is a valid entry).
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=开发者_如何学Go"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript App</title>
<script type="text/javascript" src="app1.js">
</script>
</head>
<body><h1 id="heading1" style="text-align:center; height:auto; width:auto; font-family:'Arial Black', Gadget, sans-serif">Determinant of a nxn matrix</h1>
<p id="paragraph1" style="font-family:'Arial Black', Gadget, sans-serif"> This program allows you to compute the determinant of a nxn matrix</p>
<p>
Input the order of the matrix
<br />
<input type="text" maxlength="3" name="fname" id="value" />
<input type="button" value="submit" onclick="verifyorder()" />
</p>
<p id="error"></p>
<p id="detspace">
<form method="post" action="displaydet()" name="matrix">
</p>
</body>
</html>
javascript:
var order;
function verifyorder(){
order=document.getElementById('value').value;
if(order>0){
displaydet();
}
else{
alert("Sorry, you need to enter a positive integer value, try again");
document.getElementById('error').innerHTML="Sorry, you need to enter a positive integer value, try again";
}
}
You will need to dynamically generate the text boxes since you don't know how many there will be in advance. Use the Document Object Model (DOM) for this, or alternatively, use a framework like JQuery which makes the DOM easier to use.
In this case, you need to create n * n text fields, and store them in a grid in two distinct senses of "grid". Firstly, you will want to store them in a physical HTML table, so the user sees them as a grid (that answers question 1). Secondly, you will want to store them in a 2D JavaScript array, so your code can manipulate them (that answers question 2).
So, use document.createElement("input") to create each text field. Use the setAttribute method to set the attributes of the text field, such as its "value" attribute to store the text inside it (these are the same attributes as you would see in the static HTML source for a text field). Then, store the text fields in a 2D array so you can refer back to them later. You should also be dynamically creating an HTML table (using the DOM), dynamically creating rows (tr) and cells (td), and then inserting into each td the generated text field.
Once you have done all that, the user can see all the text fields. When you need to validate them, just refer back to the 2D array you created. Use getAttribute("value") on each of the text fields to get their value back as a string. Then you can validate it as you like.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function validation_reg()
{
var f1=document.form1;
var vname=f1.Login_Name.value;
var Password=f1.Password.value;
var submitv=f1.submita.value;
{
alert(vname);
alert(password);
}
}
</script>
</head>
<body>
<form name="form1" id="form1" action="" method="POST">
<table align="center" border="1" cellpadding="5">
<tr>
<td>Login Name*</td>
<td><input id="cname" input name="Login_Name" size="30" type="text" title="Your login name, please!" class="required" maxlength="20" /></td>
</tr>
<tr>
<td> Password*</td>
<td><input id="cpaswd" input name="Password" size="31" type="password" maxlength="12" title="Your Password, please!" class="required password" />
<br /></td>
</tr>
<tr>
<td><input class="submit" name="submita" type="submit" value="Submit" onclick="return validation_reg()"/></td></tr>
</table>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论