Amoguai
04 Feb 2010, 04:11 PM
Hello all!
So, I'm creating an interactive website and one of the functions requires the user to insert the table values (lines and columns) and the JavaScript script immediately generates the code for it.
The problem is that the innerHTML is creating a unexplained line break immediately after the table dimensions.
Once you run the code, the phrase "Insert table dimension" appears where it is supposed to be, next to the table dimensions, with no line break. Once you input some table dimensions (1,1) and you then insert unvalidated characters in the input field (a,a) the phrase "Insert table dimension" appear with a line break.
Anyone have a solution for this problem?
Kind regards,
Amoguai
<script type="text/javascript" language="JavaScript">
<!--
function dimValidator() {
var m = document.getElementById('A_m').value;
var n = document.getElementById('A_n').value;
var numericExpression = /^[0-9]+$/;
if(m.match(numericExpression) && n.match(numericExpression) && m!="0" && n!="0"){ //Check both conditions
var newHTML = "<table class=\"matrix_index\" border=\"0\">";
alert
for (i=1; i<=m; i++){
newHTML = newHTML + "<tr>";
for (j=1; j<=n; j++){
newHTML = newHTML + "<td>" + i + ","+ j + "<input size=\"3\" type=\"text\" name=\"" + i + "x" + j + "\" /></td>";
}
newHTML = newHTML + "</tr>";
}
document.getElementById('dimension').innerHTML = newHTML; //Injects the new HTML code into the page
}else{
document.getElementById('dimension').innerHTML = "Insert table dimension";
}
}
//-->
</script>
<html>
<body>
<form>
Table
<p><input type="text" name="A_m" id="A_m" size="4" onKeyUp="dimValidator()" /> x <input type="text" name="A_n" id="A_n" size="4" onKeyUp="dimValidator()" /><span id="dimension">Insert table dimension</span></p>
</form>
</body>
</html>
So, I'm creating an interactive website and one of the functions requires the user to insert the table values (lines and columns) and the JavaScript script immediately generates the code for it.
The problem is that the innerHTML is creating a unexplained line break immediately after the table dimensions.
Once you run the code, the phrase "Insert table dimension" appears where it is supposed to be, next to the table dimensions, with no line break. Once you input some table dimensions (1,1) and you then insert unvalidated characters in the input field (a,a) the phrase "Insert table dimension" appear with a line break.
Anyone have a solution for this problem?
Kind regards,
Amoguai
<script type="text/javascript" language="JavaScript">
<!--
function dimValidator() {
var m = document.getElementById('A_m').value;
var n = document.getElementById('A_n').value;
var numericExpression = /^[0-9]+$/;
if(m.match(numericExpression) && n.match(numericExpression) && m!="0" && n!="0"){ //Check both conditions
var newHTML = "<table class=\"matrix_index\" border=\"0\">";
alert
for (i=1; i<=m; i++){
newHTML = newHTML + "<tr>";
for (j=1; j<=n; j++){
newHTML = newHTML + "<td>" + i + ","+ j + "<input size=\"3\" type=\"text\" name=\"" + i + "x" + j + "\" /></td>";
}
newHTML = newHTML + "</tr>";
}
document.getElementById('dimension').innerHTML = newHTML; //Injects the new HTML code into the page
}else{
document.getElementById('dimension').innerHTML = "Insert table dimension";
}
}
//-->
</script>
<html>
<body>
<form>
Table
<p><input type="text" name="A_m" id="A_m" size="4" onKeyUp="dimValidator()" /> x <input type="text" name="A_n" id="A_n" size="4" onKeyUp="dimValidator()" /><span id="dimension">Insert table dimension</span></p>
</form>
</body>
</html>