Page 1 of 1

php javascript form validation

Posted: Wed Nov 05, 2008 3:51 pm
by potato_chip
I need to test this simple javascript form validation code before doing actually work to insert data into database. However, I don't know why this very simple validation code is not working. It looks like the formValidate() function is never called. I have searched online, and compared code line by code, still couldn't figure out what's wrong. :injured:

here is my form:

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function formValidate(frm)
{   
        alert("come to form validate");
        var errorFlag = false;
        var errorMsg = "";
        var tbl = document.getElementById('tblTimesheet');
        var numOfRows = tbl.tBodies[0].rows.length;
        alert("num of rows = " + numOfRows);        
        
        for (i=1; i<=numOfRows; i++)
        {       
            var empNameValue = document.getElementById('empName' + i).value;
            var noteValue = document.getElementById('note' + i).value;
            var hoursValue = document.getElementById('hours' + i).value;
            
            if( empNameValue == "" || noteValue == "" || hoursValue == "" )
            {
                errorMsg = "can not leave any field empty.";
                errorFlag = true;
            }
            
        }
            
        if(errorFlag == true)
        {
            alert(errorMsg);
            return false;
        }
        else
        {
            document.getElementById('numOfRowsSubmit').setAttribute("value",numOfRows);
            //return true;
            //submit form
            frm.submit();
        }
    }
}
</script>
</head>
 
<body>
<form action="dosomthing.php" method="post" name="myfrm">
    <input type="hidden" name="check_submit" value="1" />
    <input type="hidden" name="numOfRowsSubmit" id="numOfRowsSubmit" value="" />
    <input type="button" value="Save" onclick="formValidate(this.form)" />
<table id="tblTimesheet">
<thead>
<tr><th>name</th><th>note</th><th>hours</th></tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="empName1" id="empName1" size="30" /></td>
<td><input type="text" name="note1" id="note1" size="30" /></td>
<td><input type="text" name="hours1" id="hours1" size="30" /></td>
</tr>
<tr>
<td><input type="text" name="empName2" id="empName2" size="30" /></td>
<td><input type="text" name="note2" id="note2" size="30" /></td>
<td><input type="text" name="hours2" id="hours2" size="30" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
 
 
here is the dosomething.php:

Code: Select all

<?php
$frmSubmitted = $_REQUEST['check_submit'];
if (isset($frmSubmitted))
{
    $message = "data valid and form posted.";
    $numOfRows = $_REQUEST['numOfRowsSubmit'];
    $message .= "<br />number of rows submitted: " . $numOfRows;
 
    //for($i=1; $i <= $numOfRows; $i++)
    for($i=1; $i <= 2; $i++)
    {
        $nameRow = 'empName' . $i;
        $noteRow = 'note' . $i;
        $hoursRow = 'hours' . $i;
        
        $message .= "<br />name Row " . $i . " = " . $_REQUEST[$nameRow];
        $message .= "<br />note Row " . $i . " = " . $_REQUEST[$noteRow];
        $message .= "<br />hours Row " . $i . " = " . $_REQUEST[$hoursRow];
    }
    
 
}
else
{
    $message = "form not posted.";
}
 
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
 
<body>
 
 
<!--begin right main information -->
    <!-- retrieve time sheet information from database -->
    <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="1">
    <tr>
        <td> 
        <?php echo $message; ?>
        </td></tr>       
    </table>
    <!-- end retrive time sheet information -->
 <!-- end right main information -->
</body>
</html>
thanks for all your kind help!

Re: php javascript form validation

Posted: Wed Nov 05, 2008 4:16 pm
by infolock
first, javascript is a pain in the butt to debug. Download firefox (if you havent already) and install the Javascript Debug Console

next, change the input type = button to submit, remove the onclick, and put onsubmit = "formValidate(this.form)" in the form body. Remove the action for now since you are just testing (replace when done testing).

next, comment out each line of code in the formValidate function. uncomment it line by line until it stops working (that is, if you don't have firefox with the debugger, otherwise check the console app to see what is going on).

you should find your culprit soon enough.

Re: php javascript form validation

Posted: Wed Nov 05, 2008 5:02 pm
by potato_chip
infolock,

Thank you so much for the javascript debugger suggestion!!! I found the problem! the debug tool is truely a bless! Thank you very much!

Re: php javascript form validation

Posted: Wed Nov 05, 2008 6:02 pm
by infolock
no problemo, glad to help ;)