form validation. Radio button check doesn't work and some other problems in form

Question

<!DOCTYPE html>
<html>
<head>
<title>SignUp</title>
<link rel="stylesheet" href="style/style.css">
<style type="text/css">
#signup{ 
    margin-left:200px;
    margin-top:90px;
}
#signup input{
    margin:2px 0px 20px 10px;
    background-color:#EAEAEA;
}

#signup button{
    font-size:16px;
margin-top:50px;
margin-left:150px;
width:100px;
height:31px;
background-color:#333333;
text-align:center;
color:#FFF;
}   
</style>
<script>
function signup()
{
var x1=document.forms["signUpForm"]["username"].value;

var x2=document.forms["signUpForm"]["email"].value;

var x3=document.forms["signUpForm"]["password1"].value;

var x4=document.forms["signUpForm"]["password2"].value; 

var x5="";                                                      /* document.forms[0].radios is an array filled with all radio buttons. Loop through all of                                                       them and see if it is checked. If one is, transfer the value of that radio button to                                                         user_input.*/
var atpos=x2.indexOf("@");
var dotpos=x2.lastIndexOf("."); 
if(document.getElementById('gender_Male').checked) {
    x5="Male";

}else if(document.getElementById('gender_Female').checked) {
  x5="Female";
}

if (x1==null || x1==""|| x2==null || x2==""||  x3==null || x3=="" || x4==null || x4=="" || x5=="")
  {
  alert("Please fill all the required fields");
  return false;
  }

else if (x3!=x4){
    alert("Psswords do not match");
  return false;
}

else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x2.length)
  {
  alert("Not a valid e-mail address");
  return false;

  }
else{

    return document.forms[0].action = "signupdata.php";
}
}

</script>

</head>
<body>
<?php include_once("template_pageTop.php"); ?>
<div id=signup>
<h2>Sign Up Here </h2>
<form  method="post" name="signUpForm" >
<table  border="0" cellpadding="2">
  <tr>
    <td >UserName:*</td>
    <td ><input type="text" name="username" size="30"  ></td>
  </tr>
  <tr>
    <td>Email:*</td>
    <td><input type="text" name="email" size="30" ></td>
  </tr>

  <tr>
    <td>Password:*</td>
    <td><input type="password" name="password1" size="30" ></td>
  </tr>
  <tr>
    <td>Confirm Password:*</td>
    <td><input type="password" name="password2" size="30" ></td>
  </tr>

  <tr>
    <td>Gender:*</td>
    <td ><input type="radio" name="gender" value="male" id="gender_Male">Male<br/>
        <input type="radio" name="gender" value="female" id="gender_Female">Female</td>
  </tr>

  <tr>
      <td><button  onclick= "signup()" >SignUp</button> </td>

      <td><button type="reset" >Cancel</button> </td>
  </tr>

</table>

</form>
</div>
</body>
</html>

There are several things I need to improve in this form.

If there are no errors how to make the signup page visible.(After clicking signUp mine goes to a blank signupdata.php page.How to stop this)
how to check if the radio button (gender) has been filled.My form desn't check that.
When a field is not filled and after error message pops all the filled areas (including correctly filled) vanishes.Is there a way to stop this and keep all the correctly filled data.

I am completely new to web design.Any help please.

Answer 1

If the radio button is mandatory it is good to ckeck by default one of the radio buttons.

<input type="radio" name="gender" checked  value="male" >Male<br/>
        <input type="radio" name="gender" value="female">Female</td>

Answer 2

    <input type="radio" name="gender" checked  value="male" id="male" >Male<br/>
    <input type="radio" name="gender" value="female" id="female">Female</td>

  if(document.getElementById('male').checked) {
      //Male radio button is checked
  }else if(document.getElementById('female').checked) {
      //Female is checked
  }

form validation. Radio button check doesn't work and some other problems in form

Question

2 answers

solution1
1 2013-04-18 12:17:01

solution2
0 2013-04-18 12:27:03

form validation. Radio button check doesn't work and some other problems in form

Question

2 answers

solution1 1 2013-04-18 12:17:01

solution2 0 2013-04-18 12:27:03

solution1
1 2013-04-18 12:17:01

solution2
0 2013-04-18 12:27:03