homepage Welcome to WebmasterWorld Guest from 54.205.144.54
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Checking PHP-form
geeklike




msg:3924707
 11:44 am on Jun 2, 2009 (gmt 0)

Hi,

I have a JavaScript code that is supposed to check a PHP-form, but it doesn't actually do anything. Can anybody help?

The PHP-form looks like this;
<form id='upload' action='gallery.php' method='post'>
<div class='box'><input type='text' name='us_mail' class='upload' maxlength='60' value='Email' /><br /></div>
<div class='box'><input type='password' name='us_pass' class='upload' maxlength='32' value='Password' /><br /></div>
<input type='hidden' name='submitted' value='TRUE'/>
<button class='btn' type='submit'>Login</button>
</form>

And the JavaScript looks like this;
window.onload = function() {
var clicker = document.getElementByTagName("btn");
clicker.onClick=check_form;
}

// Form object
var f = document.getElementById('upload');
// Boolean to track if error found
var foundErr ="";
// Form element index number which the first error occured.
var focusOn ="";

function check_form() {
foundErr = false; focusOn = -1;
// Username field must be filled out.
if (f.us_mail.value.length == 0) {
alert ("Username too short.");
foundErr = true; focusOn = 0;
}

// Password field must be filled out.
if (f.us_pass.value.length == 0) {
alert("Password too short");
foundErr = true;
if (focusOn==-1) focusOn=1;
}

//Has any error occured?
if (foundErr) {
//Yes. Focus on which the first occurred.
f.elements.focus(focusOn);
} else {
// No. Submit the form.
f.submit();
}
}

Any help is wonderful!

 

daveVk




msg:3924767
 1:34 pm on Jun 2, 2009 (gmt 0)

clicker.onClick=check_form;

change onClick to all lowercase, ie onclick

geeklike




msg:3924771
 1:41 pm on Jun 2, 2009 (gmt 0)

Thanks - I tried changing that, but now Firebug says that f is null? :/

rocknbil




msg:3924795
 2:19 pm on Jun 2, 2009 (gmt 0)

There's a couple things making your approach a little convoluted . . . you have inline global variables that aren't needed . . . it can be a little easier. Also you should attach your onSubmit event to the form not the button, so if someone presses enter instead of the button, it will still work; additionally, use input type="submit" so if JS is disabled the form will still submit.

Try this. Note the ID's added to the form, and the return false to insure the Javascript handles the submit and doesn't submit via a normal form submission.

Also changed the single quotes to doubles for validation, I know why you did this via PHP but should turn to the concatenation operator to output valid code.

If you're going to use value.length, you should probably also test against a specific length. If you just want to see if it's blank, test against value==''.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line
See no reason for XHTML doctype here, do as ye wish
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
window.onload = function() { attachBehaviors(); };
function attachBehaviors () {
// Attache the behavior to the form
if (document.getElementById('upload')) {
document.getElementById('upload').onsubmit=function() {
return check_form(this);
};
}
}
function check_form(form) {
var els = Array ('us_mail','us_pass');
var descs = Array ('Username','Password');
var lens = Array (5,6);
var msg = '';
var focusObj;
for (i=0;i<els.length;i++) {
if (document.getElementById(els[i])) {
if (document.getElementById(els[i]).value.length < lens[i]) {
msg = descs[i] + ' too short.';
focusObj=document.getElementById(els[i]);
break;
}
}
}
if (msg != '') {
alert(msg);
focusObj.focus();
}
else { form.submit(); }
return false;
}
</script>
</head>
<body>
<form id="upload" action="gallery.php" method="post">
<p class="box"><input type="text" name="us_mail"
id="us_mail" class="upload" maxlength="60" value="Email"></p>
<p class="box"><input type="password" name="us_pass"
id="us_pass" class="upload" maxlength="32" value="Password"></p>
<input type="hidden" name="submitted" value="TRUE">
<input type="submit" class="btn" value="Login">
</form>
</body>
</html>


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved