Jump to content

[SOLVED] Javascript submit...


JP128

Recommended Posts

Here is what I am trying to get...

 

I want the user to type in values (register form) and then when they submit it to check to see that all have values, and if they don't alert it and don't submit but if they do all have values, then submit.

 

<?php
include "config.php";
if($_POST['posted']){

exit();
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Register</title>
<script language="javascript">
function clearData(field){
document.getElementById(field).value="";
}
function checkValues(){
var passed = true;
if(document.getElementById('username').value.length == 0){
alert("You forgot the username field");
passed = false;
}
if(document.getElementById('password').value.length == 0){
alert("You forgot the password field");
passed = false;
}
if(document.getElementById('confirmPassword').value.length == 0){
alert("You forgot the confirm password field");
passed = false;
}
if(document.getElementById('email').value.length == 0){
alert("You forgot the email field");
passed = false;
}
if(document.getElementById('emailConfirm').value.length == 0){
alert("You forgot the confirm email field");
passed = false;
}
if(passed == true){
document.registerForm.submit();
}
}
function buttonChange(){
document.registerForm.reset.disabled=true;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<blockquote>
  <form name="registerForm" method='post' action=''>
    <table border="1">
    <tbody><tr>
      <td colspan="2"><div align="center">Register</div></td>
      </tr>
      <tr>
        <td width="120"><div align="right">Username:</div></td>
        <td width="30"><input name="username" type="text" id="username" value="Username" onFocus="clearData('username');"></td>
      </tr>
      <tr>
        <td><p align="right">Password:</p>      </td>
        <td><input name="password" type="password" id="password" value="password" onFocus="clearData('password');"></td>
      </tr>
      <tr>
        <td><div align="right">Confirm Password: </div></td>
        <td><input name="confirmPassword" type="password" id="confirmPassword" value="confirm" onFocus="clearData('confirmPassword');"></td>
      </tr>
      <tr>
        <td><div align="right">Email:</div></td>
        <td><input name="email" type="text" id="email" value="Email" onFocus="clearData('email');"></td>
      </tr>
      <tr>
        <td height="23"><div align="right">Confirm Email: 
        </div></td>
        <td><input name="confirmEmail" type="text" id="confirmEmail" value="Confirm Email" onFocus="clearData('confirmEmail');"></td>
      </tr>
      <tr>
        <td colspan="2">
          <div align="center">
          <input type="reset" name="reset" value="Reset" onClick="buttonChange">
          <button name="Submit" value="Submit" onClick="checkValues();">Submit</button>
          </div></td>
        </tr>
    </tbody>

</table>
<input type="hidden" value="posted" name="posted">
  </form>
</blockquote>
</body>
</html>

 

 

any ideas?

Link to comment
Share on other sites

to prevent a form from submitting the onSubmit value must be "false" (this is the way I have had it working in the past anyway)

 

// change this
<form name="registerForm" method='post' action=''>

//to this

<form name="registerForm" method='post' action='' onSubmit"return checkValues();">

// then change this
<button name="Submit" value="Submit" onClick="checkValues();">Submit</button>

//to this
<button name="Submit" value="Submit" >Submit</button>

 

Link to comment
Share on other sites

change your function to this as well, I had not noticed that your function did not return true or false it was making the decision itself

function checkValues(){
var passed = true;
if(document.getElementById('username').value.length == 0){
alert("You forgot the username field");
passed = false;
}
if(document.getElementById('password').value.length == 0){
alert("You forgot the password field");
passed = false;
}
if(document.getElementById('confirmPassword').value.length == 0){
alert("You forgot the confirm password field");
passed = false;
}
if(document.getElementById('email').value.length == 0){
alert("You forgot the email field");
passed = false;
}
if(document.getElementById('emailConfirm').value.length == 0){
alert("You forgot the confirm email field");
passed = false;
}
if ((document.getElementById('email').value)!=(document.getElementById('emailConfirm').value)){
alert("Your Emails do not match");
passed = false;
}
return passed;
}

 

I have also included another check to see if the emails match

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.