Web Analytics Made Easy - StatCounter Form Submission - CodingForum

Announcement

Collapse
No announcement yet.

Form Submission

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Form Submission

    Ok, I am reasonably new to javascript, and I have been trying to code some really basic client-side form validation. The validation part is working, but for some reason the form won't submit if no errors are found. I have tried all different variations of the submit syntax. i.e. document.login_form.submit();. But settled with the one on W3Schools even though it still didn't work.

    I would really appreciate any advise. Here is my code:

    Code:
    <head>
<title>Project Rival - Authentication</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

function verify() {

var themessage = "Please enter your";

if (document.login_form.user.value=="") {
themessage = themessage + " username";
}

if (document.login_form.user.value=="" && document.login_form.pass.value=="") {
themessage = themessage + " and";
}

if (document.login_form.pass.value=="") {
themessage = themessage + " password";
}

//alert if fields are empty and cancel form submit
if (document.login_form.user.value!="" && document.login_form.pass.value!="") {
document.getElementById("login_form").submit();
return true;
}
else {
document.getElementById("error").innerHTML = themessage;
return false;
   }
}

</script>
</head>

<body>
<div id="container">

    <div id="login_box_top">&nbsp;</div>
    <div id="logo"><img src="images/projectrival.jpg" width="150"/></div>
    <div id="error"></div>
    <div id="login">
    	<form action="login.php" method="post" name="login_form" id="login_form">
        	<input name="user" class="input" id="user" type="text" size="30" maxlength="30" /><br /><br />
            <input name="pass" class="input" id="pass" type="password" size="30" maxlength="30" /><br /><br />
            <input name="submit" id="submit" type="button" value="Login" onclick="verify()" />
        </form>

  </div>
    <div id="login_box_bottom">&nbsp;</div>
    
    <div id="copy"><p>&copy; Martin Day 2011 </div>

</div>

</body>
</html>
    Many Thanks
    Last edited by Thanat0s; Aug 23, 2011, 08:34 AM. Reason: Additional Info
    Tags: form, javascript, submit
  • #2
    Welcome to the forum!

    Get rid of (or rename) the name "submit" on the submit button (you can leave the ID set to submit if you like).

    Then, set your submit button's type to "submit" rather than "button."

    Then use the javascript function call for the "onsubmit" attribute of the form element rather than the "onclick" attribute of the submit button (after all, what if the user hits enter rather than clicking the submit button?). And you can save a step by using "return verify();" (as opposed to just "verify();") as the javascript call. Then you don't even need to write in anything for form submission in your function, you just return true when it's good and false when it's not. And then everything should work as you intended

    Cleaned up and properly working version is below:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Project Rival - Authentication</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

function verify() {
	var themessage = "Please enter your";
	if (document.getElementById('user').value=="") {
		themessage = themessage + " username";
	}
	if (document.getElementById('user').value=="" && document.getElementById('pass').value=="") {
		themessage = themessage + " and";
	}
	if (document.getElementById('pass').value=="") {
		themessage = themessage + " password";
	}
	//alert if fields are empty and cancel form submit
	if (document.getElementById('user').value!="" && document.getElementById('pass').value!="") {
		return true;
	}
	else {
		document.getElementById("error").innerHTML = themessage;
		return false;
	}
}

</script>
</head>
<body>
<div id="container">
  <div id="login_box_top">&nbsp;</div>
  <div id="logo"><img src="images/projectrival.jpg" alt="Project Rival" style="width:150px" /></div>
  <div id="error"></div>
  <div id="login">
    <form action="login.php" method="post" id="login_form" onsubmit="return verify();">
      <div>
        <input name="user" class="input" id="user" type="text" size="30" maxlength="30" /><br /><br />
        <input name="pass" class="input" id="pass" type="password" size="30" maxlength="30" /><br /><br />
        <input id="submit" type="submit" value="Login" />
      </div>
    </form>
  </div>
  <div id="login_box_bottom">&nbsp;</div>
  <div id="copy"><p>&copy; Martin Day 2011</p></div>
</div>
</body>
</html>
    Note that you could still stand to clean up your if/else logic to reduce code, but this is functionally correct now.
    Last edited by Rowsdower!; Aug 23, 2011, 09:26 AM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:     validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

    Comment

    • #3
      Thank you so much for your help. I just copied your code over and worked a treat =]

      I will take another look at my if/else.

      Thank you again!

      Comment

      Previous template Next
      Working...
      X
      😀
      🥰
      🤢
      😎
      😡
      👍
      👎