HTML Help

wxzhangyao · Joined: 19 Jun 2009 Posts: 6

Dear All,

I am a beginner in JavaScript.Right now I am working on a programm which should realize the function below.
From the webpage I created, the user can input the values in text field.Before the user click the send button,my program should check the input values correct or not automaticlly.If the input values are not from '0' to '9' or with a '.' ,then an error message which says "Invalid Inputs" should alert.I succeeded in realizing this function with a check button,but when I try to change it without th button.It cannot check the inputs at all.Whatever you input, it will always be correct .
Could anyone here help me?Thanks!

Here is my modified program:
<html>
<head>
<title>PeTEX Testframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT TYPE="text/javascript">

</SCRIPT>

</head>
<body>

<table width="74%" height="736" border="0">
<tr>
<td width="50%" height="21" bgcolor="#99FF99">Camera</td>
<td width="50%" bgcolor="#FF9966">Zwick controls</td>
</tr>
<tr>
<td height="320" bgcolor="#99FF99">
 </td>
<td bgcolor="#FF9966">
<form action="mycgi.pl" NAME="testform" method="post" onSubmit=" onSubmit="return TestDataCheck()" >
a0:<INPUT NAME="qtytested" SIZE=3><BR>
b0<INPUT NAME="qtypassed" SIZE=3><P>
<input type="submit" value="Send" name="Send">
</form>
</td>
</tr>
<tr>
<td height="21" bgcolor="#9999CC">Content</td>
<td bgcolor="#FFFF66">Results</td>
</tr>
<tr>
<td height="364" bgcolor="#9999CC">
</td>
<td bgcolor="#FFFF66"> </td>
</tr>
</table>

</body>
</html>

Here is "mycgi.pl" file:
<HTML>
<HEAD>
<TITLE>Idocs Guide to HTML: My CGI</TITLE>
</HEAD>
<BODY>

<TABLE WIDTH="100%" CELLSPACING=0 CELLPADDING=0>
<TR VALIGN=TOP>
<TD><A HREF="/" TARGET="_top"><IMG
SRC="../graphics/logo.med.guide.gif"
WIDTH=157 HEIGHT=75 ALT="Idocs Guide to HTML" BORDER=0></A></TD>
<TD ALIGN=RIGHT></TD>
</TR></TABLE>

<H1>My CGI</H1>

This CGI displays the <CODE>name=value</CODE> pairs sent to it. Feel
free to use this CGI for practice making HTML forms. This CGI is provided
compliments of the <A HREF="http://www.htmlcodetutorial.com/">HTML Code Tutorial</A>.<P>

<HR><P><TABLE BORDER CELLPADDING=4>
<TR VALIGN=TOP><TH ROWSPAN=1>qtytested</TH><TD><PRE>12</PRE></TD></TR>
<TR VALIGN=TOP><TH ROWSPAN=1>qtypassed</TH><TD><PRE>3</PRE></TD></TR>
</TABLE><P>
<HR><P>
A lot of people have asked to see the code for this CGI.
OK, <A HREF="http://www.htmlcodetutorial.com/index_famsupp_91.html">here
it is</A>.

</BODY>
</HTML>

nikki · Joined: 24 Nov 2008 Posts: 132

you can use java script.

<html>
<head>
<script>
function trimString(str, chars) {
return ltrim(rtrim(str, chars), chars);
}

function ltrim(str, chars) {
chars = chars || "\\s";
return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}

function rtrim(str, chars) {
chars = chars || "\\s";
return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}

function checkKeyWords(val, keyword){
if(val.indexOf(keyword)!=-1){
return true;
}else{
return false;
}
}

function TestDataCheck()
{
var a0 = document.getElementById("qtytested").value;
var b0 = document.getElementById("qtypassed").value;

a0 = trimString(a0, "");
b0 = trimString(b0, "");

if(a0 == "" ){
alert("a0 cannot be null");
return;
}

if(b0 == "" ){
alert("b0 cannot be null");
return;
}

if(checkKeyWords(a0, '.')){
alert("a0 cannot have '.' ");
return;
}
if (checkKeyWords(b0, '.')){
alert("b0 cannot have '.' ");
return;
}

if(isNaN(a0)){
alert(" a0 should be integer ");
return;
}

if(isNaN(b0)){
alert("b0 should be integer ");
return;
}

if(a0 > 9 || a0 < 0) {
alert("a0 should be between 0 and 9 ");
return;
}
if(b0 > 9 || b0 < 0) {
alert("b0 should be between 0 and 9 ");
return;
}

}

</script>
</head>

<body>
<table width="74%" height="736" border="0">
<tr>
<td width="50%" height="21" bgcolor="#99FF99">Camera</td>
<td width="50%" bgcolor="#FF9966">Zwick controls</td>
</tr>
<tr>
<td height="320" bgcolor="#99FF99">
 </td>
<td bgcolor="#FF9966">
<form action="mycgi.pl" NAME="testform" method="post" >
a0:<INPUT id="qtytested" SIZE=3><BR>
b0<INPUT id="qtypassed" SIZE=3><P>
<input type="button" value="Send" name="Send" onclick = "TestDataCheck()">
</form>
</td>
</tr>
<tr>
<td height="21" bgcolor="#9999CC">Content</td>
<td bgcolor="#FFFF66">Results</td>
</tr>
<tr>
<td height="364" bgcolor="#9999CC">
</td>
<td bgcolor="#FFFF66"> </td>
</tr>
</table>
</body>
</html>

wxzhangyao · Joined: 19 Jun 2009 Posts: 6

Hi,
Thx for your advice.Now I can check the values automatically,but a new problem appears from your method.
When I input the right ao and b0,it cannot send the values and I cannot see the right page "mycgi.pl" .Could you pls check this part?
Thx!

nikki · Joined: 24 Nov 2008 Posts: 132

Add "document.testform.submit();" as the last statement in the JS function TestDataCheck()

function TestDataCheck()
{
var a0 = document.getElementById("qtytested").value;
var b0 = document.getElementById("qtypassed").value;

a0 = trimString(a0, "");
b0 = trimString(b0, "");

if(a0 == "" ){
alert("a0 cannot be null");
return;
}

if(b0 == "" ){
alert("b0 cannot be null");
return;
}

if(checkKeyWords(a0, '.')){
alert("a0 cannot have '.' ");
return;
}
if (checkKeyWords(b0, '.')){
alert("b0 cannot have '.' ");
return;
}

if(isNaN(a0)){
alert(" a0 should be integer ");
return;
}

if(isNaN(b0)){
alert("b0 should be integer ");
return;
}

if(a0 > 9 || a0 < 0) {
alert("a0 should be between 0 and 9 ");
return;
}
if(b0 > 9 || b0 < 0) {
alert("b0 should be between 0 and 9 ");
return;
}
document.testform.submit();
}

wxzhangyao · Joined: 19 Jun 2009 Posts: 6

Hi,according to your advise.I modified my program as follow.I changed <input type="button" value="Send" name="Send" onclick = "TestDataCheck()">
into <input type="submit" value="Send" name="Send" onclick = "TestDataCheck()">,then when i get an error message,it cannot also link to the right page.
If I use <input type="button"> and add "document.testform.submit()" in the JS,when I get a right message,it cannot link to the next page.

Here is the html file
<html>
<head>
<title>new PeTEX Testframe</title>
<script>
function trimString(str, chars) {
return ltrim(rtrim(str, chars), chars);
}

function ltrim(str, chars) {
chars = chars || "\\s";
return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}

function rtrim(str, chars) {
chars = chars || "\\s";
return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}

function checkKeyWords(val, keyword){
if(val.indexOf(keyword)!=-1){
return true;
}else{
return false;
}
}

function TestDataCheck()
{
var a0 = document.getElementById("qtytested").value;
var b0 = document.getElementById("qtypassed").value;
var numericExpression = /^[0-9\.\0-9]+$/;

a0 = trimString(a0, "");
b0 = trimString(b0, "");

if(a0 == "" ){
alert("a0 cannot be null");
return;
}

if(b0 == "" ){
alert("b0 cannot be null");
return;
}

if((a0.match(numericExpression))&& (b0.match(numericExpression)))
{alert("Valid Inputs!Please continue!")
return ; }
else{
alert("Invalid Inputs!");
return ;
}
}
</script>
</head>

<body>
<table width="74%" height="736" border="0">
<tr>
<td width="50%" height="21" bgcolor="#99FF99">Camera</td>
<td width="50%" bgcolor="#FF9966">Zwick controls</td>
</tr>
<tr>
<td height="320" bgcolor="#99FF99">
 </td>
<td bgcolor="#FF9966">
<form action="Zwick Parameter.php" NAME="testform" method="post" >
a0:<INPUT id="qtytested" SIZE=10><br>
b0:<INPUT id="qtypassed" SIZE=10><p>
<input type="submit" value="Send" name="Send" onclick = "TestDataCheck()">
</form>
</td>
</tr>
<tr>
<td height="21" bgcolor="#9999CC">Content</td>
<td bgcolor="#FFFF66">Results</td>
</tr>
<tr>
<td height="364" bgcolor="#9999CC">
</td>
<td bgcolor="#FFFF66"> </td>
</tr>
</table>
</body>
</html>

Here is the php file
<html>
<head>
<title>Zwick Results</title>

</head>
<body>
<?php
$input1 = $_REQUEST['i1'];
$input2 = $_REQUEST['i2'];
$send=$_REQUEST['Send'];

if ($send == "Send")
{
print ("a0=".$input1.";");
print ("b0=".$input2.";");
}
else
{
print ("Waiting For Inputs......");
}

print <<< END
<br>
<br>
<a href="Zwick Parameter.html">Please Input Parameters</a>
END;
?>
</body>
</html>

wxzhangyao · Joined: 19 Jun 2009 Posts: 6

Thx a lot.I solved the problem. :P