Novated lease - Find jobs - Submit articles - Whoooop - Myspace Layouts
PDA

View Full Version : dom question and form validation

progfrog
Mar 26th 2008, 2:46 am
hi-
does any of you know why this function doesn't work?



<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>MyForm</title>
<style type="text/css">
.loud{
border: 3px double red;
background-color: yellow;
color: blue;
width: 100px;
padding: 30px;
margin: 20px;

}



</style>

<script type="text/javascript">
var text;
function Validform(Form1){

var MyName = document.getElementById("name1");
if( Form1.MyName.value=="")
text = "Name is required";
}


var getDiv = document.getElementById("eroorBox");
getDiv.innerHTML=text;




</script>




</head>
<body>

<form name="MyForm" onSubmit="return ValidForm('MyForm')" action="http://www.htmlcodetutorial.com/cgi-bin/mycgi.p"/>

<table style="width: 90%;" align="left">
<tr>
<td>
Your errros:

</td>
<td>
<div class="loud" id="errorBooks">
</div>
</td>
</tr>


<tr>

<td style="width: 200px">
Name
</td>
<td>
<input id="name1" size="25" maxlength="50" value="" />
</td>
</tr>
<tr>

<td>
Age
</td>
<td>
<input name="Age" size="25" maxlength="50" value="" />
</td>
</tr>
<tr>
<td>

Email adress:
</td>
<td>
<input name="em" size="25" maxlength="50" dir="ltr" value="" />
</td>
</tr>
<tr>

<td><input type="radio" value="Male" id= "radio1" Name="radio group" checked/> Male
<input id="radio2" type="radio" value= "Female" Name="radio group" /> Female</td>

</tr>
<tr>
<td align="left">Comments:
</td>
<td>
<textarea cols="24" id="Message" rows="6" style="width:25%";></textarea>
</tr>




<tr>
<td>
</td>
<td>
<input type="submit" value="submit" name="Submit" />
</td>
</tr>
</table>

</form>
So1
Mar 26th 2008, 7:12 am
use, for example
<input type="button" value="submit" onClick="Validform(document.MyFrom);">
instead of
<input type="submit" value="submit" name="Submit" />
then correct this:
<form name="MyForm" onSubmit="return ValidForm('MyForm')" action="http://www.htmlcodetutorial.com/cgi-bin/mycgi.p"/>
with
<form name="MyForm" action="http://www.htmlcodetutorial.com/cgi-bin/mycgi.p"/>
your function, in this case, will be
<script type="text/javascript">
var text;
function Validform(Form1){

var MyName = document.getElementById('name1');
if( MyName.value=="")
text = "Name is required";
getDiv = document.getElementById('errorBooks');
getDiv.innerHTML=text;

}
else Form1.submit();
</script>

Not understand, why u pass Form object as a parameter and then use document.getElementById...
Look:
<span id="errors_container"></span>
<form name="F1">
<input type="text" name="my_name" />
<input type="button" onClick="my_validate_func(document.F1);" value="Send data & validate">
</form>

<script type="text/javascript">
function my_validate_func(form_obj)
{
var name = form_obj.my_name.value;
if (name=="")
document.getElementById('errors_container').innerHTML = "OMG! ITS A ERROR!";
else form_obj.submit();
}
</script>
It's more logically way.

U have SOOOO MUUUCH errors in code... :) And wonder why this don't work. Funny. Learn HTML and using JS-objects. And why u dont specify some names for INPUT fields? Like this:
<input id="name1" size="25" maxlength="50" value="" />
u'll get data through whe QUERY_STRING in server-side script (in ur case it "http://www.htmlcodetutorial.com/cgi-bin/mycgi.p")? Very silly method.