Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Form Submission

  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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; 08-23-2011 at 01:34 PM. Reason: Additional Info

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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!; 08-23-2011 at 02:26 PM.
    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

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •