Form Validation and Alerts not Working

[elcabron10]

1. the javascript im trying to code:

2. html form im trying to code.

 

The alerts that supposed to pop up are not working.

 

Please advise me. 

1*

<!--Form validation js script-->
<script language="javascript" type="text/javascript">

	function formValidate() {
		var form=document.forms["myForm"]["DeptNo"].value;
		if (form==null || form="")
			{
			alert("Dept number missing");
			return false;
			}
		}
			
</script>

2*

<form method="post" name="myForm"  onSubmit="return formValidate();" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>">
          <tr>
            <td>Department Number</td>
            <td><input type="text" name="DeptNo" size="40"></td>
          </tr>

[ginerjm]

I believe your JS is flawed.  Turn on your debugging tool (IE - Developer Tools ?) and you should see an error in the if statement (== vs. =) as well as that reference you are trying to build to a named object.  Basically - that function is not running.

[elcabron10]

i pressed f12 because im using chrome, what do you mean i should see an error? what flaw are you referring to?

[ginerjm]

What is your intent with your if statement?  You have a test there and an assignment there.  Also what are you trying to reference in your form?  You appended a name but your didn't ask JS to getelementbyname(s) so what do you expect to happen there?  IIRC you have to use a function call to get an element by name.

 

(I thought I made it clear earlier)

[elcabron10]

  i get that code reference from w3cshools, what i want to achieve is when the user click submit and there's a blank field, it will prompt/alert the user to review his data before inserting the data to mysql database

[ginerjm]

Many people have written that w3schools is not to be trusted.  That said - did you cut and paste this code or did you re-type it and make a mistake, because it is incorrect as you've posted it.

[elcabron10]

Oh i didnt know that, i modified it to match the criteria of the forms of my field. 

[ginerjm]

Whatever that means.....

 

So - what is happening now?

[elcabron10]

nothing is happening, it just keeps adding data to myqsl database even if the textfields are empty

[ginerjm]

Can we see your new code?

[elcabron10]

The js script

<!--Form validation js script-->
<script>

	function formValidate() {
		var form=document.forms["myForm"]["DeptNo"].value;
		if (form==null || form="")
			{
			alert("Dept number missing");
			return false;
			}
		}
			
</script>

the forms

<table border = "1">
    <tr>
      <td align="center">Department Management</td>
    </tr>
    <tr>
      <td><table>
            <form method="post" name="myForm"  onSubmit="return formValidate();" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>">
          <tr>
            <td>Department Number</td>
            <td><input type="text" name="DeptNo" size="40"></td>
          </tr>
          <tr>
            <td>Department Name</td>
            <td><input type="text" name="DeptName" size="40"></td>
          </tr>
          <tr>
            <td>Department Type</td>
            <td><input type="text" name="DeptType" size="40"></td>
          </tr>
          <tr>
            <td>Telephone</td>
            <td><input type="text" name="Telephone" size="40"></td>
          </tr>
          <tr>
            <td>Fax</td>
            <td><input type="text" name="Fax" size="40"></td>
          </tr>
          <tr>
            <td>Address</td>
            <td><input type="text" name="Address" size="40"></td>
          </tr>
          <tr>
            <td>Remarks</td>
            <td><input type="text" name="Remarks" size="40"></td>
          </tr>
          <tr>
            <td></td>
            <td align="left"><input type="submit" name="submit" value="save"></td>
          </tr>
        </table></td>
    </tr>
  </table>

the code for inserting data to mysql database

<?php
	
		if (isset($_POST['submit'])){
		
		//database connection
		mysql_connect("localhost","root","pass"); 
		mysql_select_db("db");
		
		$DeptNo = $_POST['DeptNo'];
		$DeptName = $_POST['DeptName'];
		$DeptType = $_POST['DeptType'];
		$Telephone = $_POST['Telephone'];
		$Fax = $_POST['Fax'];
		$Address = $_POST['Address'];
		$Remarks = $_POST['Remarks'];

		//insert data to database using order variable
		$order = "INSERT INTO tbldepartmentlist (DeptNo, DeptName, DeptType, Telephone, Fax, Address, Remarks) VALUES ('$DeptNo','$DeptName','$DeptType','$Telephone','$Fax','$Address','$Remarks')";
		
		//declare in the order variable
		$result = mysql_query($order); //order executes
				
		if($result){
			echo("<br>Transaction Successfull.");
		}else{
			echo("<br>Transaction Failed.");
			}
		}
	?>

[ginerjm]

You didn't correct it!

 

Saying good by now.

[elcabron10]

Im totally new to this language, im stuck up on that thing. Please help.

[ginerjm]

Oh, alright.  My good deed for this day.

 

 

<script>

function formValidate()

{

    var form=document.forms["myForm"]["DeptNo"].value;

     if (form==null || form="")

     {

         alert("Dept number missing");

         return false;

      }

 }

</script>

 

Your original JS code should look like this - I think.

<script type='text/javascript'> 
function formValidate() 
{ 
   var form=document.forms["myForm"];
   var depts = form.getElementsByName["DeptNo"];
   if (depts.length > 0)
   {
     var dept = depts[0].value; 
     if (dept == null || dept == "") 
     { 
        alert("Dept number missing"); 
        return false; 
     } 
     return true;
   }
   else
   {
       alert("Dept number missing");
        return false;
   }
} 
</script>

 

I like to break down my code into distinct steps to aid in getting it done right.  Once this works, you may consolidate it as you see fit - or not.

This should get your js working.  Didn't look at the rest.

[jazzman1]

The properties such a name, method, target, value and so forth in form are used with next syntax:

document.formname.controlname.property.

Formname is the name of the form of the document, controlname is the name of the control and the property is the name of the property you wish to use.

So, using the patern below you can return the value of the value property very easy.

document.myForm.DeptNo.value

Instead of formname you could use forms[x] where "x" represents the number of the form in the document, numbering starts with 0 index for
the first form in the document such as document.forms[0]. So, to achieve the same result you can use next:

document.forms[0].DeptNo.value or document.forms[0][0].value where the second array with index 0 is the controlname of the form or references by name such as document.forms['myForm']['DeptNo'].value.

Edited January 12, 2014 by jazzman1